溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

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

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

發(fā)布時間：2020-08-26 11:40:37 來源：腳本之家 閱讀：193 作者：鄧曉暉 欄目：web開發(fā)

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

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

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

$(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", //客戶端處理分頁　服務(wù)端：server
      pageNumber:"1",　　//啟用插件時默認頁數(shù)
      pageSize:"15",　　//啟用插件是默認每頁的數(shù)據(jù)條數(shù)
      pageList:[10, 25, 50, 100],　　//自定義每頁的數(shù)量
      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: '權(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ù)會越來越多，前端分頁在數(shù)據(jù)量大的情況下，明顯不能滿足要求，因此必須要做后端的分頁

首先：

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

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

//得到查詢的參數(shù)
    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;
    };

這里傳入了每頁顯示的條數(shù)、以及當(dāng)前的頁數(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, //分頁
      sortable: false,           //是否啟用排序
      singleSelect: false,
      search:false, //顯示搜索框
      buttonsAlign: "right", //按鈕對齊方式
      showRefresh:false,//是否顯示刷新按鈕
      sidePagination: "server", //服務(wù)端處理分頁
      pageNumber:"1",
      pageSize:"15",
      pageList:[10, 25, 50, 100],
      undefinedText:'--',
      uniqueId: "id", //每一行的唯一標識，一般為主鍵列
      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: '用戶賬號',
          field: 'username',
          align: 'center',
        },
        {
          title: '手機號',
          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 = {  //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
        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方式獲取數(shù)據(jù)，這時會將請求的content type默認設(shè)置為 text/plain，這樣在服務(wù)端直接通過 @RequestParam參數(shù)映射是獲取不到的。
以及：

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

HTML:

<div id="page-content" class="animated fadeInRight">
  <div class="col-sm-4 col-md-3 col-lg-3" >
    <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" >
          <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="serachUser()"/>
        </div>
      </div>
    </form>
  </div>
  <table id="userListTable" ></table>
</div>

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

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

返回數(shù)據(jù)：

我們要返回兩個值： rows     total

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

total:數(shù)據(jù)總數(shù)（此總數(shù)指的是所有數(shù)據(jù)的總數(shù)，并不是單頁的數(shù)量，比如說我有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": "平臺管理員",
      "sex": "男",
      "username": "admin"
    },
    {
      "email": "2222@222.com",
      "id": 8,
      "name": "王小二1",
      "password": "",
      "phone": "13245678910",
      "rolename": "",
      "sex": "男",
      "username": "admin2"
    }
  ]
}

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

效果圖：

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

 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手