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>";       }     }   }  ]}  //searchfunction search() {   ip = $("#IP").val();   dateMin = $("#datemin").val();   dateMax = $("#datemax").val();   var table = $('#table').DataTable();   table.ajax.reload();}$(document).ready(function () {   $("#table").dataTable(table);});</span>