jquery DataTable實現前后臺動態分頁

2019-11-19 16:18:58

字體：大中小

來源：轉載

供稿：網友

整理文檔，搜刮出一個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  rel="external nofollow" rel="stylesheet">  <link  rel="external nofollow" rel="stylesheet">  <link  rel="external nofollow" rel="stylesheet"></head><body><div 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></div><script type="text/javascript" src="http://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代碼:

<?phpheader('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; ?>

效果圖：

第一頁