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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery实现高级检索功能
May 28 jQuery
jquery插件懒加载的示例
Oct 24 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 编程的 5个良好习惯
2009/02/20 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
js单词形式的运算符
2014/05/06 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python连接mongodb密码认证实例
2018/10/16 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Pycharm github配置实现过程图解
2020/10/13 Python
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
大学新生军训自我鉴定
2014/03/18 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
2016党校培训心得体会
2016/01/07 职场文书
2019广播稿怎么写
2019/04/17 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers