dataTable

项目中使用的一款表格框架，整合了大量的有的没有的功能

需要导包：jquery.dataTables.js

官网：https://www.datatables.net/

中文官网：http://datatables.club/

翻页操作什么的都是交给dataTable。

---

使用操作步骤

dataTable的参数配置：一般而言根据自己的需求配置(并不需要改变什么)，最多修改一下每页显示的数据量和排序功能。

<span style="font-size:18px;">"bStateSave": true,//状态保存
"bPaginate": true, //翻页功能
"bLengthChange": false, //改变每页显示数据数量
"bFilter": false, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息，显示于左下角，显示有几条记录，
"bAutoWidth": false,//自动宽度，当需要自定义table的显示宽度时设置为false
"iDisplayLength": 20, //每页显示20条记录，默认条件为20

//显示样式需要修改时，如第一列需要左对齐，第二列需要右对齐，dataTable是不能在columnDefs的render来给td复制属性的，改样式表是无法做到每个都是特定的，

//好在dataTable提供了createdRow属性

"createdRow": function (row, data, dataIndex) {
   $(row).children('td').eq(4).attr('style', 'text-align: right;');
   $(row).children('td').eq(5).attr('style', 'text-align: right;');
   $(row).children('td').eq(6).attr('style', 'text-align: left;')
},</span>

一次性请求所有数据：（后端不分页，前段分页）

<span style="font-size:18px;">$.ajax({
   url: "userMappermissionList.aspx",
   data: {
      "method": "canclePermission", "UserId": UserIdVar, "MapId": id
   },
});

//根据后台封装好的json取数据，具体可以查看相应报文（dataTable的th个数要和你要显示的属性个数匹配，不然会报错）

"columns":[

   {"data":"id" },

   {"data":"name"}

.....

]
</span>

多次查询：每次翻页操作都是重新向数据库请求新的数据，而且每次都自请求一页的数据

fnServerData属性为请求操作。

sSource：对应sAjaxSource请求数据源操作

aoData：dataTable封装的数据，包括echo，起始id，每页长度，后台获取方式是使用request[*][value]获取

<span style="font-size:18px;">"bProcessing": false, // 是否显示取数据时的那个等待提示
"bServerSide": true,//这个用来指明是通过服务端来取数据
"sAjaxSource": "userMappermissionList.aspx",//这个是请求的地址
"fnServerData": function (sSource, aoData, fnCallback) {// 获取数据的处理函数
$.ajax({
   "dataType": 'json',
   "type": "POST",
   "url": sSource,//这个就是请求地址对应sAjaxSource

   //aoData是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
   "data": { "aoData": aoData, "method": "GetMapInfoByUserId", "UserId": UserIdVar, "DataStatus": DataStatus, "dateMin": dateMin, "dateMax": dateMax },

//回调函数，显示
"success": function (msg) {
     fnCallback(msg);
},
error: function (xhr, textStatus, error) {
    if (typeof console == "object") {
       console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
    }
  }
});
</span>

(分页查询的响应正文是在后台自己封装的)

columnDefs属性设置每个列的属性要怎么显示，targets对应的列数，data对应传入的参数，render返回显示结果，bvisible是否显示。

外部设置查询条件：

外部根据对象的属性来查询响应的数据

<span style="font-size:18px;">var table = $('#table').DataTable();

	table.ajax.reload();</span>

重新载入dataTable。

补充：

在dataTable使用时遇到的问题：

1、一个单元格需要同一行的多个数据来决定时(需要传入id、再根据此时的状态status来决定显示样式)。

columnDefs 中有时为了根据多个对象决定一些显示时，可以使用columnDefs 的render中的full，full包含一行的所有数据，full是一个数组格式

完整实例：

<span style="font-size:18px;">var ip = "";
var dateMin = "";
var dateMax = "";
var table = {
   "bStateSave": true,//状态保存
   "bPaginate": true, //翻页功能
   "bLengthChange": false, //改变每页显示数据数量
   "bFilter": false, //过滤功能
   "bSort": false, //排序功能
   "bInfo": true,//页脚信息
   "bAutoWidth": false,//自动宽度
   "iDisplayLength": 20, //每页显示20条记录</div>

    "createdRow": function (row, data, dataIndex) {
         $(row).children('td').eq(4).attr('style', 'text-align: right;');
         $(row).children('td').eq(5).attr('style', 'text-align: right;');
        $(row).children('td').eq(6).attr('style', 'text-align: left;')
    },
    "bProcessing": false, // 是否显示取数据时的那个等待提示
    "bServerSide": true,//这个用来指明是通过服务端来取数据
    "sAjaxSource": "userLog.aspx",//这个是请求的地址
    "fnServerData": function (sSource, aoData, fnCallback) {// 获取数据的处理函数
    $.ajax({
       "dataType": 'json',
       "type": "POST",
       "url": sSource,//这个就是请求地址对应sAjaxSource
       "data": { "aoData": aoData, "method": "loadUserLog", "IP": ip, "dateMin": dateMin, "dateMax": dateMax },//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
       "success": function (msg) {
           fnCallback(msg);
       },
       error: function (xhr, textStatus, error) {
          if (typeof console == "object") {
             console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
          }
       }
    });
  },
   //时间输出格式的修改
   "columnDefs": [{
   "targets": [3],
   "data": [3],
   "render": function (data, type, full) {
       if (data == "0001/1/1 0:00:00") {
          return "<td class='td-manage'></td>";
       } else {
          return "<td class='td-manage'>" + data + "</td>";
       }
     }
   }
  ]
}
  //search
function search() {
   ip = $("#IP").val();
   dateMin = $("#datemin").val();
   dateMax = $("#datemax").val();
   var table = $('#table').DataTable();
   table.ajax.reload();
}
$(document).ready(function () {
   $("#table").dataTable(table);
});
</span>