jquery dataTable은 백그라운드 및 페이징에서 데이터를 로드합니다.-JS 튜토리얼-php.cn

jquery dataTable은 백그라운드 및 페이징에서 데이터를 로드합니다.

小云云

풀어 주다： 2018-01-10 10:26:29

원래의

4731명이 탐색했습니다.

이 기사에서는 특정 참조 값이 있는 jquery dataTable 백그라운드 로딩 데이터와 페이징 예제 코드를 주로 소개합니다. 관심이 있으시면 모두에게 도움이 되기를 바랍니다.

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 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 = $(&#39;#sample-table-2&#39;) 
        .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=&#39;checkbox&#39; class=&#39;ace&#39; /><span class=&#39;lbl&#39;></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=&#39;label label-sm label-info arrowed arrowed-righ&#39;>Sold</span>" 
                    } 
                  }, 
                  { 
                    "mDataProp" : "createTime", 
                    "mRender" : function(data, type, full) { 
                      return "<p class=&#39;visible-md visible-lg hidden-sm hidden-xs action-buttons&#39;><a class=&#39;blue&#39; href=&#39;#&#39;><i class=&#39;icon-zoom-in bigger-130&#39;></i></a><a class=&#39;green&#39; href=&#39;#&#39;><i class=&#39;icon-pencil bigger-130&#39;></i></a><a class=&#39;red&#39; href=&#39;#&#39;><i class=&#39;icon-trash bigger-130&#39;></i></a></p>" 
                    } 
                  } ], 
              "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" : ": 以降序排列此列" 
                } 
              } 
            }); 
 
    //全选 
    $(&#39;table th input:checkbox&#39;).on( 
        &#39;click&#39;, 
        function() { 
          var that = this; 
          $(this).closest(&#39;table&#39;).find( 
              &#39;tr > td:first-child input:checkbox&#39;).each( 
              function() { 
                this.checked = that.checked; 
                $(this).closest(&#39;tr&#39;).toggleClass(&#39;selected&#39;); 
              }); 
 
        }); 
 
  }); 
</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;

로그인 후 복사