jquery DataTable实现前后台动态分页


Posted in jQuery onJune 17, 2017

整理文档,搜刮出一个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实现前后台动态分页

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

jQuery 相关文章推荐
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 #jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
jQuery ajax动态生成table功能示例
Jun 14 #jQuery
You might like
Laravel 5框架学习之表单
2015/04/08 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
javascript实现抢购倒计时程序
2019/08/26 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python xml解析实例详解
2016/11/14 Python
python妙用之编码的转换详解
2017/04/21 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
浅谈Python协程
2020/06/17 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
化工专业应届生求职信
2013/11/08 职场文书
公司端午节活动方案
2014/02/04 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
学雷锋的心得体会
2014/09/04 职场文书
财务负责人岗位职责
2015/02/03 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
交通安全主题班会
2015/08/12 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
python实现层次聚类的方法
2021/11/01 Python