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遮罩层实例讲解
May 11 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery实现本地存储
Dec 22 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
ftp类(example.php)
2006/10/09 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
不同Jquery版本引发的问题解决
2013/10/14 Javascript
javascript实现微信分享
2014/12/23 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
jquery延迟对象解析
2016/10/26 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
python将视频转换为全字符视频
2019/04/26 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Python urllib.request对象案例解析
2020/05/11 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
实习生的自我评价
2014/01/08 职场文书
董存瑞观后感
2015/06/11 职场文书
高中政治教学反思
2016/02/23 职场文书
2019消防宣传标语!
2019/07/10 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript