jquery dataTable

待我称王封你为后i 2021-09-28 09:20 424阅读 0赞

### 文章目录 ###

*   *   *  通用配置
         *  最基本用法
         *  字改成中文
         *  ajax动态加载数据
         *  列渲染
         *  复杂表头
         *  创建行时回调
         *  替换样式
         *  服务器端处理分页

官方网站地址： [https://www.datatables.net/][https_www.datatables.net]

### 通用配置 ###

$.fn.dataTable.ext.errMode = ‘none’;  
在出现异常情况时，框架本身会弹出一些alert对话框，其中有一些异常是完全可以忽视的（比如要加载的数据为null，我的数据本来就是有null的，为什么还要弹alert？）。但是在开发时不要这么设置，在弹出的信息中会有指向解决方案的url。

所有的参数  
[https://datatables.net/reference/option/][https_datatables.net_reference_option]

### 最基本用法 ###

<!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">
    	<title>nayi224 test</title>
        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    
    </head>  
    <body>
    <div style="">
    
    
        <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>Sidney</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>
            
            </tfoot>
        </table>
    </div>
    </body>
    <script type="text/javascript"> $(document).ready(function() { $('#example').DataTable(); }); </script>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]  
官网上又称之为`Zero configuration` ，但是并非是0配置，实际上是这个插件内置了大量默认配置，使得即使不做配置也能有不错的效果。

通过查看网页代码可以发现，这个框架并不想某些框架一样将dom结构整个替换为div之类的，它只是加了一些属性；在外层加了些div；将一些dom元素写进了内存中（猜的，15000行代码实在不想看）；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]

### 字改成中文 ###

[https://www.datatables.net/manual/i18n][https_www.datatables.net_manual_i18n]  
[https://datatables.net/plug-ins/i18n/Chinese][https_datatables.net_plug-ins_i18n_Chinese]

$(document).ready(function() { 
    $('#example').DataTable({ 
        language: { 
        "sProcessing":   "处理中...",
        "sLengthMenu":   "显示 _MENU_ 项结果",
        "sZeroRecords":  "没有匹配结果",
        "sInfo":         "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty":    "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix":  "",
        "sSearch":       "搜索:",
        "sUrl":          "",
        "sEmptyTable":     "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands":  ",",
        "oPaginate": { 
            "sFirst":    "首页",
            "sPrevious": "上页",
            "sNext":     "下页",
            "sLast":     "末页"
        },
        "oAria": { 
            "sSortAscending":  ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }
    } );
    	});

通过修改默认配置来实现显示中文

$.extend($.fn.dataTable.defaults.oLanguage, { 
        "sProcessing":   "处理中...",
        "sLengthMenu":   "显示 _MENU_ 项结果",
        "sZeroRecords":  "没有匹配结果",
        "sInfo":         "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty":    "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix":  "",
        "sSearch":       "搜索:",
        "sUrl":          "",
        "sEmptyTable":     "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands":  ",",
        "oPaginate": { 
            "sFirst":    "首页",
            "sPrevious": "上页",
            "sNext":     "下页",
            "sLast":     "末页"
        },
        "oAria": { 
            "sSortAscending":  ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    });

### ajax动态加载数据 ###

[https://datatables.net/examples/ajax/objects.html][https_datatables.net_examples_ajax_objects.html]  
html中需要事先写好th标签

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
    </table>

js  
列是在column中安按顺序加载的

$('#example').DataTable({ 
    	"ajax": "../jsonSource/jDatatable_src1.txt", //ajax中的其他参数可以参后面的“服务器端处理分页”章节
    	"columns": [
    		{  "data": "name" },
    		{  "data": "position" },
    		{  "data": "office" },
    		{  "data": "extn" },
    		{  "data": "start_date" },
    		{  "data": "salary" }
    	]
    });

jDatatable\_src1.txt

{
      "data": [
        {
          "id": "1",
          "name": "Tiger Nixon",
          "position": "System Architect",
          "salary": "$320,800",
          "start_date": "2011/04/25",
          "office": "Edinburgh",
          "extn": "5421"
        },
        {
          "id": "2",
          "name": "Garrett Winters",
          "position": "Accountant",
          "salary": "$170,750",
          "start_date": "2011/07/25",
          "office": "Tokyo",
          "extn": "8422"
        },
        {
          "id": "3",
          "name": "Ashton Cox",
          "position": "Junior Technical Author",
          "salary": "$86,000",
          "start_date": "2009/01/12",
          "office": "San Francisco",
          "extn": "1562"
        },
        {
          "id": "4",
          "name": "Cedric Kelly",
          "position": "Senior Javascript Developer",
          "salary": "$433,060",
          "start_date": "2012/03/29",
          "office": "Edinburgh",
          "extn": "6224"
        },
        {
          "id": "5",
          "name": "Airi Satou",
          "position": "Accountant",
          "salary": "$162,700",
          "start_date": "2008/11/28",
          "office": "Tokyo",
          "extn": "5407"
        },
        {
          "id": "6",
          "name": "Brielle Williamson",
          "position": "Integration Specialist",
          "salary": "$372,000",
          "start_date": "2012/12/02",
          "office": "New York",
          "extn": "4804"
        },
        {
          "id": "7",
          "name": "Herrod Chandler",
          "position": "Sales Assistant",
          "salary": "$137,500",
          "start_date": "2012/08/06",
          "office": "San Francisco",
          "extn": "9608"
        },
        {
          "id": "8",
          "name": "Rhona Davidson",
          "position": "Integration Specialist",
          "salary": "$327,900",
          "start_date": "2010/10/14",
          "office": "Tokyo",
          "extn": "6200"
        },
        {
          "id": "9",
          "name": "Colleen Hurst",
          "position": "Javascript Developer",
          "salary": "$205,500",
          "start_date": "2009/09/15",
          "office": "San Francisco",
          "extn": "2360"
        },
        {
          "id": "10",
          "name": "Sonya Frost",
          "position": "Software Engineer",
          "salary": "$103,600",
          "start_date": "2008/12/13",
          "office": "Edinburgh",
          "extn": "1667"
        },
        {
          "id": "11",
          "name": "Jena Gaines",
          "position": "Office Manager",
          "salary": "$90,560",
          "start_date": "2008/12/19",
          "office": "London",
          "extn": "3814"
        },
        {
          "id": "12",
          "name": "Quinn Flynn",
          "position": "Support Lead",
          "salary": "$342,000",
          "start_date": "2013/03/03",
          "office": "Edinburgh",
          "extn": "9497"
        },
        {
          "id": "13",
          "name": "Charde Marshall",
          "position": "Regional Director",
          "salary": "$470,600",
          "start_date": "2008/10/16",
          "office": "San Francisco",
          "extn": "6741"
        },
        {
          "id": "14",
          "name": "Haley Kennedy",
          "position": "Senior Marketing Designer",
          "salary": "$313,500",
          "start_date": "2012/12/18",
          "office": "London",
          "extn": "3597"
        }
      ]
    }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 2]  
`注意：` 我在分多次异步请求的时候遇到过加载不上的情况，可以设置destroy: true来解决。

### 列渲染 ###

将上一节中的  
\{ “data”: “name” \},  
改成

{ 
    		"render": function(data,type,row){ 
    			return 111;
    		}
    	}

只用row基本就够了，row里面包含这一行中的所有值。  
也可以返回一些复杂代码，比如

{ 
    		"render": function(data,type,row){ 
    			if(row.name == 'Airi Satou'){ 
    				return "<b>"+row.name+"</b>";
    			}else{ 
    				return row.name;
    			}
    		}
    	}

### 复杂表头 ###

不需要进行特别的考虑，正常写，该显示几列它就会显示几列

<table id="example" class="display" style="width:100%">
    	<thead>
            <tr>
                <th rowspan="2">Name</th>
                <th colspan="2">Information</th>
                <th colspan="3">Contact</th>
            </tr>
            <tr>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
    	</thead>
    </table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 3]

### 创建行时回调 ###

createdRow: function ( row, data, index ) { 
    		console.log(arguments);
    	}

data中存储了行中的数据，row则是整个行对象。

### 替换样式 ###

虽然插件做了好多事，但最终它依然还是一个table，替换样式也不过就是为table加上class并引用相应的css文件，官方例子中也是如此。  
[https://datatables.net/examples/styling/bootstrap.html][https_datatables.net_examples_styling_bootstrap.html]

### 服务器端处理分页 ###

如果数据量很大，就不能在前端分页了，这时需要向后台传当前页与每页多少条数据这两条数据。

$("#existOrgRelTable").dataTable({ 
    	destroy: true,
    	serverSide: true,
    	columns: [{ data: "column1"}],
    	ajax: { 
    		url:webpath+"/myTest/testPage",
    		type: 'POST',
    		data: function(){ 
    			return { };
    		},
    		dataType:"json",
    		dataSrc: function (data) { 
    			return data;//返回List<Map>格式的数据即可
    		}
    	}
    });

在点击换页时，框架会自动执行所配置的ajax方法，并自动传入start（页数）与length（页数据量），后台只需要返回`List<Map>`格式的json。

上面的算是一种简写，它的完整写法是

`fnCallback(resp.listData);` 是加载数据的代码。  
这种写法可以在success中写一些自定义代码。

[https_www.datatables.net]: https://www.datatables.net/
[https_datatables.net_reference_option]: https://datatables.net/reference/option/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]: /images/20210923/533c8720b87e4989b5988cd84c541b39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]: /images/20210923/fd197832360e48d1854ad1c9d361d76c.png
[https_www.datatables.net_manual_i18n]: https://www.datatables.net/manual/i18n
[https_datatables.net_plug-ins_i18n_Chinese]: https://datatables.net/plug-ins/i18n/Chinese
[https_datatables.net_examples_ajax_objects.html]: https://datatables.net/examples/ajax/objects.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 2]: /images/20210923/894d2113966f41e099d39848adb77a4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 3]: /images/20210923/4ed7d5a935584fdb8df8803e0ae04d97.png
[https_datatables.net_examples_styling_bootstrap.html]: https://datatables.net/examples/styling/bootstrap.html