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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Python 存储字符串时节省空间的方法
2019/04/23 Python
详解Python中的测试工具
2019/06/09 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
宿舍违规检讨书
2014/01/12 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python