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 相关文章推荐
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python爬取指定微信公众号文章
2018/12/20 Python
python实现操作文件(文件夹)
2019/10/31 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
村优秀党员事迹材料
2014/01/15 职场文书
草船借箭教学反思
2014/02/03 职场文书
母亲节感恩寄语
2014/02/21 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2014年学前班工作总结
2014/12/08 职场文书