查看: 355|回复: 0

[JavaScript/JQuery] jquery dataTable 后台加载数据并分页实例代码

发表于 2018-1-6 10:00:02
可以不用,可以动态加载

  1. <table id="sample-table-2" class="table table-striped table-bordered table-hover">
  2. <thead>
  3. <tr>
  4. <th class="center"><label>
  5. <input type="checkbox" class="ace" />
  6. <span class="lbl"></span>
  7. </label>
  8. </th>
  9. <th>名称</th>
  10. <th>apiKey</th>
  11. <th>secretKey</th>
  12. <th><i class="icon-time bigger-110 hidden-480"></i> 创建时间</th>
  13. <th class="hidden-480">Status</th>
  14. <th>操作</th>
  15. </tr>
  16. </thead>
  17. </table>
复制代码

关键的JS代码:

  1. <script type="text/javascript">
  2. jQuery(function($) {
  3. //初始化table
  4. var oTable1 = $('#sample-table-2')
  5. .dataTable(
  6. {
  7. "bPaginate" : true,//分页工具条显示
  8. //"sPaginationType" : "full_numbers",//分页工具条样式
  9. "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
  10. "bScrollCollapse" : true, //当显示的数据不足以支撑表格的默认的高度
  11. "bLengthChange" : true, //每页显示的记录数
  12. "bFilter" : false, //搜索栏
  13. "bSort" : true, //是否支持排序功能
  14. "bInfo" : true, //显示表格信息
  15. "bAutoWidth" : true, //自适应宽度
  16. "bJQueryUI" : false,//是否开启主题
  17. "bDestroy" : true,
  18. "bProcessing" : true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好
  19. "bServerSide" : true,//服务器处理分页,默认是false,需要服务器处理,必须true
  20. "sAjaxDataProp" : "aData",//是服务器分页的标志,必须有
  21. "sAjaxSource" : "${basePath}pushEntity/getTableData",//通过ajax实现分页的url路径。
  22. "aoColumns" : [//初始化要显示的列
  23. {
  24. "mDataProp" : "id",//获取列数据,跟服务器返回字段一致
  25. "sClass" : "center",//显示样式
  26. "mRender" : function(data, type, full) {//返回自定义的样式
  27. return "<label><input type='checkbox' class='ace' /><span class='lbl'></span></label>"
  28. }
  29. },
  30. {
  31. "mDataProp" : "appName"
  32. },
  33. {
  34. "mDataProp" : "apiKey"
  35. },
  36. {
  37. "mDataProp" : "secretKey"
  38. },
  39. {
  40. "mDataProp" : "createTime",
  41. "mRender" : function(data, type, full) {
  42. return new Date(data)//处理时间显示
  43. .toLocaleString();
  44. }
  45. },
  46. {
  47. "mDataProp" : "createTime",
  48. "mRender" : function(data, type, full) {
  49. return "<span class='label label-sm label-info arrowed arrowed-righ'>Sold</span>"
  50. }
  51. },
  52. {
  53. "mDataProp" : "createTime",
  54. "mRender" : function(data, type, full) {
  55. 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>"
  56. }
  57. } ],
  58. "aoColumnDefs" : [ {//用来设置列一些特殊列的属性
  59. "bSortable" : false,
  60. "aTargets" : [ 0 ]
  61. //第一列不排序
  62. }, {
  63. "bSortable" : false,
  64. "aTargets" : [ 5 ]
  65. }, {
  66. "bSortable" : false,
  67. "aTargets" : [ 6 ]
  68. } ],
  69. "oLanguage" : {//语言设置
  70. "sProcessing" : "处理中...",
  71. "sLengthMenu" : "显示 _MENU_ 项结果",
  72. "sZeroRecords" : "没有匹配结果",
  73. "sInfo" : "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
  74. "sInfoEmpty" : "显示第 0 至 0 项结果,共 0 项",
  75. "sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
  76. "sInfoPostFix" : "",
  77. "sSearch" : "搜索:",
  78. "sUrl" : "",
  79. "sEmptyTable" : "表中数据为空",
  80. "sLoadingRecords" : "载入中...",
  81. "sInfoThousands" : ",",
  82. "oPaginate" : {
  83. "sFirst" : "首页",
  84. "sPrevious" : "上页",
  85. "sNext" : "下页",
  86. "sLast" : "末页"
  87. },
  88. "oAria" : {
  89. "sSortAscending" : ": 以升序排列此列",
  90. "sSortDescending" : ": 以降序排列此列"
  91. }
  92. }
  93. });
  94. //全选
  95. $('table th input:checkbox').on(
  96. 'click',
  97. function() {
  98. var that = this;
  99. $(this).closest('table').find(
  100. 'tr > td:first-child input:checkbox').each(
  101. function() {
  102. this.checked = that.checked;
  103. $(this).closest('tr').toggleClass('selected');
  104. });
  105. });
  106. });
  107. </script>
复制代码

后台代码:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。

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

引用 js文件

  1. <script src="static/ace/js/jquery-2.0.3.min.js"></script>
复制代码
  1. <script src="static/ace/js/jquery.dataTables.min.js"></script>
  2. <script src="static/ace/js/jquery.dataTables.bootstrap.js"></script>
复制代码

添加一个table 标签,



回复

使用道具 举报