91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Bootstrap table如何實現服務器端分頁功能

發布時間:2020-07-20 11:57:51 來源:億速云 閱讀:451 作者:小豬 欄目:web開發

這篇文章主要為大家展示了Bootstrap table如何實現服務器端分頁功能,內容簡而易懂,希望大家可以學習一下,學習完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。

本文實例講述了Bootstrap table 服務器端分頁功能實現方法。分享給大家供大家參考,具體如下:

bootstrap版本 為 3.X

bootstrap-table.min.css
bootstrap-table-zh-CN.min.js
bootstrap-table.min.js

前端bootstrap+jQuery,服務端使用spring MVC實現restful風格服務

前端代碼塊

<table id="test-table" class="col-xs-12" data-toolbar="#toolbar">
function initTable(){
  $('#test-table').bootstrapTable({
    method: 'get',
    toolbar: '#toolbar',  //工具按鈕用哪個容器
    striped: true,   //是否顯示行間隔色
    cache: false,   //是否使用緩存,默認為true,所以一般情況下需要設置一下這個屬性(*)
    pagination: true,   //是否顯示分頁(*)
    sortable: false,   //是否啟用排序
    sortOrder: "asc",   //排序方式
    pageNumber:1,   //初始化加載第一頁,默認第一頁
    pageSize: 10,   //每頁的記錄行數(*)
    pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*)
    url: "/testProject/page4list.json",//這個接口需要處理bootstrap table傳遞的固定參數
    queryParamsType:'', //默認值為 'limit' ,在默認情況下 傳給服務端的參數為:offset,limit,sort
              // 設置為 '' 在這種情況下傳給服務器的參數為:pageSize,pageNumber

    //queryParams: queryParams,//前端調用服務時,會默認傳遞上邊提到的參數,如果需要添加自定義參數,可以自定義一個函數返回請求參數
    sidePagination: "server",  //分頁方式:client客戶端分頁,server服務端分頁(*)
    //search: true,   //是否顯示表格搜索,此搜索是客戶端搜索,不會進服務端,所以,個人感覺意義不大
    strictSearch: true,
    //showColumns: true,   //是否顯示所有的列
    //showRefresh: true,   //是否顯示刷新按鈕
    minimumCountColumns: 2,  //最少允許的列數
    clickToSelect: true,  //是否啟用點擊選中行
    searchOnEnterKey: true,
    columns: [{
      field: 'id',
      title: 'id',
      align: 'center'
    }, {
      field: 'testkey',
      title: '測試標識',
      align: 'center'
    }, {
      field: 'testname',
      title: '測試名字',
      align: 'center'
    },{
      field: 'id',
      title: '操作',
      align: 'center',
      formatter:function(value,row,index){
        //通過formatter可以自定義列顯示的內容
        //value:當前field的值,即id
        //row:當前行的數據
        var a = '<a href="" >測試</a>';
      } 
    }],
    pagination:true
  });
}

在前端通過請求獲取table數據時,bootstrap table會默認拼一個 searchText的參數,來支持查詢功能。

服務端代碼

  @RequestMapping(value = "/page4list.json")
  public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request,
      HttpServletResponse response) {

    //搜索框功能
    //當查詢條件中包含中文時,get請求默認會使用ISO-8859-1編碼請求參數,在服務端需要對其解碼
    if (null != searchText) {
      try {
        searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8");
      } catch (Exception e) {
        e.printStackTrace();
      }
    }
    //在service通過條件查詢獲取指定頁的數據的list
    List<MwmsgType> list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText);
    //根據查詢條件,獲取符合查詢條件的數據總量
    int total = mwMsgQueueService.queryCountBySearchText(searchText);
    //自己封裝的數據返回類型,bootstrap-table要求服務器返回的json數據必須包含:totlal,rows兩個節點
    PageResultForBootstrap page = new PageResultForBootstrap();
    page.setTotal(total);
    page.setRows(list);
    //page就是最終返回給客戶端的數據結構,可以直接返回給前端

    //下邊這段,只是我自己的代碼有自定義的spring HandlerInterceptor處理返回值,可以忽略。
    request.setAttribute(Constants.pageResultData, page);

  }

完成上述代碼,即可實現服務器端自動分頁,bootstrap-table根據服務器端返回的total,以及table設定的pageSize,自動生成分頁的頁面元素,每次點擊下一頁或者指定頁碼,bootstrap-table會自動給參數pageNumber賦值,服務器返回指定頁的數據。

如果發送的是post請求,因為bootstap table使用的是ajax方式獲取數據,這時會將請求的content type默認設置為 text/plain,這樣在服務端直接通過 @RequestParam參數映射是獲取不到的。

這時就需要在bootstrap-table的參數列表中顯式設置

contentType: "application/x-www-form-urlencoded"

設置成form表單的形式,tomcat內部就會自動將requset payload中的數據部分解析放到request.getParameter()中,之后就可以直接通過@RequestParam映射參數獲取

以上就是關于Bootstrap table如何實現服務器端分頁功能的內容,如果你們有學習到知識或者技能,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

墨江| 浦城县| 泰宁县| 邯郸市| 连山| 泸西县| 乐安县| 津南区| 香格里拉县| 阜新| 新乡市| 天津市| 沂南县| 宁蒗| 新建县| 大姚县| 宕昌县| 土默特左旗| 祥云县| 综艺| 阿拉善左旗| 凤翔县| 庄浪县| 玛多县| 尉犁县| 恩平市| 花垣县| 祁东县| 固镇县| 克什克腾旗| 金湖县| 阿图什市| 三原县| 滕州市| 昌平区| 铜梁县| 武宁县| 中西区| 朝阳市| 措美县| 安国市|