文章目录
DataTables是一款非常简单的前端表格展示插件,它支持排序,翻页,搜索以及在客户端和服务端分页等多种功能。官方介绍:
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
它的数据源有很多种:主要有HTML (DOM)数据源,Ajax数据源,JavaScript数据源以及服务器端数据源。这里分别介绍一下这四种数据源的使用。
首先需要在你的html代码引入以下的js和css文件:jquery-1.11.1.min.js、jquery.dataTables.min.js以及jquery.dataTables.css。
一、HTML (DOM) sourced data
HTML表格数据如下:
<table id="example" class="display" cellspacing="0" 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> </tbody> </table>
然后加入JavaScript代码:
$(document).ready(function() { $('#example').dataTable(); } );
Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800
Garrett Winters
Accountant
Tokyo
63
2011/07/25
$170,750
Ashton Cox
Junior Technical Author
San Francisco
66
2009/01/12
$86,000
Cedric Kelly
Senior Javascript Developer
Edinburgh
22
2012/03/29
$433,060
Airi Satou
Accountant
Tokyo
33
2008/11/28
$162,700
Brielle Williamson
Integration Specialist
New York
61
2012/12/02
$372,000
Herrod Chandler
Sales Assistant
San Francisco
59
2012/08/06
$137,500
Rhona Davidson
Integration Specialist
Tokyo
55
2010/10/14
$327,900
Colleen Hurst
Javascript Developer
San Francisco
39
2009/09/15
$205,500
Sonya Frost
Software Engineer
Edinburgh
23
2008/12/13
$103,600
Jena Gaines
Office Manager
London
30
2008/12/19
$90,560
二、Ajax sourced data
Datatable可以解析来自Ajax的Json数据:
HTML代码如下:
<table id="example1" class="display" cellspacing="0" 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> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Extn.</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table>
JavaScript代码:
$(document).ready(function() { $('#example1').dataTable( { "ajax": '/wp-content/themes/yusi2.0/dataTable/arrays.txt' } ); } );
三、Javascript sourced data
在很多时候,我们的数据都是动态生成的,dataTable支持读取和解析JavaScript 中的数组。我们只需要将 JavaScript 数组传递给dataTable的data属性即可。
JavaScript代码:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2"></table> var dataSet = [ ['Trident','Internet Explorer 4.0','Win 95+','4','X'], ['Trident','Internet Explorer 5.0','Win 95+','5','C'], ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'], ['Trident','Internet Explorer 6','Win 98+','6','A'], ['Trident','Internet Explorer 7','Win XP SP2+','7','A'], ['Trident','AOL browser (AOL desktop)','Win XP','6','A'], ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'], ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'], ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'], ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'], ['Gecko','Camino 1.0','OSX.2+','1.8','A'], ]; $(document).ready(function() { $('#example2').dataTable( { "data": dataSet, "columns": [ { "title": "Engine" }, { "title": "Browser" }, { "title": "Platform" }, { "title": "Version", "class": "center" }, { "title": "Grade", "class": "center" } ] } ); } );
四、Server-side processing
这种是最常见的数据来源,我们在服务器端生成需要的数据(一般都是Json格式的),然后返回给前端。而且这种情况我们可以利用dataTable的服务器端翻页。JavaScript代码:如下:
HTML代码如下:
<table id="example" class="display" cellspacing="0" 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> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Extn.</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table>
$(document).ready(function() { $('#example').dataTable( { "processing": true, "serverSide": true, "ajax": "../processing.php" } ); } );
更详细的介绍请参见官方文档:http://www.datatables.net/examples/data_sources/
本博客文章除特别声明,全部都是原创!原创文章版权归过往记忆大数据(过往记忆)所有,未经许可不得转载。
本文链接: 【DataTables四种数据源】(https://www.iteblog.com/archives/1257.html)