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 相关文章推荐
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 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
杏林同学录(九)
2006/10/09 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
php简单压缩css样式示例
2016/09/22 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
Python3.x对JSON的一些操作示例
2017/09/01 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
python下载微信公众号相关文章
2019/02/26 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Django实现文件上传下载功能
2019/10/06 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
高中体育教学反思
2014/01/24 职场文书
烹调加工管理制度
2014/02/04 职场文书
党员实事承诺书
2014/03/26 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
单位工作证明
2014/10/07 职场文书
预备党员转正材料
2014/12/19 职场文书
基石观后感
2015/06/12 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技