bootstrap-table配合bootstrap-paginator使用

标签（空格分隔）： bootstrap

---

需求：请求数据不想使用bootstrap-table自带的请求数据，想使用自己封装的ajax函数请求。分页要配合bootstrap-paginator使用。

1）html页面中引入jquery和bootstrap-table.js以及bootstrap-paginator.js
2）js中调用的时候，初始化表格数据，初始化表格结构，初始化分页
3）分页控件调用的是初始化表格数据

主要代码如下
html

   

    
共0个案件
    

js

  $("#seek").click(function () {
    loadTableData(1);//初始化表格数据
    showTable(caseSubArr);//初始化表格结构
    initPage(caseSubTotal, subLineCount);//初始化分页
  })

//请求表格数据
 function loadTableData(pageNo) {
    var url = urlKeyList.epvlCaseService.getCaseCondition;
    var caseSubContent = getSubParams(pageNo);
    sendRequest(false, "POST", url, caseSubContent, function (responseText) {
      var dstJson = JSON.parse(responseText);
      if (dstJson.result === 0) {
        theres = 0;
        caseSubArr = dstJson.para;
        // caseSubTable(caseSubArr);
        $('#addSubCaseTable').bootstrapTable("load", caseSubArr);
      } else {
        alertModal(1, dstJson.desc);
        return;
      }
    });
    return caseSubArr;
  }
  //加载表格结构
   function showTable(caseSubArr) {
    $('#table').bootstrapTable({
      data: caseSubArr,
      contentType: 'application/json;charset=UTF-8',
      height: 452,
      clickToSelect: true,
      singleSelect: true,
      pagination: false,
      sidePagination: "client",
      paginationPreText: "<",
      paginationNextText: ">",
      pageSize: subLineCount,
      paginationLoop: false,
      columns: [{
          checkbox: true,
        },
        {
          title: "序号",
          width: "45px",
          formatter: function (value, row, index) {
            return index + 1;
          }
        },
        {
          field: 'name',
          title: '案件名称',
        },
        {
          field: 'policePlatNo',
          title: '案件编号',
          formatter: function (value, row, index) {
            return "" + value.replace(/\'/g, "´") + "";
          }
        }, {
          field: 'caseType',
          title: '案件类型',
        }, {
          field: 'startTime',
          title: '案发时间',
        }, {
          field: 'operation',
          title: '操作',
          align: 'center',
          formatter: function (value, row, index) {
            var d = '';
            return d;
          }
        }
      ],
      formatNoMatches: function () {
        return "没有相关的匹配结果";
      },
      formatLoadingMessage: function () {
        return "请稍等，正在加载中...";
      },
      formatShowingRows: function (a, b, c) {
        //   return "当前显示第 " + a + "条到第 " + b + " 条记录，总共 " + c + " 条记录";
        return "共 " + c + " 条记录";
      },
      formatRecordsPerPage: function (a) {
        //   return "每页显示 " + a + " 条记录";
      },
      onLoadSuccess: function (row) {},
      onClickRow: function (row, $element) {
        curSubData = row;
      },
      onLoadError: function (errorCode) {}
    });

  }
//初始化分页
 function initPage(caseSubTotal, subLineCount) {
    $('#pageId').bootstrapPaginator({
      currentPage: 1, //当前的请求页面。
      totalPages: caseSubTotal <= subLineCount ? 1 : Math.ceil(caseSubTotal / subLineCount), //一共多少页。
      size: "normal", //应该是页眉的大小。
      bootstrapMajorVersion: 3, //bootstrap的版本要求。
      alignment: "right",
      numberOfPages: 5, //一页列出多少数据。
      itemTexts: function (type, page, current) { //如下的代码是将页眉显示的中文显示我们自定义的中文。
        switch (type) {
          case "first":
            return ""; //首页    
          case "prev":
            return "<"; //上一页  
          case "next":
            return ">"; //下一页        
          case "last":
            return ""; //末页         
          case "page":
            return page;
        }
      },
      shouldShowPage: function (type, page, current) {
        var result = 0;
        if (caseSubTotal > subLineCount) {
          switch (type) {
            case "first":
              result = 0;
              break;
            case "prev":
              result = 1;
              break;
            case "next":
              result = 1; //current !== this.totalPages;
              break;
            case "last":
              result = 0;
              break;
            case "page":
              result = !0;
          }
        }
        return result;
      },
      onPageClicked: function (event, originalEvent, type, page) {
        loadTableData(page);
      }
    });
  }