Maison > Article > interface Web > Partage de la méthode d'implémentation de la pagination dynamique devant et backend de jquery DataTable
Cet article présente principalement jquery DataTable pour implémenter la pagination dynamique avant et arrière. L'éditeur le trouve plutôt bien, j'aimerais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Organisez les documents, recherchez un DataTable jquery pour implémenter la pagination dynamique front-end et back-end, puis organisez-le et rationalisez-le un peu pour le partage.
Code 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>
Code 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; ?>
Rendu :
Recommandations associées :
XML Practical Cheats Volume 3 : Pagination dynamique
Fonction de pagination dynamique PHP, un incontournable pour le développement PHP de pagination
l'effet de pagination dynamique jquery est comparable à celui de Time.com_jquery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!