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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
JQuery复选框全选效果如何实现
May 08 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模板,主要想体现一下思路
2006/12/25 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
python多线程同步之文件读写控制
2021/02/25 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
python unichr函数知识点总结
2020/12/16 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
标准自荐信范文
2014/01/29 职场文书
运动会通讯稿150字
2014/02/15 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS