jquery dataTable 后台加载数据并分页实例代码


Posted in jQuery onJune 07, 2017

使用 dataTable后台加载数据并分页。网上版本很多,但很多都是不能用或者不详细的,这里是已经验证过的。

引用 js文件

<script src="static/ace/js/jquery-2.0.3.min.js"></script>
<script src="static/ace/js/jquery.dataTables.min.js"></script> 
<script src="static/ace/js/jquery.dataTables.bootstrap.js"></script>

添加一个table 标签,<tbody></tbody> 可以不用,可以动态加载

<table id="sample-table-2" class="table table-striped table-bordered table-hover"> 
    <thead> 
      <tr> 
        <th class="center"><label> 
            <input type="checkbox" class="ace" /> 
            <span class="lbl"></span> 
          </label> 
        </th> 
        <th>名称</th> 
        <th>apiKey</th> 
        <th>secretKey</th> 
        <th><i class="icon-time bigger-110 hidden-480"></i> 创建时间</th> 
        <th class="hidden-480">Status</th> 
        <th>操作</th> 
      </tr> 
    </thead> 
 
  </table>

关键的JS代码:

<script type="text/javascript"> 
  jQuery(function($) { 
 
    //初始化table 
    var oTable1 = $('#sample-table-2') 
        .dataTable( 
            { 
              "bPaginate" : true,//分页工具条显示 
              //"sPaginationType" : "full_numbers",//分页工具条样式 
              "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
              "bScrollCollapse" : true, //当显示的数据不足以支撑表格的默认的高度 
              "bLengthChange" : true, //每页显示的记录数 
              "bFilter" : false, //搜索栏 
              "bSort" : true, //是否支持排序功能 
              "bInfo" : true, //显示表格信息 
              "bAutoWidth" : true, //自适应宽度 
              "bJQueryUI" : false,//是否开启主题 
              "bDestroy" : true, 
              "bProcessing" : true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好 
              "bServerSide" : true,//服务器处理分页,默认是false,需要服务器处理,必须true 
              "sAjaxDataProp" : "aData",//是服务器分页的标志,必须有  
              "sAjaxSource" : "${basePath}pushEntity/getTableData",//通过ajax实现分页的url路径。  
              "aoColumns" : [//初始化要显示的列 
                  { 
                    "mDataProp" : "id",//获取列数据,跟服务器返回字段一致 
                    "sClass" : "center",//显示样式 
                    "mRender" : function(data, type, full) {//返回自定义的样式 
                      return "<label><input type='checkbox' class='ace' /><span class='lbl'></span></label>" 
                    } 
                  }, 
                  { 
                    "mDataProp" : "appName" 
                  }, 
                  { 
                    "mDataProp" : "apiKey" 
                  }, 
                  { 
                    "mDataProp" : "secretKey" 
                  }, 
                  { 
                    "mDataProp" : "createTime", 
                    "mRender" : function(data, type, full) { 
                      return new Date(data)//处理时间显示 
                      .toLocaleString(); 
                    } 
                  }, 
                  { 
                    "mDataProp" : "createTime", 
                    "mRender" : function(data, type, full) { 
                      return "<span class='label label-sm label-info arrowed arrowed-righ'>Sold</span>" 
                    } 
                  }, 
                  { 
                    "mDataProp" : "createTime", 
                    "mRender" : function(data, type, full) { 
                      return "<div class='visible-md visible-lg hidden-sm hidden-xs action-buttons'><a class='blue' href='#'><i class='icon-zoom-in bigger-130'></i></a><a class='green' href='#'><i class='icon-pencil bigger-130'></i></a><a class='red' href='#'><i class='icon-trash bigger-130'></i></a></div>" 
                    } 
                  } ], 
              "aoColumnDefs" : [ {//用来设置列一些特殊列的属性 
                "bSortable" : false, 
                "aTargets" : [ 0 ] 
              //第一列不排序 
              }, { 
                "bSortable" : false, 
                "aTargets" : [ 5 ] 
              }, { 
                "bSortable" : false, 
                "aTargets" : [ 6 ] 
              } ], 
              "oLanguage" : {//语言设置 
                "sProcessing" : "处理中...", 
                "sLengthMenu" : "显示 _MENU_ 项结果", 
                "sZeroRecords" : "没有匹配结果", 
                "sInfo" : "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", 
                "sInfoEmpty" : "显示第 0 至 0 项结果,共 0 项", 
                "sInfoFiltered" : "(由 _MAX_ 项结果过滤)", 
                "sInfoPostFix" : "", 
                "sSearch" : "搜索:", 
                "sUrl" : "", 
                "sEmptyTable" : "表中数据为空", 
                "sLoadingRecords" : "载入中...", 
                "sInfoThousands" : ",", 
                "oPaginate" : { 
                  "sFirst" : "首页", 
                  "sPrevious" : "上页", 
                  "sNext" : "下页", 
                  "sLast" : "末页" 
                }, 
                "oAria" : { 
                  "sSortAscending" : ": 以升序排列此列", 
                  "sSortDescending" : ": 以降序排列此列" 
                } 
              } 
            }); 
 
    //全选 
    $('table th input:checkbox').on( 
        'click', 
        function() { 
          var that = this; 
          $(this).closest('table').find( 
              'tr > td:first-child input:checkbox').each( 
              function() { 
                this.checked = that.checked; 
                $(this).closest('tr').toggleClass('selected'); 
              }); 
 
        }); 
 
  }); 
</script>

后台代码:

// 获取前端过来的参数,下面三个参数是 dataTable默认的,不要随便更改 
    Integer sEcho = Integer.valueOf(params.get("sEcho"));// 记录操作的次数 每次加1 
    Integer iDisplayStart = Integer.valueOf(params.get("iDisplayStart"));// 起始 
    Integer iDisplayLength = Integer.valueOf(params.get("iDisplayLength"));// 每页显示的size 
 
    Map<String, Object> map = new HashMap<String, Object>(); 
    try { 
      // 查询数据,分页的话我这边使用的是 PageHelper,这边不介绍了 
      PagedResult<PushEntity> list = pushEntityService.findByUserId( 
          pushUser.getId(), iDisplayStart, iDisplayLength); 
 
      // 为操作次数加1,必须这样做 
      int initEcho = sEcho + 1;
//返回参数也是固定的 
      map.put("sEcho", initEcho); 
      map.put("iTotalRecords", list.getTotal());//数据总条数 
      map.put("iTotalDisplayRecords", list.getTotal());//显示的条数 
      map.put("aData", list.getDataList());//数据集合 
    } catch (Exception e) { 
      e.printStackTrace(); 
    } 
 
    return map;

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

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 #jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 #jQuery
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
jquery实现图片放大点击切换
Jun 06 #jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
Jquery EasyUI $.Parser
Jun 02 #jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 #jQuery
You might like
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php+javascript的日历控件
2009/11/19 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
Python递归函数定义与用法示例
2017/06/02 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python time库基本使用方法分析
2019/12/13 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
python实现图像外边界跟踪操作
2020/07/13 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
上课迟到检讨书100字
2014/01/11 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
出国留学英文自荐信
2015/03/25 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript