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 Tree Multiselect使用详解
May 02 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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
最省空间的计数器
2006/10/09 PHP
一个php作的文本留言本的例子(一)
2006/10/09 PHP
简单易用的计数器(数据库)
2006/10/09 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
php实现的二分查找算法示例
2017/06/20 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
django缓存配置的几种方法详解
2018/07/16 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
python制作微博图片爬取工具
2021/01/16 Python
爱游人:Travelliker
2017/09/05 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
预备党员表决心书
2014/03/11 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
高一化学教学反思
2016/02/22 职场文书