dataTable 案例 （js + php）

属性说明自行百度或者参考官网 http://www.datatables.club/reference/

html 内容：

 <table id="user-table">
   <thead>
     <tr>
       <th>File Name</th>
       <th>Stats</th>
	   <th>Upload Time</th>
       <th>Product</th>
       <th>Folder</th>
       <th>Function</th>           
     </tr>
   </thead>
   <tbody >
   </tbody>
 </table>

js

• columns ： 长度要和html th 标签对应，比如说有6个 th 内容，则数组长度就要为6，长度不一样就会报错，这里主要是要开启server 服务 "bServerSide": true

$('#user-table').DataTable({
		responsive: true,
		"pageLength": 50,
		"order": [[ 0, "desc" ]],
		"searching":false,
		"bPaginite": true,
		"bInfo": true,
		"bSort": false,
		"processing": false,
		"bServerSide": true, // 开启server 服务
		"sAjaxSource": "../ajax/file_list.php",//这个是请求的地址
		"fnServerData": retrieveData,// 获取数据的处理函数
		 "columns": [
			{"data": "myteamfile_file_name"},
			{
				"data": "myteamfile_file_display",
				render: function (data, type, full) {
					return data == 0 ? 'Waiting' : 'onLine';
				}
			},
			{"data": "myteamfile_file_uploadtime"},
			{"data": "myteamfile_product_name"},
			{"data": "myteamfile_folder_name"},
			{
			 // 渲染操作按钮
				"data": "myteamfile_file_id",
				render: function (data, type, full) {
					var cli = "javascript:window.location.href='"+$('#user-table tbody').data("accessimage")+"/"+full.myteamfile_file_address+"'",
						cli2 = "javascript:window.location.href='file_modify.php?file_id="+data +"'",
						cli3 = "javascript:submitDeleteFile('"+data+"');";
					var str = '<button class="btn btn-info btn-xs" onClick="'+cli+'">Download</button>',
						str2 = '<button class="btn btn-info btn-xs" onClick="'+cli2+'">Modify</button>',
						str3 = '<button class="btn btn-danger btn-xs" onClick="'+cli3+'">Delete</button>';
					return str + str2 + str3;
				}
			}
		  ]

	});
	function retrieveData(url, aoData, fnCallback) {
	/*这个url就是请求地址对应sAjaxSource
	aoData 和 fnCallback 是内置变量
	*/
         $.ajax({
             url: url,
             data : {
                 "aoData":JSON.stringify(aoData)， // 这个是必须的
                 "type" :"file",
             },
             type: 'POST',
             dataType: 'json',
             async: true,
             success: function (result) {
//				 console.log(result);
                 fnCallback(result); // 返回结果后会根据上面的columns 自行渲染
             },
              error:function(XMLHttpRequest, textStatus, errorThrown) {
                 alert("error status:"+XMLHttpRequest.status+",readyState:"+XMLHttpRequest.readyState+",textStatus:"+textStatus);
 
             }
         });
     }

后台php

<?php
header('Content-type: text/html; charset=utf8');
include_once("../../config.php");
if($_SESSION['user']['myteamfile_user_stats']<100){die(header('Location: ../index.php'));exit;}
$SQL='select * from myteamfile_file_table LEFT JOIN myteamfile_folder_table ON myteamfile_folder_id=myteamfile_file_folder_parent
LEFT JOIN myteamfile_product_table ON myteamfile_product_id=myteamfile_file_product_parent
where myteamfile_file_delete=0
order by myteamfile_file_name';
$res = $_POST['aoData'];
$iDisplayStart = 0; // 起始索引
$iDisplayLength = 0;//分页长度
$jsonarray= json_decode($res) ;
$Array = get_more($SQL); 
foreach($jsonarray as $value){ 
	if($value->name=="sEcho"){
		$sEcho=$value->value;
	}
	if($value->name=="iDisplayStart"){
		$iDisplayStart=$value->value;
	}
	if($value->name=="iDisplayLength"){
		$iDisplayLength=$value->value;
	} 
}
$json_data = array ('sEcho'=>$sEcho,'iTotalRecords'=>$count,'iTotalDisplayRecords'=>$count,'aaData'=>array_slice($Array,$iDisplayStart,$iDisplayLength));  //按照datatable的当前页和每页长度返回json数据
$obj=json_encode($json_data);
echo $obj;
?>

补充：

我这里开启server 服务后搜索功能会失效，可能是和fnServerData 方法冲突了，研究发现fnServerData 方法会监听搜索框变化，所以ajax data 添加条件 "val" : $('#user-table_filter input').val(),最后的条件如下：

data : {
    "aoData":JSON.stringify(aoData)， // 这个是必须的
	"val" : $('#user-table_filter input').val()
},

同时更改php 代码，添加条件

include_once("../../config.php");
if($_SESSION['user']['myteamfile_user_stats']<100){die(header('Location: ../index.php'));exit;}
$searchBy = '';
if(!empty($_POST['val'])){
// 根据自己的条件筛选
	$searchBy = "and `myteamfile_file_name` LIKE '%".$_POST['val']."%' or `myteamfile_folder_name` LIKE '%".$_POST['val']."%'";
}
$SQL='select * from myteamfile_file_table LEFT JOIN myteamfile_folder_table ON myteamfile_folder_id=myteamfile_file_folder_parent
LEFT JOIN myteamfile_product_table ON myteamfile_product_id=myteamfile_file_product_parent
where myteamfile_file_delete=0 '.$searchBy.'order by myteamfile_file_name';