這篇文章主要為大家展示了“jquery中dataTable后臺(tái)加載數(shù)據(jù)并分頁(yè)的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jquery中dataTable后臺(tái)加載數(shù)據(jù)并分頁(yè)的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)專(zhuān)家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷(xiāo)，專(zhuān)業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、電商網(wǎng)站制作開(kāi)發(fā)、微信小程序開(kāi)發(fā)、微信營(yíng)銷(xiāo)、系統(tǒng)平臺(tái)開(kāi)發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開(kāi)發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷(xiāo)的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評(píng)估并優(yōu)化我們的方案，為客戶(hù)提供全方位的互聯(lián)網(wǎng)品牌整合方案！

使用 dataTable后臺(tái)加載數(shù)據(jù)并分頁(yè)。網(wǎng)上版本很多，但很多都是不能用或者不詳細(xì)的，這里是已經(jīng)驗(yàn)證過(guò)的。

引用 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>

添加一個(gè)table 標(biāo)簽，<tbody></tbody> 可以不用，可以動(dòng)態(tài)加載

<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>名稱(chēng)</th> 
        <th>apiKey</th> 
        <th>secretKey</th> 
        <th><i class="icon-time bigger-110 hidden-480"></i> 創(chuàng)建時(shí)間</th> 
        <th class="hidden-480">Status</th> 
        <th>操作</th> 
      </tr> 
    </thead> 
 
  </table>

關(guān)鍵的JS代碼：

<script type="text/javascript"> 
  jQuery(function($) { 
 
    //初始化table 
    var oTable1 = $('#sample-table-2') 
        .dataTable( 
            { 
              "bPaginate" : true,//分頁(yè)工具條顯示 
              //"sPaginationType" : "full_numbers",//分頁(yè)工具條樣式 
              "bStateSave" : true, //是否打開(kāi)客戶(hù)端狀態(tài)記錄功能,此功能在ajax刷新紀(jì)錄的時(shí)候不會(huì)將個(gè)性化設(shè)定回復(fù)為初始化狀態(tài)  
              "bScrollCollapse" : true, //當(dāng)顯示的數(shù)據(jù)不足以支撐表格的默認(rèn)的高度 
              "bLengthChange" : true, //每頁(yè)顯示的記錄數(shù) 
              "bFilter" : false, //搜索欄 
              "bSort" : true, //是否支持排序功能 
              "bInfo" : true, //顯示表格信息 
              "bAutoWidth" : true, //自適應(yīng)寬度 
              "bJQueryUI" : false,//是否開(kāi)啟主題 
              "bDestroy" : true, 
              "bProcessing" : true, //開(kāi)啟讀取服務(wù)器數(shù)據(jù)時(shí)顯示正在加載中……特別是大數(shù)據(jù)量的時(shí)候，開(kāi)啟此功能比較好 
              "bServerSide" : true,//服務(wù)器處理分頁(yè)，默認(rèn)是false，需要服務(wù)器處理，必須true 
              "sAjaxDataProp" : "aData",//是服務(wù)器分頁(yè)的標(biāo)志，必須有  
              "sAjaxSource" : "${basePath}pushEntity/getTableData",//通過(guò)ajax實(shí)現(xiàn)分頁(yè)的url路徑。  
              "aoColumns" : [//初始化要顯示的列 
                  { 
                    "mDataProp" : "id",//獲取列數(shù)據(jù)，跟服務(wù)器返回字段一致 
                    "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)//處理時(shí)間顯示 
                      .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" : [ {//用來(lái)設(shè)置列一些特殊列的屬性 
                "bSortable" : false, 
                "aTargets" : [ 0 ] 
              //第一列不排序 
              }, { 
                "bSortable" : false, 
                "aTargets" : [ 5 ] 
              }, { 
                "bSortable" : false, 
                "aTargets" : [ 6 ] 
              } ], 
              "oLanguage" : {//語(yǔ)言設(shè)置 
                "sProcessing" : "處理中...", 
                "sLengthMenu" : "顯示 _MENU_ 項(xiàng)結(jié)果", 
                "sZeroRecords" : "沒(méi)有匹配結(jié)果", 
                "sInfo" : "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)", 
                "sInfoEmpty" : "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)", 
                "sInfoFiltered" : "(由 _MAX_ 項(xiàng)結(jié)果過(guò)濾)", 
                "sInfoPostFix" : "", 
                "sSearch" : "搜索:", 
                "sUrl" : "", 
                "sEmptyTable" : "表中數(shù)據(jù)為空", 
                "sLoadingRecords" : "載入中...", 
                "sInfoThousands" : ",", 
                "oPaginate" : { 
                  "sFirst" : "首頁(yè)", 
                  "sPrevious" : "上頁(yè)", 
                  "sNext" : "下頁(yè)", 
                  "sLast" : "末頁(yè)" 
                }, 
                "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>

后臺(tái)代碼：

   // 獲取前端過(guò)來(lái)的參數(shù),下面三個(gè)參數(shù)是 dataTable默認(rèn)的，不要隨便更改 
    Integer sEcho = Integer.valueOf(params.get("sEcho"));// 記錄操作的次數(shù) 每次加1 
    Integer iDisplayStart = Integer.valueOf(params.get("iDisplayStart"));// 起始 
    Integer iDisplayLength = Integer.valueOf(params.get("iDisplayLength"));// 每頁(yè)顯示的size 
 
    Map<String, Object> map = new HashMap<String, Object>(); 
    try { 
      // 查詢(xún)數(shù)據(jù),分頁(yè)的話(huà)我這邊使用的是 PageHelper，這邊不介紹了 
      PagedResult<PushEntity> list = pushEntityService.findByUserId( 
          pushUser.getId(), iDisplayStart, iDisplayLength); 
 
      // 為操作次數(shù)加1，必須這樣做 
      int initEcho = sEcho + 1;

  //返回參數(shù)也是固定的 
      map.put("sEcho", initEcho); 
      map.put("iTotalRecords", list.getTotal());//數(shù)據(jù)總條數(shù) 
      map.put("iTotalDisplayRecords", list.getTotal());//顯示的條數(shù) 
      map.put("aData", list.getDataList());//數(shù)據(jù)集合 
    } catch (Exception e) { 
      e.printStackTrace(); 
    } 
 
    return map;

以上是“jquery中dataTable后臺(tái)加載數(shù)據(jù)并分頁(yè)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)名稱(chēng)：jquery中dataTable后臺(tái)加載數(shù)據(jù)并分頁(yè)的示例分析
網(wǎng)頁(yè)鏈接：http://www.chinadenli.net/article38/jogdpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、域名注冊(cè)、Google、電子商務(wù)、品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)