首页 > 代码库 > JQuery Datatables
JQuery Datatables
最近项目中用了Bootstrap的样式风格，控件用了JQuery Datatables，主要有几下几点目标：
- 实现BootStrap风格的table，使用Ajax获取数据，并有勾选项
- 可以实现全选，单击勾选
- 双击行弹出编辑对话框，点击保存使用Ajax传送到服务端保存
- 实现批量删除
- 分页操作（下次再记录）
- 查询操作（下次再记录）
- 排序操作（下次再记录）
第一部分：
编写一个只有thead的table，tbody会在JS函数中自动生成。
HMTL代码如下：
1 <table id="example" class="table table-striped table-bordered table-hover"> 2 <thead> 3 <tr> 4 <th class="center"> 5 <label class="position-relative"> 6 <input type="checkbox" class="ace"/> 7 <span class="lbl"></span> 8 </label> 9 </th>10 <th>公司名称</th>11 <th>简称</th>12 <th>所在城市</th>13 <th>地址</th>14 <th>联系人</th>15 <th>联系电话</th>16 </tr>17 </thead>18 19 </table>
直接在该Table上加入JS代码
1 $(‘#example‘).dataTable({ 2 "oLanguage": { //语言设置 3 "sProcessing": "正在加载中......", 4 "sLengthMenu": "每页显示 _MENU_ 条记录", 5 "sZeroRecords": "对不起，查询不到相关数据！", 6 "sEmptyTable": "表中无数据存在！", 7 "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录", 8 "sInfoFiltered": "数据表中共为 _MAX_ 条记录", 9 "sSearch": "搜索",10 "oPaginate": {11 "sFirst": "首页",12 "sPrevious": "上一页",13 "sNext": "下一页",14 "sLast": "末页"15 }16 },17 bAutoWidth: false, //自动适应宽度18 "bFilter": false, //查询19 "bSort": true, //排序20 "bInfo": false, //页脚信息21 "bLengthChange": false, //改变每页显示数据数量22 "bServerSide": true, //服务器数据23 "sAjaxSource": ‘/XXX/XXX/GetList‘,24 "bProcessing": true, //当datatable获取数据时候是否显示正在处理提示信息。 25 "bPaginate": true, //显示分页器26 "iDisplayLength ": 10, //一页显示条数27 "aoColumns": [28 {29 //自定义列30 "sName":"Id", //Ajax提交时的列明（此处不太明白，为什么用两个属性--sName，mDataProp）31 "mDataProp": "Id", //获取数据列名32 "sClass": "center", //样式33 "bStorable": false, //该列不排序34 "render": function(data, type, row) { //列渲染35 return ‘<label class="position-relative">‘ +36 ‘<input type="checkbox" class="ace" value="http://www.mamicode.com/‘+data+‘"/>‘ +37 ‘<span class="lbl"></span>‘ +38 ‘</label>‘;39 }40 },41 {42 "sName": "Name",43 "mDataProp": "Name",44 "bSearchable": true, //检索可用45 "bStorable": true46 },47 {48 "sName": "CustomerSN",49 "mDataProp": "CustomerSN",50 "bSearchable": false,51 "bStorable": false52 },53 {54 "mDataProp": "City",55 "sName": "City"56 },57 {58 "sName": "Address",59 "mDataProp": "Address"60 },61 {62 "sName": "Contact",63 "mDataProp": "Contact"64 },65 {66 "sName": "ContactPhone",67 "mDataProp": "ContactPhone"68 }69 ]70 });
第二部分：
加入全选，点击一行将Checkbox勾选功能，使用纯JS实现
1 $(document).on(‘click‘, ‘th input:checkbox‘, function() { 2 var that = this; 3 $(this).closest(‘table‘).find(‘tr > td:first-child input:checkbox‘) 4 .each(function() { 5 this.checked = that.checked; 6 $(this).closest(‘tr‘).toggleClass(‘selected‘); 7 }); 8 }); 9 10 //对行单击添加监听事件11 $(‘#example tbody‘).on(‘click‘, ‘tr‘, function () {12 var tr = $(this).closest(‘tr‘);13 var checkbox = tr.find(‘td:first-child input:checkbox‘)[0];14 checkbox.checked = !checkbox.checked;15 16 });
第三部分：
首先建立一个模态框（用BootStrap实现），然后双击在JS中控制来显示该模态框。最后用Ajax保存
1 <div class="modal fade" id="newPopUp"> 2 <div class="modal-dialog"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" class="close" data-dismiss="modal" aria-hidden="True">×</button> 6 <h4 class="modal-title" id="newCustomerLabel">新增客户</h4> 7 </div> 8 <div class="modal-body"> 9 <form class="form-horizontal" role="form" id="customerForm">10 <div class="form-group">11 <label for="inputName" class="col-sm-2 control-label">客户名称</label>12 <div class="col-sm-10">13 <input type="text" class="form-control" id="inputName" placeholder="客户名称"/>14 </div>15 </div>16 ...17 </form>18 </div>19 <div class="modal-footer">20 <button type="button" class="btn btn-success" onclick=" saveItem() ">保存</button>21 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>22 </div>23 </div>24 </div>25 </div>
//对行双击添加监听事件 $(‘#example tbody‘).on(‘dblclick‘, ‘tr‘, function () { var tr = $(this).closest(‘tr‘); var id = tr.find(‘td:first-child input:checkbox‘).val();//获取Checkbox的值 editItem(id); }); //编辑 function editItem(id) { //更改模态窗口名称 var modal = $(‘#newPopUp‘); modal.find(‘#newCustomerLabel‘).text("编辑"); $.ajax({ url: "/XXX/XXX/GetItem", type: "GET", data: { "Id": id }, success: function (result) { //赋值 $(‘#inputName‘).val(result.Name); .... } }); }
1 //保存 2 function saveItem() { 3 var name = $(‘#inputName‘).val(); 4 ... 5 6 $.ajax({ 7 url: "/XXX/XXX/Post", 8 type: "POST", 9 data: { "Name": name....},10 success: function() {11 $(‘#newPopUp‘).modal(‘hide‘);12 reloadList();13 }14 });15 }
第四部分：
将勾选的项删除，如果没有勾选项目，弹出提示对话框，实现也很简单。
1 //删除操作 2 function deleteItem() { 3 //在此用了BootStrap的一个插件，BootStrap.Message,并中文化 4 $.messager.model = { 5 ok: { text: "确认", classed: ‘btn-info‘ }, 6 cancel: { text: "取消", classed: ‘btn-danger‘ } 7 }; 8 //获取所有勾选ID 9 var ids="";10 $(‘#example‘).find(‘tr > td:first-child input:checkbox‘)11 .each(function () {12 if (this.checked) {13 ids+=$(this).val()+","; 14 }15 });16 //如果没有勾选，提示17 if (ids === "") {18 $.messager.alert("请选择一行数据！");19 return;20 } else {21 ids = ids.substr(0, ids.length - 1);22 }23 24 $.messager.confirm("删除", "确认要删除吗？", function () {25 $.ajax({26 url: "/XXX/XXX/Delete",27 type: "Delete",28 data: { "ids": ids },29 success: function () {30 reloadList();//重新加载31 }32 });33 });34 }
//刷新 function reloadList() { var tables = $(‘#example‘).dataTable().api();//获取DataTables的Api，详见 http://www.datatables.net/reference/api/ tables.ajax.reload(); }
JQuery Datatables
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。