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

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

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站制作、潁東網(wǎng)絡(luò)推廣、重慶小程序開(kāi)發(fā)、潁東網(wǎng)絡(luò)營(yíng)銷、潁東企業(yè)策劃、潁東品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供潁東建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

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

前端分頁(yè)相當(dāng)簡(jiǎn)單，在我添加了2w條測(cè)試數(shù)據(jù)的時(shí)候打開(kāi)的很流暢，沒(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ù)映射是獲取不到的。
以及：

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

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">手機(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" >
          <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)的元素：

效果圖：

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

 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：Bootstraptable學(xué)習(xí)筆記（2）前后端分頁(yè)模糊查詢
轉(zhuǎn)載注明：http://muchs.cn/article22/jpjdjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、網(wǎng)站導(dǎo)航、網(wǎng)頁(yè)設(shè)計(jì)公司、軟件開(kāi)發(fā)、企業(yè)網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司