整理文档,搜刮出一个jquery DataTable实现前后台动态分页,稍微整理精简一下做下分享。
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
<script type="text/javascript" src=" //cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
<script type="text/javascript">
$(document).ready(function() {
refreshDataTable();
});
var refreshDataTable=function() {
var table = $('#example').DataTable({
//"ajax":"data/tabledata.json",// "iDisplayLength": 3,"sPaginationType": "full_numbers","bPaginite": true,"bInfo": true,"bSort": true,"processing": false,"serverSide": true,"sAjaxSource": "customize/datatable.PHP",//这个是请求的地址
"fnServerData": retrieveData
});
function retrieveData(url,aoData,fnCallback) {
var data={"data":{"id":"123123","name":"2s",}};
$.ajax({
url: url,//这个就是请求地址对应sAjaxSource
data : {
"aoData" : JSON.stringify(aoData)
},type: 'POST',dataType: 'json',async: false,success: function (result) {
//var obj=JSON.parse(result);
console.log(result);
fnCallback(result);//把返回的数据传给这个<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>就可以了,datatable会<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>绑定数据的
},error:function(XMLHttpRequest,textStatus,errorThrown) {
alert("status:"+XMLHttpRequest.status+",readyState:"+XMLHttpRequest.readyState+",textStatus:"+textStatus);
}
});
}
};
$json_data = array ('sEcho'=>$sEcho,'iTotalRecords'=>50,'iTotalDisplayRecords'=>50,'aaData'=>array_slice($Array,$iDisplayStart,$iDisplayLength)); //按照datatable的当前页和每页长度返回json数据
$obj=json_encode($json_data);
echo $obj;
?>