1,首先需要引用下面两个文件
还有jquery的库
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
第一个例子:
https://datatables.net/examples/basic_init/zero_configuration.html
html和js都有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="datatables.css">
<script src="../jquery-2.1.1/jquery.js"></script>
<script src="datatables.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
<script>
$(document).ready(function(){
$("#example").DataTable({
"columnDefs": [
{
"targets": [2],
"visible": false,
"searchable": false
},
]
});
})
</script>
</html>
2,DataTable支持的数据类型
https://www.datatables.net/manual/data/
2.1 数组
vardata = [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120" ], [ "Garrett Winters", "Director", "Edinburgh", "8422", "2011/07/25", "$5,300" ] ]
2.2 对象
[ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }, { "name": "Garrett Winters", "position": "Director", "salary": "$5,300", "start_date": "2011/07/25", "office": "Edinburgh", "extn": "8422" } ]
2.3 自定义实例(本质和2.2一样)
function Employee ( name, position, salary, office ) { this.name = name; this.position = position; this.salary = salary; this._office = office; this.office = function() { return this._office; } }; $('#example').DataTable( { data: [ new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh"), new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh") ], columns: [ { data: 'name'}, { data: 'salary'}, { data: 'office'}, { data: 'position'} ] } );
2.4 datatable的数据来源
1)DOM
如果没有指定data,ajax选项,则DataTable会将当前table的html标签上内容转换成对应的数据(Array数据形式)。
2)Html5
Data-* 标签上可以指定不同的值,用于排序和查找,td内部标签的值对应当前单元格的数据。
<td data-search="21st November 2016 21/11/2016" data-order="1479686400"> 21st November 2016 </td>
3)javascript
通过data配置,指定数据源。可以通过DataTables API row.add() row().remove()操作行数据。
4)Ajax
通过服务器端分页的方式,取得数据。返回的数据只能是json数组或对象(上面的2.1和2.2).
3,有两种分页方式
3.1 客户端分页
这种方式,代码最简单,整个数据量在10000条以内可以考虑。假设已经有了下面的table:
<table id="table1" class="table table-condensed"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Score</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>zhang</td> <td>98</td> </tr> <tr> <td>002</td> <td>wang</td> <td>99</td> </tr> </tbody> </table>
简单调用一句话(使用默认设置),就可以使table具有排序,查找,分页的基本功能。
$(function () { $("#table1").DataTable({ }); });
3.2 服务器端分页
这种方式针对大数据量的table(10万条以上),每次只读取当前的一页数据,分页在后台做。代码相对复杂,不过页面响应更快,
服务器端的分页一般要求我们先定义thead表头,tbody可以不写。
4,配置参数
这些配置参数可以通过javascript进行设置,也可以直接用HTML5标签data-* 的方式写在table的标签中。
所有的配置选项:https://www.datatables.net/reference/option/
$(function () { $("#table1").DataTable({ // 是否允许检索 "searching": false, // 是否允许排序 "ordering": true, // 初期排序列 //"order": [[0,'asc'],[1,'desc']], // 是否显示情报 就是"当前显示1/100记录"这个信息 "info": false, // 是否允许翻页,设成false,翻页按钮不显示 "paging": false, // 水平滚动条 "scrollX": false, // 垂直滚动条 "scrollY": false, // 件数选择功能 默认true "lengthChange": false, // 件数选择下拉框内容 "lengthMenu": [10, 25, 50, 75, 100], // 每页的初期件数 用户可以操作lengthMenu上的值覆盖 "pageLength": 50, //翻页按钮样式 // numbers:数字 // simple:前一页,后一页 // simple_numbers:前一页,后一页,数字 // full:第一页,前一页,后一页,最后页 //full_numbers:第一页,前一页,后一页,最后页,数字 //first_last_numbers:第一页,最后页,数字 "pagingType": "full_numbers", // 行样式应用 指定多个的话,第一行tr的class为strip1,第二行为strip2,第三行为strip3. // 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状,这里的class必须指定为2个。 "stripeClasses": ['strip1', 'strip2', 'strip3'], // 自动列宽 "autoWidth": true, // 是否表示 "processing" 加载中的信息,这个信息可以修改 "processing": true, // 每次创建是否销毁以前的DataTable,默认false "destroy": false, // 控制表格各种信息的表示位置(比较复杂) 默认:lfrtip // 具体参考:https://datatables.net/reference/option/dom "dom": 'lrtip', "language": { "processing": "DataTables is currently busy", // 当前页显示多少条 "lengthMenu": "Display _MENU_ records", // _START_(当前页的第一条的序号) ,_END_(当前页的最后一条的序号),_TOTAL_(筛选后的总件数), // _MAX_(总件数),_PAGE_(当前页号),_PAGES_(总页数) "info": "Showing page _PAGE_ of _PAGES_", // 没有数据的显示(可选),如果没指定,会用zeroRecords的内容 "emptyTable": "No data available in table", // 筛选后,没有数据的表示信息,注意emptyTable优先级更高 "zeroRecords": "No records to display", // 千分位的符号,只对显示有效,默认就是"," 一般不要改写 //"thousands": "'", // 小数点位的符号,对输入解析有影响,默认就是"." 一般不要改写 //"decimal": "-", // 翻页按钮文字控制 "paginate": { "first": "First page", "last": "Last page", "next": "Next page", "previous": "Previous page" }, // Client-Side用,Server-Side不用这个属性 "loadingRecords": "Please wait - loading..." }, // 默认是false // 如果设为true,将只渲染当前也的html,速度会很快,但是通过API就访问不到所有页的数据,有利有弊 //"deferRender": false, // 服务器端处理方式 "serverSide": true, // ajax选项 可以直接简单指定成请求的文件 //"ajax": "data.json", // 也可以用对象来配置,更加灵活 "ajax": { // url可以直接指定远程的json文件,或是MVC的请求地址 /Controller/Action url: "data.json", type: 'POST', // 传给服务器的数据,可以添加我们自己的查询参数 data: function (param) { param.opportunityNO = $('#txtSearch').val(); return param; }, //用于处理服务器端返回的数据。 dataSrc是DataTable特有的 dataSrc: function (myJson) { if (myJson.timeout) { return ""; } return myJson; } }, //指定用于行ID的属性名 默认是:DT_RowId "rowId": 'staffId', // 列定义 "columns": [ { // data 可以是属性名,或嵌套属性(WORKTM1.ID),数组ArrOne[,] 用中括号中的字符连接数组后返回。 "data": "WORKTM1", // 这里的class会应用到td上面 "className": "dt-body-right", // 列宽 "width": 40, // 很灵活,描绘每个单元格 // data:当前cell的data,这个data和type有关 // type:filter,display,type,sort // row:当前行数据 // https://datatables.net/reference/option/columns.render "render": function (data, type, row, meta) { return type === 'display' && data.length > 40 ? '<span title="' + data + '">' + data.substr(0, 38) + '...</span>' : data; }, // 是否可排序 默认值:true "orderable": true, // 指定当前列排序操作的时候,用哪一列(几列)的数据进行真正的排序(通常是隐藏的) "orderData": [0, 1], // 这个属性 和type属性相似,指定排序时候这一列该怎么转换数据, //需要用到其他的插件 详细: https://datatables.net/plug-ins/sorting/ "orderDataType": "dom-text", // 是否显示当前列 默认值:true "visible": false, // 是否允许搜索此列 默认值:true "searchable": false, //这个属性仅Client-Side有效, Server-Side在服务器端排序 //主要用于排序和筛选,指定当前列作为什么类型进行解析 //内置值:date,num,num-fmt,html-num,html-num-fmt,html,string // 还可以用其他插件提供的类型 :详细: https://datatables.net/plug-ins/sorting/ // 有html开头的,都会讲html标签先移除后进行数据处理 "type": "html", // 列头文字,如果没有指定thead,则会生成。如何指定了thead,则会覆盖当前列头文字 "title": "My column title", // defaultContent:默认值,属性值为null或undefined就会用这个值 "defaultContent": "<i>Not set</i>", // 单元格类型:"th","td" "cellType" : "td", // 单元格创建完后的回调,可以作为render的补充 // cell:TD的dom // cellData:原始的单元格数据,如何render中进行了格式化,用$(cell).html()来取格式化后的数据 // rowData:行数据 // row:行号 // col:列号 "createdCell": function (cell, cellData, rowData, row, col) { if ( cellData < 1 ) { $(td).css('color', 'red') } } }, { "data": "WORKTM2", "className": "dt-body-right", "width": 40 }, { "data": "WORKTM3", "className": "dt-body-right", "width": 40 }, { "data": "WORKTM4", "className": "dt-body-right", "width": 40 }, { "data": "RESTDAY1", "className": "dt-body-right", "width": 40 }, { "data": "RESTDAY2", "className": "dt-body-right", "width": 40 }, { "data": "RESTDAY3", "className": "dt-body-right", "width": 40 }, { "data": "RESTDAY4", "className": "dt-body-right", "width": 40 }, { "data": "RESTDAY5", "className": "dt-body-right", "width": 40 } ], // 和上面的columns类似,columns可以定义的属性,都可以在这里定义, // 另外增加targets属性用于指定列范围(可以多列) // 优先级:上面的columns高于columnDefs columnDefs: [ { targets: [0, 2], render: function (data, type, row, meta) { if (type === 'display') { var ctemp = $(".dayinfo").children().eq(meta.col).attr("class"); var cname = ctemp ? ctemp : ""; var readonly = $(".dayinfo").children().eq(meta.col).attr("data-fixed") == "fixed" ? "readonly" : ""; return '<input type="input" class="form-control dt-body-center ' + cname + '" ' + readonly + ' value="' + data + '">'; } return data; }, }], // 每一行创建完调用的函数 "createdRow": function (row, data, dataIndex) { // row : tr dom // data: row data // dataIndex:row data's index if (data[4] == "A") { $(row).addClass('important'); } }, // 每一行被创建,但还没有被加载到document中,这个函数优先于createdRow // 个人觉得用createdRow更好 "rowCallback": function (row, data, index) { // row : tr dom // data: row data // index:row data's index if ( data[4] == "A" ) { $('td:eq(4)', row).html( '<b>A</b>' ); } }, //thead被描画后调用 "headerCallback": function (thead, data, start, end, display) { //thead:dom, data:原始的datatable数据,display:当前显示排序好的datatable数据(有可能经过排序) // start end :当前dispaly数据的开始结束序号 $(thead).find('th').eq(0).html( 'Displaying '+(end-start)+' records' ); }, // tfoot被描画后调用,通常可用于计算合计值 "footerCallback": function (tfoot, data, start, end, display) { //tfoot:dom, data:原始的datatable数据,display:当前显示排序好的datatable数据(有可能经过排序) // start end :当前dispaly数据的开始结束序号 var api = this.api(); $( api.column( 5 ).footer() ).html( api.column( 5 ).data().reduce( function ( a, b ) { return a + b; }, 0 ) ); }, // 初始化,描画都已经完成,常用于ajax "initComplete": function( settings, json ) { $('div.loading').remove(); }, // 每次DataTable描画后都要调用,调用这个函数时,table可能没有描画完成, // 所以不要在里面操作table的dom,要操作dom应放在initComplete "drawCallback": function( settings ) { var api = this.api(); // Output the data for the visible rows to the browser's console console.log( api.rows( {page:'current'} ).data() ); }, // 这个函数可以改写数字的格式化方式 // 默认DataTable用 language.thousands来解析数字,“,” "formatNumber": function ( toFormat ) { return toFormat.toString().replace( /\B(?=(\d{3})+(?!\d))/g, "'" ); } }); });
5,服务器端的参数
// 发送到服务器端的数据 // draw:计数器,返回数据的时候用这个值设定 // start:开始记录(0 based index) // length:每页条数 // search[value]:检索文字 // order[i][column]:int 排序列的序号 例如:2,代表第3列排序 i代表有几个排序,一个的话服务器端这样写“order[0][column]” // order[i][dir]:排序的方式"desc","asc" // 下面comuns中的i取值从0~columns.length,所有的columns信息都发送到了服务器 // columns[i][data]:columns上定义的data属性值 // columns[i][name]:columns上定义的name属性值 // columns[i][searchable]:列能不能检索 // columns[i][orderable]:列能不能排序 // columns[i][search][value]:列的检索值 string // 服务器返回的数据 // draw:和Request的draw设定成一样的值 // recordsTotal:所有的总件数 // recordsFiltered:筛选后的总件数 // data:返回的数据 // 每一行数据上面,可以包含这几个可选项 // DT_RowId:加在行上的ID值 // DT_RowClass:加在行上的Class // DT_RowData:加在行上的额外数据(object) // DT_RowAttr:加在行上的属性(object) // error:如果有错误,就设定这个值,没有错误,不要包含这个值
例子:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Configuration; using AppBlock; using System.Data.SqlClient; using Newtonsoft.Json; namespace alfest.Ajax { public partial class Category : System.Web.UI.Page { string mode, option, user, limit, start, searchKey, orderByColumn, orderByDir, estMstSrno, pnlsrno, draw, jsonString; CommonClass cmnCls = new CommonClass(); protected void Page_Load(object sender, EventArgs e) { mode = Request.QueryString["mode"] == null ? "" : Request.QueryString["mode"].ToString(); option = Request.QueryString["option"] == null ? "" : Request.QueryString["option"].ToString(); limit = Request.QueryString["length"] == null ? "" : Request.QueryString["length"].ToString(); start = Request.QueryString["start"] == null ? "" : Request.QueryString["start"].ToString(); user = Request.QueryString["user"] == null ? "" : Request.QueryString["user"].ToString(); searchKey = Request.QueryString["search[value]"] == null ? "" : Request.QueryString["search[value]"].ToString(); orderByColumn = Request.QueryString["order[0][column]"] == null ? "" : Request.QueryString["order[0][column]"].ToString(); orderByDir = Request.QueryString["order[0][dir]"] == null ? "" : Request.QueryString["order[0][dir]"].ToString(); estMstSrno = Request.QueryString["estMstSrno"] == null ? "" : Request.QueryString["estMstSrno"].ToString(); pnlsrno = Request.QueryString["pnlsrno"] == null ? "" : Request.QueryString["pnlsrno"].ToString(); draw = Request.QueryString["draw"] == null ? "" : Request.QueryString["draw"].ToString(); if (option == "GetAllAdminCategory") { // Cls_Category CatgObj = new Cls_Category(); // CatgObj.orderColumn = Convert.ToInt32(orderByColumn); // CatgObj.limit = Convert.ToInt32(limit); // CatgObj.orderDir = orderByDir; // CatgObj.start = Convert.ToInt32(start); // CatgObj.searchKey = searchKey; // CatgObj.option = "GetAllAdminCategory"; // or user your own method to get data (just fill the dataset) // DataSet ds = cmnCls.PRC_category(CatgObj); dynamic newtonresult = new { status = "success", draw = Convert.ToInt32(draw == "" ? "0" : draw), recordsTotal = ds.Tables[1].Rows[0][0], recordsFiltered = ds.Tables[1].Rows[0][0], data = ds.Tables[0] }; jsonString = JsonConvert.SerializeObject(newtonresult); Response.Clear(); Response.ContentType = "application/json"; Response.Write(jsonString); } } } }
6,DataTable常用事件
//常用事件 // init:初始化和数据都加载完成,和 initComplete配置等价 $('#example') .on('init.dt', function () { console.log('Table initialisation complete: ' + new Date().getTime()); }) .dataTable(); // error:处理数据出错 errMode必须为“none”,才会触发error事件 $.fn.dataTable.ext.errMode = 'none'; // alert,throw,none, a function $('#example') .on('error.dt', function (e, settings, techNote, message) { console.log('An error has been reported by DataTables: ', message); }) .DataTable(); // xhr:ajax加载数据完成后调用,这时数据并没有被描画,等价于 ajax.dataSrc $('#example') .on('xhr.dt', function (e, settings, json, xhr) { for (var i = 0, ien = json.aaData.length ; i < ien ; i++) { json.aaData[i].sum = json.aaData[i].one + json.aaData[i].two; } // Note no return - manipulate the data directly in the JSON object. }) .dataTable({ ajax: "data.json" });
7,Datatable常用Api
//全部参考 https://datatables.net/reference/api/ // 1,获取API的方式 // 注意 $(selector).dataTable()得到的是table的jquery对象 // 而api对象只能通过:api.$(select) 返回查找到的jquery对象。 $(selector).DataTable(); $(selector).dataTable().api(); new $.fn.dataTable.Api(selector); // 2,得到一个api对象 var table = $('#example').DataTable(); //3,描画 draw( [paging] ) 取值:true 全部重画,false 全部重画(保持当前的页面), // "page" 不重取数据,只描画当前页 $('#myFilter').on('keyup', function () { table.search(this.value).draw(); }); // Sort by column 1 and then re-draw table.order([[1, 'asc']]).draw(false); table.page('next').draw('page'); // data() 获取全表数据 // Increment a counter for each row table.data().each(function (d) { d.counter++; }); // 4,column().data() 获取列数据 // cloumn的第一个参数 可以是序号,或jquery支持的选择器 // cloumn的第二个参数 是一个 selector-modifier 对象,取值如下 //{ // // DataTables core // order: 'current', // 'current', 'applied', 'index', 'original' // page: 'all', // 'all', 'current' // search: 'none', // 'none', 'applied', 'removed' // // Extension - KeyTable (v2.1+) - cells only // focused: undefined, // true, false, undefined // // Extension - Select (v1.0+) // selected: undefined // true, false, undefined //} table.column(3, { order: 'current' }).data(); //5,row().data() 获取行数据 $('#example tbody').on('click', 'tr', function () { console.log(table.row(this).data()); }); // 6,row().node() 获取行dom对象 $(table.row('#row-4').node()).addClass('ready'); // 7,row().remove(); 删除当前行 table.row('#row-4').remove(); // 8, row.add() 加一行数据 // rows.add() 加多行数据 table.row.add({id:"1",name:"li"}); // 9, table().body() 获取tbody dom 对象 // table().header() 获取theader dom 对象 // table().footer() 获取tfooter dom 对象 // table().node() 获取table dom 对象 $(table.table().footer()).addClass('highlight'); // 10,destroy() 销毁table true:连同html一起销毁 table.destroy(false) // 11,on 绑定table的事件 table.on('xhr', function (e, settings, json) { console.log('Ajax event occurred. Returned data: ', json); }); // 12,page.len(10) 设置一页显示的条数 $('#_10').on('click', function () { table.page.len(10).draw(); });
8,其他
8.1 重新加载数据
第二个参数为false的话,会保持当前的选中页。
vartable = $('#example').DataTable(); table.ajax.reload( function( json ) { $('#myInput').val( json.lastInput ); } , true);
8.2 改变url,再加载
table.ajax.url( 'newData.json').load();
8.3 获取服务器返回的json数据
vartable = $('#example').DataTable(); table.on( 'xhr', function() { varjson = table.ajax.json(); alert( json.data.length +' row(s) were loaded'); } );