共两个文件。dt处理表格是相当强大。
本例是展示dt用ajax请求php后台数据json格式，然后填充。
用bootstrap风格渲染表格
自带搜索。智能分页等功能
更多详情可官网
Feature_enable_disable.html和data.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="../media/css/jquery.dataTables.css">
<link rel="stylesheet" href="">
<script src='../media/js/jquery.js'></script>
<script src='../media/js/jquery.dataTables.js'></script>
<script src='http://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js'></script>
<link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style>
/*body { font-size: 140%; }*/
</style>
</head>
<body>
<table id="example" class="table table-striped table-bordered" 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>
<tfoot>
<tr>
<th>名字</th>
<th>职位</th>
<th>办公室</th>
<th>年龄</th>
<th>入职日期</th>
<th style="text-align:left">薪资</th>
</tr>
</tfoot>
</table>
<script>
$(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": ": 以降序排列此列"
}
},
"ajax": "http://a.com/dt/DataTables-1.10.7/my/data.php"
});
} );
// $(document).ready(function() {
// $('#example').dataTable({
// "order": [[ 3, "desc" ]]
// });
// } );
</script>
</body>
</html><?php
// $info=file_get_contents('http://dt.thxopen.com/example/resources/server_processing_customCUrl.php');
$info='{"draw":0,"recordsTotal":57,"recordsFiltered":57,"data":[["Tiger","Nixon","System Architect","Edinburgh","2011\/04\/25",320800],["Garrett","Winters","Accountant","Tokyo","2011\/07\/25",170750],["Ashton","Cox","Junior Technical Author","San Francisco","2009\/01\/12",86000],["Cedric","Kelly","Senior Javascript Developer","Edinburgh","2012\/03\/29",433060],["Airi","Satou","Accountant","Tokyo","2008\/11\/28",162700],["Brielle","Williamson","Integration Specialist","New York","2012\/12\/02",372000],["Herrod","Chandler","Sales Assistant","San Francisco","2012\/08\/06",137500],["Rhona","Davidson","Integration Specialist","Tokyo","2010\/10\/14",327900],["Colleen","Hurst","Javascript Developer","San Francisco","2009\/09\/15",205500],["Sonya","Frost","Software Engineer","Edinburgh","2008\/12\/13",103600],["Jena","Gaines","Office Manager","London","2008\/12\/19",90560],["Quinn","Flynn","Support Lead","Edinburgh","2013\/03\/03",342000],["Charde","Marshall","Regional Director","San Francisco","2008\/10\/16",470600],["Haley","Kennedy","Senior Marketing Designer","London","2012\/12\/18",313500],["Tatyana","Fitzpatrick","Regional Director","London","2010\/03\/17",385750],["Michael","Silva","Marketing Designer","London","2012\/11\/27",198500],["Paul","Byrd","Chief Financial Officer (CFO)","New York","2010\/06\/09",725000],["Gloria","Little","Systems Administrator","New York","2009\/04\/10",237500],["Bradley","Greer","Software Engineer","London","2012\/10\/13",132000],["Dai","Rios","Personnel Lead","Edinburgh","2012\/09\/26",217500],["Jenette","Caldwell","Development Lead","New York","2011\/09\/03",345000],["Yuri","Berry","Chief Marketing Officer (CMO)","New York","2009\/06\/25",675000],["Caesar","Vance","Pre-Sales Support","New York","2011\/12\/12",106450],["Doris","Wilder","Sales Assistant","Sidney","2010\/09\/20",85600],["Angelica","Ramos","Chief Executive Officer (CEO)","London","2009\/10\/09",1200000],["Gavin","Joyce","Developer","Edinburgh","2010\/12\/22",92575],["Jennifer","Chang","Regional Director","Singapore","2010\/11\/14",357650],["Brenden","Wagner","Software Engineer","San Francisco","2011\/06\/07",206850],["Fiona","Green","Chief Operating Officer (COO)","San Francisco","2010\/03\/11",850000],["Shou","Itou","Regional Marketing","Tokyo","2011\/08\/14",163000],["Michelle","House","Integration Specialist","Sidney","2011\/06\/02",95400],["Suki","Burks","Developer","London","2009\/10\/22",114500],["Prescott","Bartlett","Technical Author","London","2011\/05\/07",145000],["Gavin","Cortez","Team Leader","San Francisco","2008\/10\/26",235500],["Martena","Mccray","Post-Sales support","Edinburgh","2011\/03\/09",324050],["Unity","Butler","Marketing Designer","San Francisco","2009\/12\/09",85675],["Howard","Hatfield","Office Manager","San Francisco","2008\/12\/16",164500],["Hope","Fuentes","Secretary","San Francisco","2010\/02\/12",109850],["Vivian","Harrell","Financial Controller","San Francisco","2009\/02\/14",452500],["Timothy","Mooney","Office Manager","London","2008\/12\/11",136200],["Jackson","Bradshaw","Director","New York","2008\/09\/26",645750],["Olivia","Liang","Support Engineer","Singapore","2011\/02\/03",234500],["Bruno","Nash","Software Engineer","London","2011\/05\/03",163500],["Sakura","Yamamoto","Support Engineer","Tokyo","2009\/08\/19",139575],["Thor","Walton","Developer","New York","2013\/08\/11",98540],["Finn","Camacho","Support Engineer","San Francisco","2009\/07\/07",87500],["Serge","Baldwin","Data Coordinator","Singapore","2012\/04\/09",138575],["Zenaida","Frank","Software Engineer","New York","2010\/01\/04",125250],["Zorita","Serrano","Software Engineer","San Francisco","2012\/06\/01",115000],["Jennifer","Acosta","Junior Javascript Developer","Edinburgh","2013\/02\/01",75650],["Cara","Stevens","Sales Assistant","New York","2011\/12\/06",145600],["Hermione","Butler","Regional Director","London","2011\/03\/21",356250],["Lael","Greer","Systems Administrator","London","2009\/02\/27",103500],["Jonas","Alexander","Developer","San Francisco","2010\/07\/14",86500],["Shad","Decker","Regional Director","Edinburgh","2008\/11\/13",183000],["Michael","Bruce","Javascript Developer","Singapore","2011\/06\/27",183000],["Donna","Snider","Customer Support","New York","2011\/01\/25",112000]]}';
// echo '('.($info).')';
echo $info;