时间:2021-07-01 10:21:17 帮助过:7人阅读
整理文档,搜刮出一个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> <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; ?>
效果图:
相关推荐:
XML实战秘籍第三卷:动态分页
PHP动态分页函数,PHP开发分页必备啦
jquery动态分页效果堪比时光网_jquery
以上就是jquery DataTable前后台动态分页实现方法分享的详细内容,更多请关注Gxl网其它相关文章!