datatable的例子使用--增加删除修改查询
题记：上一篇博客中介绍到了一个普通的例子，可以是crud，但是当我把这个例子用到项目中时，并且引入了一个模态框，发现一个问题就是查询不好做，因为查询，要分好多种情况进行查询，这个时候就做不下去了，唯一的有用的地方就是，验证了和服务器通信的正确性，但是前端界面不好看并且查询再继续下去做很难做，所以另辟蹊径。找到了datatable. datatable中文官网链接http://dt.thxopen.com/index.html 文本中用到的datatable主要是参照了：http://dt.thxopen.com/example/user_share/basic_curd_java.html
1 代码看下面的：没有实现和服务器交互 Handlebars用的非常巧妙，优化了大量的代码，学习链接： http://caibaojian.com/handlebars-js.html ，另外再就是用一个模态框实现 绑定了两个button，这个非常好，也优化了代码。
demo工程现在链接： http://download.csdn.net/detail/u011563903/8905351
Datatable-serverSide 服务器分页例子
姓名
地点
薪水
操作
2 另外项目中的是实现了和服务器交互
.html文档：
Device Mangement
Name
IP
Group
Edit/Delete
//var data = [{ "name" : "rfswitch1" , "ip" : "80.4.2.59" , "group" : "A"}, { "name" : "rfswitch2" , "ip" : "10.75.199.244" , "group" : "B"}, { "name" : "rfswitch3" , "ip" : "10.75.192.15" , "group" : "B"}, { "name" : "rfswitch2" , "ip" : "192.168.1.3" , "group" : "A"}, { "name" : "frank" , "ip" : "192.168.1.0" , "group" : "frank"}, { "name" : "frank1" , "ip" : "192.168.1.0" , "group" : "frank1"}, { "name" : "frank2" , "ip" : "198.189" , "group" : "C"}, { "name" : "rfswich4" , "ip" : "192.168.1.9" , "group" : "D"}, { "name" : "rfswitch4" , "ip" : "192.168.1.9" , "group" : "D"}, { "name" : "rfswitch3" , "ip" : "192.168.1.9" , "group" : "D"}];
var table;
var editFlag = false;
window.οnlοad=function(){
var data = getAllDbdata();
var tpl = $("#tpl").html();//get template
//compile template
var template = Handlebars.compile(tpl);
table = $('#example').DataTable({ //datatable init
data: data,
columns: [
{"data": "name"},
{"data": "ip"},
{"data": "group"},
{"data": null}
],
columnDefs: [
{
targets: 3,//point to four column
render: function (a, b, c, d) {//render that get data from source
var context =
{
func: [
{"name": " Edit ", "fn": "edit(\'" + c.name + "\',\'" + c.ip + "\',\'" + c.group + "\')", "type": "primary"},
{"name": "Delete", "fn": "del(\'" + c.name + "\',\'" + c.ip + "\',\'" + c.group + "\')", "type": "danger"}
]
};
var html = template(context);//\u5339\u914d\u5185\u5bb9
return html;
}
}
],
// language
//Define the table control elements to appear on the page and in what order
"dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" + "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
initComplete: function () {
$("#mytool").append('');
}
});
$("#save").click(save);//edit \u5462
};
/**
* getAllDbdata
*/
function getAllDbdata(){
$("#error-msg").empty();
var query = JSON.stringify(getQueryInput("get","","",""));
var get = sendReq("/device/GetDB", query);
if (get == null){
$("#errro-msg").html(''+
'insert database!');
return;
}
//var articles1 = get.resultDB;////articles:"[{},{}]" must use eval to [{},{}]
var articles = JSON.parse(get.resultDB);//both this method and eval() can run
//var articles = eval(articles1);//very important.
return articles;
}
/**
* clear
*/
function clear() {
$("#name").val("").attr("disabled",false);
$("#ip").val("");
$("#group").val("");
editFlag = false;
}
/**
*save and edit
*/
function save() {
var flag = $("#myModalLabel").text();
//var flag = Edit;
if(flag == "Edit"){
//get input and ajax
var name = $("#name").val();
var ip = $("#ip").val();
var group = $("#group").val();
var query = JSON.stringify(getQueryInput("other",name,ip,group));
var get = sendReq("/device/EditDB", query);
if (get == null){
return;
}
if(get.msg != ""){
$("#errro-msg").html(''+
'failed, '+get.msg+'');
$('#myModal').modal('hide');
return;
}
if(get.msg == ""){
$('#myModal').modal('hide');
window.location.reload();
}
return;
}
//alert("add");//get input and ajax
var name = $("#name").val();
var ip = $("#ip").val();
var group = $("#group").val();
var query = JSON.stringify(getQueryInput("other",name,ip,group));
var get = sendReq("/device/AddDB", query);
if (get == null){
return;
}
if(get.msg != ""){
$("#errro-msg").html(''+
'failed, '+get.msg+'');
$('#myModal').modal('hide');
return;
}
if(get.msg == ""){
$('#myModal').modal('hide');
//getAllDbdata();
window.location.reload();//can moidify
}
return;
}
/**
* add data
**/
function add() {
$("#ip").attr("disabled",false);
$("#myModalLabel").text("ADD");
$("#myModal").modal("show");
$("#myModal").draggable({handle: ".modal-header"});
}
/**
*Edit
**/
function edit(name,ip,group) {
//console.log(name);
editFlag = true;
$("#myModalLabel").text("Edit");
$("#name").val(name);//\u4e3a\u4ec0\u4e48\u4e5f\u6709\u4f5c\u7528
$("#ip").val(ip).attr("disabled",true);
$("#group").val(group);
//\u5e94\u8be5\u83b7\u5f97\u6570\u636e\u4e5f\u5c31\u662f\u8981\u8fdb\u884c\u66f4\u65b0\u5904\u7406
$("#myModal").modal("show");
$("#myModal").draggable({handle: ".modal-header"});
}
/**
delete
*
*/
function del(name,ip,group) {
//\u8fd9\u4e2a\u5730\u65b9\u4e5f\u597d\u5f04\uff0c\u53ef\u4ee5\u83b7\u53d6\u6570\u636e
//alert(name+ip+group);
var query = JSON.stringify(getQueryInput("other",name,ip,group));
var get = sendReq("/device/RemoveDB", query);
if(get.msg == "failed")
{
$("#errro-msg").html(''+
'failed, '+get.msg+'');
return;
}
//$("#table tr:gt(0):eq("+c+")").remove();
window.location.reload();
}
function getQueryInput(type,name,ip,group) {
var input = {
"name" : null,
"ip" : null,
"group" : null
};
if(type == "other"){
input["name"] = name;
input["ip"] = ip;
input["group"] = group;
}
return { "input" : input };
}
function sendReq(url, query) {
var req = new XMLHttpRequest();
req.open("POST", url, false);
req.setRequestHeader("Content-type","application/json");
req.send(query.toString());
if(req.responseText == ""){
return null;
}
var get_response = jQuery.parseJSON(req.responseText).output;
return get_response;
}