jquery DataTable实现前后台动态分页
程序员文章站
2022-06-24 16:58:41
整理文档,搜刮出一个jquery datatable实现前后台动态分页,稍微整理精简一下做下分享。
html代码:
整理文档,搜刮出一个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 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="//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; ?>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。