亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Bootstrap table 服務(wù)器端分頁(yè)功能實(shí)現(xiàn)方法示例

 更新時(shí)間:2020年06月01日 11:42:26   作者:閃電Wade  
這篇文章主要介紹了Bootstrap table 服務(wù)器端分頁(yè)功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了Bootstrap table 服務(wù)器端后臺(tái)交互與分頁(yè)功能相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Bootstrap table 服務(wù)器端分頁(yè)功能實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:

bootstrap版本 為 3.X

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

前端bootstrap+jQuery,服務(wù)端使用spring MVC實(shí)現(xiàn)restful風(fēng)格服務(wù)

前端代碼塊

<table id="test-table" class="col-xs-12" data-toolbar="#toolbar">

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

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

在前端通過(guò)請(qǐng)求獲取table數(shù)據(jù)時(shí),bootstrap table會(huì)默認(rèn)拼一個(gè) searchText的參數(shù),來(lái)支持查詢功能。

服務(wù)端代碼

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

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

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

  }

完成上述代碼,即可實(shí)現(xiàn)服務(wù)器端自動(dòng)分頁(yè),bootstrap-table根據(jù)服務(wù)器端返回的total,以及table設(shè)定的pageSize,自動(dòng)生成分頁(yè)的頁(yè)面元素,每次點(diǎn)擊下一頁(yè)或者指定頁(yè)碼,bootstrap-table會(huì)自動(dòng)給參數(shù)pageNumber賦值,服務(wù)器返回指定頁(yè)的數(shù)據(jù)。

如果發(fā)送的是post請(qǐng)求,因?yàn)閎ootstap table使用的是ajax方式獲取數(shù)據(jù),這時(shí)會(huì)將請(qǐng)求的content type默認(rèn)設(shè)置為 text/plain,這樣在服務(wù)端直接通過(guò) @RequestParam參數(shù)映射是獲取不到的。

這時(shí)就需要在bootstrap-table的參數(shù)列表中顯式設(shè)置

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

設(shè)置成form表單的形式,tomcat內(nèi)部就會(huì)自動(dòng)將requset payload中的數(shù)據(jù)部分解析放到request.getParameter()中,之后就可以直接通過(guò)@RequestParam映射參數(shù)獲取
post的處理參考了下面這個(gè)哥們的博文,在此感謝!

參考鏈接:
http://chabaoo.cn/article/129039.htm

PS:關(guān)于bootstrap布局,這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用:

在線bootstrap可視化布局編輯工具:
http://tools.jb51.net/aideddesign/layoutit

希望本文所述對(duì)大家基于bootstrap的程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論