jquery DataTable实现前后台动态分页

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

HTML代码:

rush:xhtml;"> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <Meta name="description" content=""> <Meta name="keywords" content=""> nofollow" rel="stylesheet"> njs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="external nofollow" rel="stylesheet"> nofollow" rel="stylesheet">

display" cellspacing="0" width="100%"> Name Cellphone Position Company Salary

<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="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>就可以了,datatable会<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>绑定数据的
   },error:function(XMLHttpRequest,textStatus,errorThrown) {

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

   }
 });

}
};

PHP代码:

rush:PHP;"> 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); 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;

?>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：jQuery Jsonp跨域模拟搜索引擎下一篇：jQuery实现下拉菜单的实例代码