Bootstrap table學(xué)習(xí)筆記（2）前后端分頁(yè)模糊查詢

更新時(shí)間：2017年05月18日 09:07:17 作者：鄧曉暉

這篇文章主要為大家分享了Bootstrap table學(xué)習(xí)筆記，前后端分頁(yè)模糊查詢，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在使用過(guò)程中，一邊看文檔一邊做，遇到了一些困難的地方，在此記錄一下，順便做個(gè)總結(jié)：

1、前端分頁(yè)
2、后端分頁(yè)
3、模糊查詢

前端分頁(yè)相當(dāng)簡(jiǎn)單，在我添加了2w條測(cè)試數(shù)據(jù)的時(shí)候打開的很流暢，沒(méi)有卡頓。

$(function(){
  a();

});
  function a () {
    $('#yourtable').bootstrapTable({
      url: "/user/getUserList/",
      method:"post",
      dataType: "json",
      striped:true,//隔行變色
      cache:false,  //是否使用緩存
      showColumns:false,// 列
      pagination: true, //分頁(yè)
      sortable: false, //是否啟用排序
      singleSelect: false,
      search:false, //顯示搜索框
      buttonsAlign: "right", //按鈕對(duì)齊方式
      showRefresh:false,//是否顯示刷新按鈕
      sidePagination: "client", //客戶端處理分頁(yè)　服務(wù)端：server
      pageNumber:"1",　　//啟用插件時(shí)默認(rèn)頁(yè)數(shù)
      pageSize:"15",　　//啟用插件是默認(rèn)每頁(yè)的數(shù)據(jù)條數(shù)
      pageList:[10, 25, 50, 100],　　//自定義每頁(yè)的數(shù)量
      undefinedText:'--',　
      uniqueId: "id", //每一行的唯一標(biāo)識(shí)，一般為主鍵列
      queryParamsType:'',
      columns: [
        {
          title: 'ID',
          field: 'id',
          align: 'center',
          valign: 'middle',
        },
        {
          title: '用戶姓名',
          field: 'name',
          align: 'center',
          valign: 'middle',
        },
        {
          title: '性別',
          field: 'sex',
          align: 'center',
        },
        {
          title: '用戶賬號(hào)',
          field: 'username',
          align: 'center',
        },
        {
          title: '手機(jī)號(hào)',
          field: 'phone',
          align: 'center',
        },
        {
          title: '郵箱',
          field: 'email',
          align: 'center',
        },
        {
          title: '權(quán)限',
          field: 'rolename',
          align: 'center',
        },
        {
          title: '操作',
          field: 'id',
          align: 'center',
          formatter:function(value,row,index){
　　　　　　　　　　　　　　//value 能夠獲得當(dāng)前列的值
　　　　　　　　　　　　　　//====================================

            var e = '<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\''+ row.id + '\')">編輯</button> ';
            var d = '<button href="#" class="btn btn-default" mce_href="#" onclick="del(\''+ row.id +'\')">刪除</button> ';
            return e+d;
          }
        }
      ]
    });

  }

考慮到以后的數(shù)據(jù)會(huì)越來(lái)越多，前端分頁(yè)在數(shù)據(jù)量大的情況下，明顯不能滿足要求，因此必須要做后端的分頁(yè)

首先：

sidePagination: "server",//服務(wù)器分頁(yè)

queryParams: queryParams,//傳遞參數(shù)（*）

//得到查詢的參數(shù)
    function queryParams (params) {
      var temp = {  //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的
        pageSize: params.pageSize,  //頁(yè)面大小
        pageNumber: params.pageNumber, //頁(yè)碼
        username: $("#search_username").val(),
        name:$("#search_name").val(),
        sex:$("#search_sex").val(),
        phone:$("#search_mobile").val(),
        email:$("#search_email").val(),
      };
      return temp;
    };

這里傳入了每頁(yè)顯示的條數(shù)、以及當(dāng)前的頁(yè)數(shù)。如果需要查詢，則需要傳入需要查詢的條件。

具體的js如下：

$(function(){
  a();

});
  function a () {
    $('#userListTable').bootstrapTable({
      url: "/user/getUserList/",
      method:"post",
      dataType: "json",
      contentType: "application/x-www-form-urlencoded",
      striped:true,//隔行變色
      cache:false,  //是否使用緩存
      showColumns:false,// 列
      toobar:'#toolbar',
      pagination: true, //分頁(yè)
      sortable: false,           //是否啟用排序
      singleSelect: false,
      search:false, //顯示搜索框
      buttonsAlign: "right", //按鈕對(duì)齊方式
      showRefresh:false,//是否顯示刷新按鈕
      sidePagination: "server", //服務(wù)端處理分頁(yè)
      pageNumber:"1",
      pageSize:"15",
      pageList:[10, 25, 50, 100],
      undefinedText:'--',
      uniqueId: "id", //每一行的唯一標(biāo)識(shí)，一般為主鍵列
      queryParamsType:'',
      queryParams: queryParams,//傳遞參數(shù)（*）
      columns: [
        {
          title: 'ID',
          field: 'id',
          align: 'center',
          valign: 'middle',
        },
        {
          title: '用戶姓名',
          field: 'name',
          align: 'center',
          valign: 'middle',
        },
        {
          title: '性別',
          field: 'sex',
          align: 'center',
        },
        {
          title: '用戶賬號(hào)',
          field: 'username',
          align: 'center',
        },
        {
          title: '手機(jī)號(hào)',
          field: 'phone',
          align: 'center',
        },
        {
          title: '郵箱',
          field: 'email',
          align: 'center',
        },
        {
          title: '權(quán)限',
          field: 'rolename',
          align: 'center',
        },
        {
          title: '操作',
          field: 'id',
          align: 'center',
          formatter:function(value,row,index){
            var e = '<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\''+ row.id + '\')">編輯</button> ';
            var d = '<button href="#" class="btn btn-default" mce_href="#" onclick="del(\''+ row.id +'\')">刪除</button> ';
            return e+d;
          }
        }
      ]
    });

    //得到查詢的參數(shù)
    function queryParams (params) {
      var temp = {  //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的
        pageSize: params.pageSize,  //頁(yè)面大小
        pageNumber: params.pageNumber, //頁(yè)碼
        username: $("#search_username").val(),
        name:$("#search_name").val(),
        sex:$("#search_sex").val(),
        phone:$("#search_mobile").val(),
        email:$("#search_email").val(),
      };
      return temp;
    };
  }

//搜索
function serachUser() {
  $("#userListTable").bootstrapTable('refresh');
}

*值得注意的是：

contentType: "application/x-www-form-urlencoded",　　//因?yàn)閎ootstap table使用的是ajax方式獲取數(shù)據(jù)，這時(shí)會(huì)將請(qǐng)求的content type默認(rèn)設(shè)置為 text/plain，這樣在服務(wù)端直接通過(guò) @RequestParam參數(shù)映射是獲取不到的。
以及：

HTML:

<div id="page-content" class="animated fadeInRight">
  <div class="col-sm-4 col-md-3 col-lg-3" style="width: 100%;">
    <form  id="search_User">
      <div class="panel-body search_box">
        <div class="search_div">
          <label for="search_name">用戶姓名：</label>
          <input type="text" class="form-control" id="search_name" name="UserV2.name" >
        </div>
        <div class="search_div">
          <label for="search_mobile">手機(jī)號(hào)：</label>
          <input type="text" class="form-control" id="search_mobile" name="UserV2.phone" >
        </div>
        <div class="search_div">
          <label for="search_sex">性別：</label>
          <select class="form-control" id="search_sex" name="UserV2.sex"><option value="">---請(qǐng)選擇---</option><option value="男">男</option><option value="女">女</option></select>
        </div>
      </div>
      <div class="panel-body search_box">
        <div class="search_div">
          <label for="search_name">用戶賬號(hào)：</label>
          <input type="text" class="form-control" id="search_username" name="UserV2.username" >
        </div>
        <div class="search_div">
          <label for="search_name">用戶Email：</label>
          <input type="text" class="form-control" id="search_email" name="UserV2.email" >
        </div>
        <div class="search_div" style="text-align: center;">
          <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="serachUser()"/>
        </div>
      </div>
    </form>
  </div>
  <table id="userListTable" ></table>
</div>

不論是初始化表格還是搜索的時(shí)候傳入后臺(tái)的數(shù)據(jù)如下：

pageSize=15 pageNumber=1 username= name= sex= phone= email=

返回?cái)?shù)據(jù)：

我們要返回兩個(gè)值： rows total

rows:我們查詢到的數(shù)據(jù)　　

total:數(shù)據(jù)總數(shù)（此總數(shù)指的是所有數(shù)據(jù)的總數(shù)，并不是單頁(yè)的數(shù)量，比如說(shuō)我有user表中有100條數(shù)據(jù)，我的limit 0,15，所以我的rows中有15條數(shù)據(jù)，但是total=100）

{
  "total": 2,
  "rows": [
    {
      "email": "39385908@qq.com",
      "id": 1,
      "name": "鄧某某",
      "password": "",
      "phone": "12345678911",
      "rolename": "平臺(tái)管理員",
      "sex": "男",
      "username": "admin"
    },
    {
      "email": "2222@222.com",
      "id": 8,
      "name": "王小二1",
      "password": "",
      "phone": "13245678910",
      "rolename": "",
      "sex": "男",
      "username": "admin2"
    }
  ]
}

有了total總數(shù)，加上之前的pageSize以及rows，bootStraptable會(huì)為我們自動(dòng)生成和分頁(yè)有關(guān)的元素：

效果圖：