jquery.dataTables學習
阿新 • • 發佈:2018-11-05
版本:DataTables-1.10.7
程式碼如下:
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>jquery.dataTables學習</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./resources/css/bootstrap.min.css"> <link rel="stylesheet" href="./resources/css/dataTables.bootstrap.css"> <script src="./resources/js/vendor/jquery-1.11.3.min.js"></script> <script src="./resources/js/vendor/jquery.dataTables.js"></script> <script src="./resources/js/vendor/dataTables.bootstrap.js"></script> <script src="./resources/js/vendor/json2.js"></script> <!-- bootstrap --> <script src="./resources/js/bootstrap.min.js"></script> <style type="text/css"> </style> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $.extend($.fn.dataTable.defaults, { searching : false, ordering : false, pagingType: "simple_numbers" }); var oTable = $('#table_id').DataTable({ //"dom": 'til<p>', "paging" : true, "searchable":false, processing : true, serverSide : true, language : { "search":"檢索", emptyTable : "沒有資料", "scrollX":"100%", loadingRecords : "載入中...", processing : "查詢中...", lengthMenu : "每頁 _MENU_ 條", zeroRecords : "沒有資料", info : "第 _PAGE_ 頁 / 共 _PAGES_ 頁", infoEmpty : "沒有資料", infoFiltered : "(過濾總件數 _MAX_ 條)" }, columns : [ { "data" : "checkbox","class": "center","defaultContent":" " },{ "data" : "id","class": "center" }, { "data" : "name","class": "center" }, { "data" : "price","class": "center" }, { "data" : "quantity","class": "center" }, { "data" : "status","class": "center" } ], columnDefs : [{ targets: [6], render:function(data,type,full){ var s = ""; s += '<td class="center"><a class="btn btn-success" href="#">'; s += '<i class="glyphicon glyphicon-zoom-in icon-white"></i>'; s += ' View</a>'; s += ' </td>'; return s; } }], ajax : { url : "/get_goods_list_page", type : "POST", contentType : "application/json", dataType : "json", data : function(d) { //console.log(JSON.stringify(d)); var p = {}; p.pageSize = d.length; p.pageNo = d.start/d.length + 1; p.draw = d.draw; p.name = $("#goodsName").val(); var jsonParam = JSON.stringify(p); console.log(jsonParam); return jsonParam; }, "error":function(data){ alert(data); } }, rowCallback:function(row, data, displayIndex, displayIndexFull ){ if(data.status ==1){ $('td:eq(5)', row).html("未稽核"); }else if(data.status ==2){ $('td:eq(5)', row).html("已稽核"); } $('td:eq(0)',row).html('<input type="checkbox" name="checkbox" value="' + data.id + '">'); return row; } }); $("#btn_query").click(function(){ oTable.draw(); }); }); </script> </head> <body> <div class="container"> <br> <div class="row"> <div class="col-md-12"> <form class="form-inline"> <div class="form-group"> <label for="">商品名稱:</label> <input type="text" class="form-control" id="goodsName" name="goodsName"> </div> <div class="form-group"> <button type="button" id="btn_query" class="btn btn-default">查詢</button> </div> </form> </div> </div> <br> <div class="row"> <div class="col-md-12"> <table id="table_id" class="table table-striped table-bordered bootstrap-datatable datatable responsive"> <thead> <tr> <th></th> <th>ID</th> <th>商品名稱</th> <th>單價</th> <th>數量</th> <th>狀態</th> <th>操作</th> </tr> </thead> </table> </div> </div> </div> </body> </html>
效果圖:
請求引數格式:
{"pageSize":2,"pageNo":1,"draw":1}
響應引數格式:
{ "status": "0", "draw": 1, "recordsTotal": 14, "recordsFiltered": 14, "data": [{ "id": 35, "name": "44", "description": "44", "price": 44.000, "quantity": 44, "status": 1 }, { "id": 34, "name": "234", "description": "345435", "price": 35345.000, "quantity": 34535, "status": 1 }] }