Gemeinsame Nutzung der Implementierungsmethode des dynamischen Paging im Front- und Backend von jquery DataTable-js-Tutorial-php.cn

Gemeinsame Nutzung der Implementierungsmethode des dynamischen Paging im Front- und Backend von jquery DataTable

小云云

Freigeben： 2018-05-14 15:54:20

Original

5131 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich jquery DataTable vorgestellt, um dynamisches Paging vorne und hinten zu implementieren. Der Herausgeber findet es ziemlich gut, deshalb möchte ich es jetzt mit Ihnen teilen und es als Referenz für alle zur Verfügung stellen. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Organisieren Sie die Dokumente, suchen Sie nach einer JQuery-DataTable, um dynamisches Front-End- und Back-End-Paging zu implementieren, und organisieren und optimieren Sie sie ein wenig für die gemeinsame Nutzung.

HTML-Code:

<!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 = $(&#39;#example&#39;).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: &#39;POST&#39;,
       dataType: &#39;json&#39;,
       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>

Nach dem Login kopieren

PHP-Code:

<?php
header(&#39;Content-type: text/json&#39;);
  $res = $_POST[&#39;aoData&#39;];
 $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 (&#39;sEcho&#39;=>$sEcho,&#39;iTotalRecords&#39;=>50,&#39;iTotalDisplayRecords&#39;=>50,&#39;aaData&#39;=>array_slice($Array,$iDisplayStart,$iDisplayLength)); //按照datatable的当前页和每页长度返回json数据
  $obj=json_encode($json_data);
  echo $obj; 

?>

Nach dem Login kopieren

Rendering:

Gemeinsame Nutzung der Implementierungsmethode des dynamischen Paging im Front- und Backend von jquery DataTable

Verwandte Empfehlungen:

XML Practical Cheats Band 3: Dynamische Paginierung

Die dynamische Paging-Funktion von PHP ist ein Muss für die PHP-Paging-Entwicklung.

Der dynamische Paging-Effekt von jquery ist vergleichbar mit dem von Time.com_jquery

Das obige ist der detaillierte Inhalt vonGemeinsame Nutzung der Implementierungsmethode des dynamischen Paging im Front- und Backend von jquery DataTable. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!