欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery DataTable实现前后台动态分页

程序员文章站 2022-03-21 14:34:08
整理文档,搜刮出一个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; 

?>

效果图:

jquery DataTable实现前后台动态分页 

jquery DataTable实现前后台动态分页

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