小編給大家分享一下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/twitter-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> <div > <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="//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;
?>效果圖：
看完了這篇文章，相信你對“jquery中DataTable如何實現前后臺動態分頁”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
