bootstrap-table后端分頁功能完整實例

更新時間：2020年06月01日 10:45:39 作者：二萌偏

這篇文章主要介紹了bootstrap-table后端分頁功能,結(jié)合完整實例形式分析了bootstrap-table后端請求、數(shù)據(jù)分頁功能具體步驟與實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了bootstrap-table后端分頁功能。分享給大家供大家參考，具體如下：

使用bootstrap-table實現(xiàn)后臺分頁

插件資源點擊此處本站下載。

引用以下css

<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="../plugins/bootstrap-table/css/bootstrap-table.css" rel="external nofollow" >

引用以下js

<script src="../plugins/jQuery/jquery-1.12.4.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="../plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>

html

<table id="userTable" style="text-align: center;font-size: 14px;margin: auto;word-wrap:break-word; word-break:break-all" >
</table>

js代碼

$(function () {
  //初始化表格
  var oTable = new TableInit();
  oTable.Init();
});
 
function TableInit() {
 
  var oTableInit = new Object();
  //初始化Table
  oTableInit.Init = function () {
    $('#userTable').bootstrapTable({
      url: httpRequestUrl + '/admin/queryUserList',     //請求后臺的URL（*）
      method: 'POST',           //請求方式（*）
      striped: true,           //是否顯示行間隔色
      cache: false,            //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
      pagination: true,          //是否顯示分頁（*）
      sortOrder: "asc",          //排序方式
      queryParamsType: '',
      dataType: 'json',
      paginationShowPageGo: true,
      showJumpto: true,
      pageNumber: 1, //初始化加載第一頁，默認第一頁
      queryParams: queryParams,//請求服務器時所傳的參數(shù)
      sidePagination: 'server',//指定服務器端分頁
      pageSize: 10,//單頁記錄數(shù)
      pageList: [10, 20, 30, 40],//分頁步進值
      search: false, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
      silent: true,
      showRefresh: false,         //是否顯示刷新按鈕
      showToggle: false,
      minimumCountColumns: 2,       //最少允許的列數(shù)
      uniqueId: "id",           //每一行的唯一標識，一般為主鍵列
 
      columns: [{
        checkbox: true,
        visible: false
      }, {
        field: 'id',
        title: '序號',
        align: 'center',
        formatter: function (value, row, index) {
          return index + 1;
        }
      },
        {
          field: 'username',
          title: '用戶賬號',
          align: 'center',
          width: '230px'
        },
        {
          field: 'password',
          title: '用戶密碼',
          align: 'center'
        }, {
          field: 'startTime',
          title: '開始時間',
          align: 'center'
        }, {
          field: 'endTime',
          title: '結(jié)束時間',
          align: 'center'
        },
        {
          field: 'roleName',
          title: '用戶角色',
          align: 'center'
        }, {
          field: 'operation',
          title: '操作',
          align: 'center',
          events: operateEvents,//給按鈕注冊事件
          formatter: addFunctionAlty//表格中增加按鈕
        }],
      responseHandler: function (res) { //后臺返回的結(jié)果
        console.log(res);
        if(res.code == "666"){
          var userInfo = res.data.list;
          var NewData = [];
          if (userInfo.length) {
            for (var i = 0; i < userInfo.length; i++) {
              var dataNewObj = {
                'id': '',
                "username": '',
                'password': '',
                "startTime": '',
                'endTime': '',
                'roleName': '',
                'status': ''
              };
 
              dataNewObj.id = userInfo[i].id;
              dataNewObj.username = userInfo[i].username;
              dataNewObj.password = userInfo[i].password;
              dataNewObj.startTime = userInfo[i].startTime.replace(/-/g,'/');
              dataNewObj.endTime = userInfo[i].endTime.replace(/-/g,'/');
              dataNewObj.roleName = userInfo[i].roleName;
              dataNewObj.status = userInfo[i].status;
              NewData.push(dataNewObj);
            }
            console.log(NewData)
          }
          var data = {
            total: res.data.total,
            rows: NewData
          };
 
          return data;
        }
 
      }
 
    });
  };
 
  // 得到查詢的參數(shù)
  function queryParams(params) {
    var userName = $("#keyWord").val();
    console.log(userName);
    var temp = {  //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
      pageNum: params.pageNumber,
      pageSize: params.pageSize,
      username: userName
    };
    return JSON.stringify(temp);
  }
 
  return oTableInit;
}
 
// 表格中按鈕
function addFunctionAlty(value, row, index) {
  var btnText = '';
 
  btnText += "<button type=\"button\" id=\"btn_look\" οnclick=\"resetPassword(" + "'" + row.id + "'" + ")\" style='width: 77px;' class=\"btn btn-default-g ajax-link\">重置密碼</button>&nbsp;&nbsp;";
 
  btnText += "<button type=\"button\" id=\"btn_look\" οnclick=\"openCreateUserPage(" + "'" + row.id + "'" + "," + "'編輯')\" class=\"btn btn-default-g ajax-link\">編輯</button>&nbsp;&nbsp;";
 
  btnText += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"changeStatus(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">關閉</button>&nbsp;&nbsp;";
 
  btnText += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"deleteUser(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">刪除</button>&nbsp;&nbsp;";
 
  return btnText;
}
 
//刷新表格
function getUserList() {
  $("#userTable").bootstrapTable('refresh');
}

PS：關于bootstrap布局，這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用：

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

希望本文所述對大家基于bootstrap的程序設計有所幫助。

您可能感興趣的文章:

Js之軟鍵盤實現(xiàn)(js源碼)
Js之軟鍵盤實現(xiàn)(js源碼)...
2007-01-01
JavaScript安全加密之禁止別人調(diào)試自己的前端頁面代碼實現(xiàn)
這篇文章主要為大家介紹了JavaScript安全加密之如何禁止別人調(diào)試自己的前端頁面代碼實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
js 判斷附件后綴的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 判斷附件后綴的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
JavaScript引用類型Date常見用法實例分析
這篇文章主要介紹了JavaScript引用類型Date常見用法,結(jié)合實例形式分析了引用類型Date基本創(chuàng)建、參數(shù)使用及相關注意事項,需要的朋友可以參考下
2018-08-08
JS/jQuery實現(xiàn)獲取時間的方法及常用類完整示例
這篇文章主要介紹了JS/jQuery實現(xiàn)獲取時間的方法及常用類,結(jié)合完整實例形式分析了javascript針對日期時間的獲取、轉(zhuǎn)換、計算與檢測相關操作技巧,需要的朋友可以參考下
2019-03-03
JS實現(xiàn)回到頁面頂部動畫效果的簡單實例
下面小編就為大家?guī)硪黄狫S實現(xiàn)回到頁面頂部動畫效果的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
JavaScript撤銷恢復操作的實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript撤銷恢復操作的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2023-02-02
JS判斷輸入的字符串是否是數(shù)字的方法(正則表達式)
下面小編就為大家?guī)硪黄狫S判斷輸入的字符串是否是數(shù)字的方法(正則表達式)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
JS中async/await實現(xiàn)異步調(diào)用的方法
這篇文章主要介紹了async/await實現(xiàn)異步調(diào)用的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
javascript與CSS復習(三)
呵呵，又弄成了三部曲，這是最后一部分，關于鼠標和瀏覽器本身顯示上的一些屬性。
2010-06-06