属性说明自行百度或者参考官网 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';