datatable的例子使用--增加删除修改查询

最新推荐文章于 2024-08-23 16:50:47 发布

MonkeyProgirl

最新推荐文章于 2024-08-23 16:50:47 发布

阅读量1.4k

点赞数

找到了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

[html]view plaincopy 
    
 <!DOCTYPE html>  
 <html>  
 <head>  
     <meta charset="utf-8"/>  
     <title>Datatable-serverSide 服务器分页例子</title>  
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>  
     <link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.css"/>  
     <script src="js/jquery.js"></script>  
     <script src="js/jquery.dataTables.min.js"></script>  
     <script type="text/javascript" language="javascript" src="js/dataTables.bootstrap.js"></script>  
     <script src="js/bootstrap.min.js"></script>  
     <script src="plugin/date/bootstrap-datetimepicker.min.js"></script>  
     <script src="plugin/handlebars-v3.0.1.js"></script>  
 </head>  
 <body>  
 <div class="container">  
     <table id="example" class="table table-striped table-bordered">  
         <thead>  
         <tr>  
             <th>姓名</th>  
             <th>地点</th>  
             <th>薪水</th>  
             <th>操作</th>  
         </tr>  
         </thead>  
         <tbody></tbody>  
         <!-- tbody是必须的 -->  
     </table>  
 </div>  
 <!-- Button trigger modal -->  
   
   
 <!-- Modal -->  
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
     <div class="modal-dialog">  
         <div class="modal-content">  
             <div class="modal-header">  
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span  
                         aria-hidden="true">×</span></button>  
                 <h4 class="modal-title" id="myModalLabel">新增</h4>  
             </div>  
             <div class="modal-body">  
                 <div class="form-group">  
                     <input type="text" class="form-control" id="name" placeholder="姓名">  
                 </div>  
                 <div class="form-group">  
                     <input type="text" class="form-control" id="position" placeholder="位置">  
                 </div>  
                 <div class="form-group">  
                     <input type="text" class="form-control" id="salary" placeholder="薪资">  
                 </div>  
                 <div class="form-group">  
                     <input type="text" class="form-control" id="office" placeholder="工作地点">  
                 </div>  
                 <div class="form-group">  
                     <input type="text" class="form-control" id="extn" placeholder="编号">  
                 </div>  
             </div>  
             <div class="modal-footer">  
                 <button type="button" class="btn btn-info" id="initData">添加模拟数据</button>  
                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
                 <button type="button" class="btn btn-primary" id="save">保存</button>  
             </div>  
         </div>  
     </div>  
 </div>  
   
 </body>  
 </html>  
 <!--定义操作列按钮模板-->  
 <script id="tpl" type="text/x-handlebars-template">  
     {{#each func}}  
     <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>  
     {{/each}}  
 </script>  
   
 <script>  
 var data = [  
     {  
         "name":       "rfswitch1",  
         "position":         "192.168.1.1",  
         "salary":       "A"  
     },  
    {  
         "name":       "rfswitch2",  
         "position":         "192.168.1.1",  
         "salary":       "B"  
     },  
     {  
         "name":       "rfswitch3",  
         "position":         "192.168.1.2",  
         "salary":       "C"  
     },  
     {  
         "name":       "rfswitch4",  
         "position":         "192.168.1.3",  
         "salary":       "D"  
     },  
     {  
         "name":       "rfswitch5",  
         "position":         "192.168.1.4",  
         "salary":       "A"  
     },  
     {  
         "name":       "rfswitch6",  
         "position":         "192.168.1.5",  
         "salary":       "B"  
     },  
     {  
         "name":       "rfswitch7",  
         "position":         "192.168.1.6",  
         "salary":       "C"  
     },  
     {  
         "name":       "rfswitch8",  
         "position":         "192.168.1.7",  
         "salary":       "D"  
     },  
     {  
         "name":       "rfswitch9",  
         "position":         "192.168.1.8",  
         "salary":       "A"  
     },  
     {  
         "name":       "rfswitch10",  
         "position":         "192.168.1.9",  
         "salary":       "B"  
     },  
     {  
         "name":       "rfswitch11",  
         "position":         "192.168.1.10",  
         "salary":       "C"  
     },  
     {  
         "name":       "rfswitch12",  
         "position":         "192.168.1.11",  
         "salary":       "D"  
     }  
       
 ];  
     var table;  
     var editFlag = false;  
     $(function () {  
         var tpl = $("#tpl").html();  
         //预编译模板  
         var template = Handlebars.compile(tpl);  
   
         table = $('#example').DataTable({  
             data: data,  
             columns: [  
                 {"data": "name"},  
                 {"data": "position"},  
                 {"data": "salary"},   
                 {"data": null}  
   
             ],  
             columnDefs: [  
                 {  
                     targets: 3,  
                     render: function (a, b, c, d) {  
                         var context =  
                         {  
                             func: [  
                                 {"name": "修改", "fn": "edit(\'" + c.name + "\',\'" + c.position + "\',\'" + c.salary  + "\')", "type": "primary"},  
                                 {"name": "删除", "fn": "del(\'" + c.name + "\')", "type": "danger"}  
                             ]  
                         };  
                         var html = template(context);//匹配内容  
                         return html;  
                     }  
                 }  
   
             ],  
             "language": {  
                 "lengthMenu": "_MENU_ 条记录每页",  
                 "zeroRecords": "没有找到记录",  
                 "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",  
                 "infoEmpty": "无记录",  
                 "infoFiltered": "(从 _MAX_ 条记录过滤)",  
                 "paginate": {  
                     "previous": "上一页",  
                     "next": "下一页"  
                 }  
             },  
             "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('<button id="datainit" type="button" class="btn btn-primary btn-sm">增加基础数据</button> ');  
                 $("#mytool").append('<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">添加</button>');  
                 $("#datainit").on("click", initData);  
             }  
   
         });  
   
         $("#save").click(add);  
   
         $("#initData").click(initSingleData);  
   
     });  
   
     /**  
      * 初始化基础数据  
      */  
     function initData() {  
         var flag = confirm("本功能将添加数据到数据库，你确定要添加么？");  
         if (flag) {  
             $.get("/objects.txt", function (data) {  
                 var jsondata = JSON.parse(data);  
                 $(jsondata.data).each(function (index, obj) {  
                     ajax(obj);  
                 });  
             });  
         }  
     }  
   
     /**  
      * 初始化基础数据  
      */  
     function initSingleData() {  
         $("#name").val("http://dt.thxopen.com");  
         $("#position").val("ShiMen");  
         $("#salary").val("1");  
         $("#office").val("Home");  
         $("#extn").val("001");  
     }  
   
     /**  
      * 清除  
      */  
     function clear() {  
         $("#name").val("").attr("disabled",false);  
         $("#position").val("");  
         $("#salary").val("");  
         $("#office").val("");  
         $("#extn").val("");  
         editFlag = false;  
     }  
   
     /**  
      * 添加数据  
      **/  
     function add() {  
         var addJson = {  
             "name": $("#name").val(),  
             "position": $("#position").val(),  
             "salary": $("#salary").val(),  
             "office": $("#office").val(),  
             "extn": $("#extn").val()  
         };  
   
         ajax(addJson);  
     }  
   
     /**  
      *编辑方法  
      **/  
     function edit(name,position,salary,office,extn) {  
         console.log(name);  
         editFlag = true;  
         $("#myModalLabel").text("修改");  
         $("#name").val(name).attr("disabled",true);  
         $("#position").val(position);  
         $("#salary").val(salary);  
         $("#office").val(office);  
         $("#extn").val(extn);  
         $("#myModal").modal("show");  
     }  
   
     function ajax(obj) {  
         var url ="/add.jsp" ;  
         if(editFlag){  
             url = "/edit.jsp";  
         }  
         $.ajax({  
             url:url ,  
             data: {  
                 "name": obj.name,  
                 "position": obj.position,  
                 "salary": obj.salary,  
                 "office": obj.office,  
                 "extn": obj.extn  
             }, success: function (data) {  
                 table.ajax.reload();  
                 $("#myModal").modal("hide");  
                 $("#myModalLabel").text("新增");  
                 clear();  
                 console.log("结果" + data);  
             }  
         });  
     }  
   
   
     /**  
      * 删除数据  
      * @param name  
      */  
     function del(name) {  
         $.ajax({  
             url: "/del.jsp",  
             data: {  
                 "name": name  
             }, success: function (data) {  
                 table.ajax.reload();  
                 console.log("删除成功" + data);  
             }  
         });  
     }  
 </script>  

2 另外项目中的是实现了和服务器交互

.html文档：

[html]view plaincopy 
    
 <!DOCTYPE html>  
 <html>  
 <head>  
 <meta charset="UTF-8">  
 <meta http-equiv="X-UA-Compatible" content="IE=edge">  
 <meta name="viewport" content="width=device-width, initial-scale=1">  
 <meta name="description" content="">  
 <meta name="author" content="haofan">  
 <title>Device Mangement</title>  
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />  
 <link rel="stylesheet" type="text/css"  
     href="css/dataTables.bootstrap.css" />  
 <!-- <script src="js/jquery.js"></script> -->  
 <script src="../../libraries/jquery/jquery-1.11.1.min.js"></script>  
 <script src="js/jquery.dataTables.min.js"></script>  
 <script type="text/javascript" language="javascript" src="js/dataTables.bootstrap.js"></script>  
 <script src="js/bootstrap.min.js"></script>  
 <script src="js/handlebars-v3.0.1.js"></script>  
 <script src="../../libraries/jquery/jquery-ui.min.js"></script>  
 <script src="js/devicetable.js"></script>  
 </head>  
 <br>  
 <br>  
 <br>  
 <br>  
 <br>  
 <br>  
 <body>  
     <script type="text/javascript">  
      function loadNavBar(){  
         var req = new XMLHttpRequest();  
         req.open("GET", "../navbar.html", false);  
         req.send();  
         document.write(req.responseText);  
      }  
      loadNavBar();  
    </script>  
     <div class="container">  
         <table id="example" class="table table-striped table-bordered">  
             <thead>  
                 <tr>  
                     <th>Name</th>  
                     <th>IP</th>  
                     <th>Group</th>  
                     <th>Edit/Delete</th>  
                 </tr>  
             </thead>  
             <tbody></tbody>  
         </table>  
     </div>  
     <div id="errro-msg"></div>  
     <!-- Modal -->  
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog"  
         aria-labelledby="myModalLabel" aria-hidden="true">  
         <div class="modal-dialog">  
             <div class="modal-content">  
                 <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal"  
                         aria-label="Close">  
                         <span aria-hidden="true">×</span>  
                     </button>  
                     <h4 class="modal-title" id="myModalLabel">ADD</h4>  
                 </div>  
                 <div class="modal-body">  
                     <div class="form-group">  
                         <input type="text" class="form-control" id="name"  
                             placeholder="please input rfswitch name">  
                     </div>  
                     <div class="form-group">  
                         <input type="text" class="form-control" id="ip"  
                             placeholder="please input rfswitch ip">  
                     </div>  
                     <div class="form-group">  
                         <input type="text" class="form-control" id="group"  
                             placeholder="please input rfswitch group">  
                     </div>  
   
                 </div>  
                 <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">close</button>  
                     <button type="button" class="btn btn-primary" id="save">save</button>  
                 </div>  
             </div>  
         </div>  
     </div>  
     <!--\u5b9a\u4e49\u64cd\u4f5c\u5217\u6309\u94ae\u6a21\u677f-->  
     <script id="tpl" type="text/x-handlebars-template">  
     {{#each func}}  
     <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>  
     {{/each}}  
 </script>  
 </body>  
 </html>  

其中devicetable.js:

[javascript]view plaincopy 
    
 //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('<button type="button" class="btn btn-default btn-sm" οnclick="add()" >ADD</button>');  
             }  
         });  
         $("#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('<div class="alert alert-danger alert-dismissible" role="alert">'+  
                 '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+  
                 '<span aria-hidden="true">×</span></button><strong>insert database!</strong></div>');  
         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('<div class="alert alert-danger alert-dismissible" role="alert">'+  
                             '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+  
                             '<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');  
                 $('#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('<div class="alert alert-danger alert-dismissible" role="alert">'+  
                             '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+  
                             '<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');  
             $('#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('<div class="alert alert-danger alert-dismissible" role="alert">'+  
                     '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+  
                     '<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');  
               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;  
     }  