聊聊前段插件之Datatables

在web开发过程中表格数据展示是一个很常见的功能，而且用户对其要求也比较高，性能、易用性等。今天我推荐一款利器给大家——Datatables；Datatables中文网。

　　一、介绍

---

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。(摘抄自Datatables中文网)

　　二、优势

---

• 分页，即时搜索和排序
• 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
• 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
• 各式各样的扩展: Editor, TableTools, FixedColumns ……
• 丰富多样的option和强大的API
• 支持国际化
• 超过2900+个单元测试
• 免费开源 （ MIT license ）！ 商业支持
• 摘抄自Datatables中文网

　　三、Demo(ajax数据源)

---

1. 先上效果图

1. 上代码

首先需要在html页面定义带有表头的table

 <table class="table table-bordered table-hover" id="example">
             <thead>
                 <tr>
                     <th style="width: 85px">任务编号</th>
                     <th style="width: 20px">PRI</th>
                     <th style="width: 45px">状态</th>
                     <th >任务标题</th>
                     <th style="width: 60px">客户</th>
                     <th style="width: 40px">PM</th>
                     <th style="width: 60px">开发</th>
                     <th style="width: 60px">测试</th>
                     <th style="width: 60px">完成时间</th>
                     <th style="width: 300px">备注</th>
                 </tr>
             </thead>
         </table>

我这里采用ajax数据源

 var tt = $('#example').DataTable({
         ajax:'/task/get_todoList',
         columns:[
             {'data':"task_no"},
             {'data':"PRI"},
             {'data':"status"},
             {'data':"task_title"},
             {'data':"customer_name"},
             {'data':"abu_pm"},
             {'data':"dev_name"},
             {'data':"tester_name"},
             {'data':"ekp_expect"},
             {'data':"comment"},
         ],
         "columnDefs": [
             {
 //                "visible": false,
 //                "targets": [10]
             },
             {
                 "render": function(data, type, row, meta) {
                     return '<a name="view_on_erp" rel="' + row.ekp_oid + '" target="_blank">' + data + '</a>';
                 },
                 "targets": 0
             },
             {
                 "render": function(data, type, row, meta) {
                     return task_status[data];
                 },
                 "targets": 2
             },
             {
                 "render": function(data, type, row, meta) {
                     switch (row.ekp_task_type){
                         case "需求":
                         case "升级-零星需求-一般":
                         case "开发类-零星需求-一般":
                             return '<span class="label label-success">需</span>' + data + '</a>';
                             break;
                         case "BUG":
                         case "产品BUG":
                         case "升级-BUG修改-一般":
                         case "升级-BUG修改-紧急":
                             return '<span class="label label-danger">B</span>' + data + '</a>';
                         case "升级-咨询评估":
                             return '<span class="label label-info">咨</span>' + data + '</a>';
                         default:
                             return '<span class="label label-primary">'+row.ekp_task_type.substring(0,1)+'</span>' + data + '</a>';
                     }

                 },
                 "targets": 3
             },
             {
                 "render": function(data, type, row, meta) {
                     return  (data)? data+'('+row.developer_workload+")":"";
                 },
                 "targets":6
             },
             {
                 "render": function(data, type, row, meta) {
                     return  (data)? data+'('+row.tester_workload+")":"";
                 },
                 "targets":7
             },
             {
                 "render": function(data, type, row, meta) {
                     return  data.substring(0,10);
                 },
                 "targets":8
             },
         ],
         "createdRow": function ( row, data, index ) {
             $(row).attr("rel",data.id);
             switch (data.status)
             {
                 case 1:
                     $(row).find("td:eq(6)").addClass("or_doing");
                     break;
                 case 2:
                     $(row).find("td:eq(7)").addClass("or_doing");
                     break;

             }
         },
         lengthMenu: [15,30,45,60,75,90,"ALL"],//这里也可以设置分页，但是不能设置具体内容，只能是一维或二维数组的方式，所以推荐下面language里面的写法。
         paging: false,//分页
         ordering: true,//是否启用排序
 //        order: [ [ 0, 'asc' ]],
 //                searching: true,//搜索
         dom: "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>",
         language: {
             lengthMenu: '每页<select class="form-control input-xsmall">' + '<option value="15">15</option>' + '<option value="30">30</option>' + '<option value="50">50</option>' + '<option value="100">100</option>' + '</select>条记录',//左上角的分页大小显示。
             search: '搜索：',//右上角的搜索文本，可以写html标签
             paginate: {//分页的样式内容。
                 previous: "上一页",
                 next: "下一页",
                 first: "第一页",
                 last: "最后"
             },
             zeroRecords: "没有找到相关内容",//table tbody内容为空时，tbody的内容。
             //下面三者构成了总体的左下角的内容。
             info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。
             infoEmpty: "0条记录",//筛选为空时左下角的显示。
             infoFiltered: ""//筛选之后的左下角筛选提示，
         },
         showRowNumber:true,
         bAutoWidth:false,
     });

---

四、说说过程中遇到的问题：

---

Q1:如何自定义查询？

A:datatables支持自定义表格布局，你可以根据自己的情况绘制不一样的布局；我这里是在表格的顶部加入了一个查询和一个自定义按钮。

 $(document).on("click", ".btn-search", function (e) {
             var keyword = $('.search-form[type="search"]').val();
             if(keyword === '') {
                 $.toast("请输入查找内容","info");
                 return false;
             }
             tt.search(keyword).draw();
         });

给查询按钮绑定事件，调用datatables的search()方法，然后再重绘datatable（draw（））即可。

Q2:表格报错，为什么不能正常展示数据？

A:这个问题可能由两种情况导致（我遇到的情况），一种表格头部定义的列数和数据行定义的列不一样会提示以上错误；第二种情况就是服务端返回的数据格式不正确，第一次使用插件的时候，没有认证看api导致在这个地方排查了很久才找到原因。

标准数据源格式：

 {
     "data": [
         {
             "id": 1,
             "url": "http://www.gbtags.com/gb/index.htm",
             "title": "Online Program knowledge share and study platform"
         },
         {
             "id": 2,
             "url": "http://www.gbtags.com/gb/listcodereplay.htm",
             "title": "Share Code Gbtags"
         },
         {
             "id": 3,
             "url": "http://www.gbtags.com/gb/gbliveclass.htm",
             "title": "Online live Gbtags"
         },
         {
             "id": 4,
             "url": "http://www.gbtags.com/gb/explore.htm",
             "title": "Explorer Gbtags"
         }
     ]
 }

Q3:如何给行、列绑定属性？

A:datatables提供了createdRow这个回掉函数（function ( row, data, index )），当创建当前行时执行，入参分别是当前行js对象、当前行数据、行号。对于单元格的属性以及数据翻译都可以使用render函数（function(data, type, row, meta)），入参分别是指当前单元格数据、row是单元格所在行的数据。

Q4:使用模态窗口编辑行数据后，如何只刷新当前行？

A：这里可以调用datatables的ajax.reload();第二个参数来控制是否刷新页面。

tt.ajax.reload(null,false);

Q5:待续....