jqueryDataTable前后台动态分页实现方法分享

来源：百万美食网

本文主要介绍了jquery DataTable实现前后台动态分页。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

整理文档，搜刮出一个jquery DataTable实现前后台动态分页，稍微整理精简一下做下分享。

html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>测试页面</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="external nofollow" rel="stylesheet">
 <link href="//cdnjs.cloudflare.com/ajax/libs/-bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
 <link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap4.min.css" rel="external nofollow" rel="stylesheet">


</head>
<body>
<p style="width:50%;height:500px;margin:150px auto ;background-color: #f4cccc">
<table id="example" class="display" cellspacing="0" width="100%">
 <thead>
 <tr>
 <th>Name</th>
 <th>Cellphone</th>
 <th>Position</th>
 <th>Company</th>
 <th>Salary</th>
 </tr>
 </thead>
 <tbody>

 </tbody>
</table>
</p>

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src=" //cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<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);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
 },
 error:function(XMLHttpRequest, textStatus, errorThrown) {

 alert("status:"+XMLHttpRequest.status+",readyState:"+XMLHttpRequest.readyState+",textStatus:"+textStatus);

 }
 });
 }
 };
</script>
</body>
</html>

PHP代码:

<?php
header('Content-type: text/json');
 $res = $_POST['aoData'];
 $sEcho = 0;
 $iDisplayStart = 0; // 起始索引
 $iDisplayLength = 0;//分页长度
 $jsonarray= json_decode($res) ;
 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;
 }
 } 
 $Array = Array(); 
 //此处生成50条数据，模仿数据库数据
 for ($i = 1; $i < 51; $i++) {
 $d = array($i,$i,$i,$i,$i);
 Array_push($Array, $d);
 }

 $json_data = array ('sEcho'=>$sEcho,'iTotalRecords'=>50,'iTotalDisplayRecords'=>50,'aaData'=>array_slice($Array,$iDisplayStart,$iDisplayLength)); //按照datatable的当前页和每页长度返回json数据
 $obj=json_encode($json_data);
 echo $obj; 

?>

效果图：