jquery DataTable实现前后台动态分页

整理文档，搜刮出一个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; 

?>

效果图：

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

# jquery # 动态表格分页 # 动态分页 # jquery实现table分页 # jQuery插件DataTables分页开发心得体会 # Asp.net MVC 中利用jquery datatables 实现数据分页显示功能 # jquery dataTable 后台加载数据并分页实例代码 # jquery datatable服务端分页 # ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意 # jQuery DataTables插件自定义Ajax分页实例解析 # JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探 # jQuery实现Table分页效果 # 分页 # 每页 # 绑定 # 大家多多 # 就可以 # 文档 # 当前页 # body # div # alpha # style # height # width # stylesheet # cdnjs # external # nofollow # cloudflare # twitter # bootstrap

返回目录在线咨询

上一篇：c++中的表达式模板(Expression Templates)是什么_c++零成本抽象技术
下一篇：成都微信小程序开发指南与实战技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jquery DataTable实现前后台动态分页

您的项目需求