Bootstrap table學習筆記（2） 前後端分頁模糊查詢，bootstrap學習筆記

Bootstrap table學習筆記（2） 前後端分頁模糊查詢，bootstrap學習筆記

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

1、前端分頁
2、後端分頁
3、模糊查詢

前端分頁相當簡單，在我添加了2w條測試資料的時候開啟的很流暢，沒有卡頓。

$(function(){  a();});  function a () {    $('#yourtable').bootstrapTable({      url: "/user/getUserList/",      method:"post",      dataType: "json",      striped:true,//隔行變色      cache:false,  //是否使用緩衝      showColumns:false,// 列      pagination: true, //分頁      sortable: false, //是否啟用排序      singleSelect: false,      search:false, //顯示搜尋方塊      buttonsAlign: "right", //按鈕對齊      showRefresh:false,//是否顯示重新整理按鈕      sidePagination: "client", //用戶端處理分頁　服務端：server      pageNumber:"1",　　//啟用外掛程式時預設頁數      pageSize:"15",　　//啟用外掛程式是預設每頁的資料條數      pageList:[10, 25, 50, 100],　　//自訂每頁的數量      undefinedText:'--',　      uniqueId: "id", //每一行的唯一標識，一般為主鍵列      queryParamsType:'',      columns: [        {          title: 'ID',          field: 'id',          align: 'center',          valign: 'middle',        },        {          title: '使用者姓名',          field: 'name',          align: 'center',          valign: 'middle',        },        {          title: '性別',          field: 'sex',          align: 'center',        },        {          title: '使用者帳號',          field: 'username',          align: 'center',        },        {          title: '手機號',          field: 'phone',          align: 'center',        },        {          title: '郵箱',          field: 'email',          align: 'center',        },        {          title: '許可權',          field: 'rolename',          align: 'center',        },        {          title: '操作',          field: 'id',          align: 'center',          formatter:function(value,row,index){　　　　　　　　　　　　　　//value 能夠獲得當前列的值　　　　　　　　　　　　　　//====================================            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;          }        }      ]    });  }

考慮到以後的資料會越來越多，前端分頁在資料量大的情況下，明顯不能滿足要求，因此必須要做後端的分頁

首先：

sidePagination: "server",//伺服器分頁

queryParams: queryParams,//傳遞參數（*）

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

這裡傳入了每頁顯示的條數、以及當前的頁數。如果需要查詢，則需要傳入需要查詢的條件。

具體的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, //分頁      sortable: false,           //是否啟用排序      singleSelect: false,      search:false, //顯示搜尋方塊      buttonsAlign: "right", //按鈕對齊      showRefresh:false,//是否顯示重新整理按鈕      sidePagination: "server", //服務端處理分頁      pageNumber:"1",      pageSize:"15",      pageList:[10, 25, 50, 100],      undefinedText:'--',      uniqueId: "id", //每一行的唯一標識，一般為主鍵列      queryParamsType:'',      queryParams: queryParams,//傳遞參數（*）      columns: [        {          title: 'ID',          field: 'id',          align: 'center',          valign: 'middle',        },        {          title: '使用者姓名',          field: 'name',          align: 'center',          valign: 'middle',        },        {          title: '性別',          field: 'sex',          align: 'center',        },        {          title: '使用者帳號',          field: 'username',          align: 'center',        },        {          title: '手機號',          field: 'phone',          align: 'center',        },        {          title: '郵箱',          field: 'email',          align: 'center',        },        {          title: '許可權',          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;          }        }      ]    });    //得到查詢的參數    function queryParams (params) {      var temp = {  //這裡的鍵的名字和控制器的變數名必須一直，這邊改動，控制器也需要改成一樣的        pageSize: params.pageSize,  //頁面大小        pageNumber: params.pageNumber, //頁碼        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",　　//因為bootstap table使用的是ajax方式擷取資料，這時會將請求的content type預設設定為 text/plain，這樣在服務端直接通過 @RequestParam參數映射是擷取不到的。
以及：

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">手機號：</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="">---請選擇---</option><option value="男">男</option><option value="女">女</option></select>        </div>      </div>      <div class="panel-body search_box">        <div class="search_div">          <label for="search_name">使用者帳號：</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>

不論是初始化表格還是搜尋的時候傳入背景資料如下：

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

返回資料：

我們要返回兩個值： rows     total

rows:我們查詢到的資料　　

total:資料總數（此總數指的是所有資料的總數，並不是單頁的數量，比如說我有user表中有100條資料，我的limit 0,15，所以我的rows中有15條資料，但是total=100）

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

有了total總數，加上之前的pageSize以及rows，bootStraptable會為我們自動產生和分頁有關的元素：

：

 以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。