php datatables,DataTables四种数据源

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表格数据如下：

NamePositionOfficeAgeStart dateSalary

Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800Garrett WintersAccountantTokyo632011/07/25$170,750

然后加入JavaScript代码： $(document).ready(function() {

$('#example').dataTable();

} ); NamePositionOfficeAgeStart dateSalaryNamePositionOfficeAgeStart dateSalaryTiger NixonSystem ArchitectEdinburgh612011/04/25$320,800

Garrett WintersAccountantTokyo632011/07/25$170,750

Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000

Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060

Airi SatouAccountantTokyo332008/11/28$162,700

Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000

Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500

Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900

Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500

Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600

Jena GainesOffice ManagerLondon302008/12/19$90,560

二、Ajax sourced data

Datatable可以解析来自Ajax的Json数据：

HTML代码如下：

NamePositionOfficeExtn.Start dateSalary

NamePositionOfficeExtn.Start dateSalary

JavaScript代码： $(document).ready(function() {

$('#example1').dataTable( {

"ajax": '/wp-content/themes/yusi2.0/dataTable/arrays.txt'

} );

} ); NamePositionOfficeExtn.Start dateSalaryNamePositionOfficeExtn.Start dateSalary

三、Javascript sourced data

在很多时候，我们的数据都是动态生成的，dataTable支持读取和解析JavaScript 中的数组。我们只需要将 JavaScript 数组传递给dataTable的data属性即可。

JavaScript代码：

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代码如下：

NamePositionOfficeExtn.Start dateSalary

NamePositionOfficeExtn.Start dateSalary $(document).ready(function() {

$('#example').dataTable( {

"processing": true,

"serverSide": true,

"ajax": "../processing.php"

} );

} );

更详细的介绍请参见官方文档:http://www.datatables.net/examples/data_sources/