BootStrap Table 은 server 페이지 번호 연속 표시 기능 을 실현 합 니 다(현재 페이지 는 이전 페이지 의 끝 번호 부터)

머리말

boottstrap table 을 사용 할 때 페이지 를 나 누 는 것 을 피하 기 어렵 습 니 다.페이지 를 나 누 는 것 은 두 가지 방식 을 제공 합 니 다.client 클 라 이언 트 페이지,server 서버 서버 서버 페이지 를 나 누 는 두 가지 방식 입 니 다.

프로젝트 에 서 는 클 라 이언 트 로 페이지 를 나 누 지 않 습 니 다.보통 표 의 데 이 터 량 이 많 고 클 라 이언 트 로 페이지 를 나 누 면 캐 시 폭발 이 발생 할 수 있 습 니 다.그래서 저 희 는 server 페이지 를 선택 합 니 다.

이 존재 하 는 것 이 합 리 적 이 고 client 도 사용 할 수 있 습 니 다(데이터 양 이 매우 적 을 때).server 방식 에 비해 페이지 번 호 는 자동 으로 연속 되 어 있 습 니 다.한편,server 방식 으로 페이지 를 나 누 는 번 호 는 연속 되 지 않 는 다.

원본 페이지 결과

client 페이지 를 나 누고 boottstrap table 의 formatter 중의 index 색인 값 을 사용 하면 번 호 를 연속 으로 할 수 있 습 니 다.위의 그림:

이것 은 1 페이지 의 번호 로 1-4 이다.

이것 은 2 페이지 의 번호 로 5-8 이다.

server 페이지 는 현재 페이지 의 위치 pageNumber 와 각 페이지 의 크기 pageSize 가 부족 하기 때문에 색인 값 을 확정 할 수 없습니다.formatter 로 index 를 되 돌려 주 는 것 은 현재 페이지 의 색인 만 있 습 니 다.

이것 은 server 페이지 의 1 페이지 이 고 번 호 는 1-4 이다.

이것 은 server 페이지 의 5 페이지 이 고 번호 도 1-4 이다.
해결 절차
이 문제 가 발생 한 이 유 는 무엇 입 니까?우리 가 사용 하 는 formatter 가 되 돌아 오 는 index 매개 변 수 는 표 의 색인 입 니 다.client 의 모든 n 개의 총 데 이 터 는 클 라 이언 트 에 있 습 니 다.index 는 1-n 이 고 server 페이지 는 서버 마다 현재 페이지 의 데이터 만 클 라 이언 트 에 되 돌아 오기 때문에 index 는 1-pageSize 만 있 고 pageSize 는 한 페이지 의 데이터 양 입 니 다.그래서 이 문제 가 생 겼 습 니 다.
server 서버 가 한 페이지 의 데이터 만 되 돌려 주 는 이유 로 페이지 를 넘 길 때마다 번호 가 1 부터 시작 되 는 문제 에 대해 서 는 서버 와 클 라 이언 트 의 페이지 데 이 터 를 연결 해 야 하기 때문에 우 리 는 원본 formatter 를 바탕 으로 수정 하여 이 인 자 를 전달 하면 ok 입 니 다.
먼저 boostrap table 의 js 소스 코드 를 보면 내부 함수 의 쓰기 방법 을 볼 수 있 습 니 다.예 를 들 어:

 BootstrapTable.prototype.showRow = function (params) {
  this.toggleRow(params, true);
 };

그러면 우 리 는 스스로 기능 함 수 를 정의 할 수 있 습 니까?답 은 긍정 적 이 며,우리 도 우리 가 필요 로 하 는 색인 값 을 되 돌려 주 는 함 수 를 그대로 쓰 고 있다.정 의 는 다음 과 같 습 니 다.

 BootstrapTable.prototype.getPage = function (param) {
  return this.options.pageSize * this.options.pageNumber + 1;
 }

우리 가 이 함수 가 색인 파 라 메 터 를 전달 할 수 있 는 이 유 는 pageSize 와 pageNumber 자체 가 boottstrap table 의 내부 매개 변수 이 고 모두 options 에 통합 되 어 있 기 때문에 이 매개 변 수 를 가지 고 있어 야 함수 가 이 값 을 되 돌려 줄 수 있 습 니 다.
함 수 를 잘 쓰 려 면 이 함 수 를 내부 함수 목록 에 써 야 합 니 다.그렇지 않 으 면 사용 할 수 없습니다.다음 과 같이 getIndex 를 원래 함수 처럼 삽입 합 니 다(네 번 째 줄).

var allowedMethods = [
  'getOptions',
  'getSelections', 'getAllSelections', 'getData', 'getIndex',
  'load', 'append', 'prepend', 'remove', 'removeAll',
  'insertRow', 'updateRow', 'updateCell', 'updateByUniqueId', 'removeByUniqueId',
  'getRowByUniqueId', 'showRow', 'hideRow', 'getHiddenRows',
  'mergeCells',
  'checkAll', 'uncheckAll', 'checkInvert',
  'check', 'uncheck',
  'checkBy', 'uncheckBy',
  'refresh',
  'resetView',
  'resetWidth',
  'destroy',
  'showLoading', 'hideLoading',
  'showColumn', 'hideColumn', 'getHiddenColumns', 'getVisibleColumns',
  'showAllColumns', 'hideAllColumns',
  'filterBy',
  'scrollTo',
  'getScrollPosition',
  'selectPage', 'prevPage', 'nextPage',
  'togglePagination',
  'toggleView',
  'refreshOptions',
  'resetSearch',
  'expandRow', 'collapseRow', 'expandAllRows', 'collapseAllRows',
  'updateFormatText'
 ];

이렇게 하면 우 리 는 표 에서 사용 할 수 있 습 니 다.formatter 에서 getIndex 방법 을 사용 하여 페이지 번호 의 연속(editable:{...}은 줄 편집 입 니 다.다른 블 로 그 를 보십시오):

$("tb_departments").bootstrapTable({
   method: 'post',      //    
   height: 500,
   toolbar: '#toolbar',    //         
   striped: true,      //        
   cache: false,      //      ，   true，                 （*）
   pagination: true,     //      
   sortable: true,      //      
   sortOrder: "asc",     //    
   sidePagination: "server",   //    ：client     ，server     
   pageNumber: 1,      //        ，     
   pageSize: 4,      //       （*）
   pageList: [4, 20, 25, 30],  //          （*）
   //search: true,      //        ，         ，      ，  ，        
   strictSearch: true,
   //showPaginationSwitch: true,
   showExport: true,
   exportDataType: "all",
   showExport: true, //        
   buttonsAlign:"right", //    
   exportTypes:[ 'csv', 'txt', 'excel', 'pdf'], //      
   Icons:'glyphicon-export',
   showColumns: true,     //        
   showToggle:true,     //                  
   showExportAll:true,     //          
   showRefresh: false,     //        
   minimumCountColumns: 1,    //       
   clickToSelect: true,    //         
   cardView: false,     //        
   detailView: false,     //       
   showHeader: true,
   onEditableSave: function (field, row, oldValue, $el) {
    $.ajax({
     success: function (data, status) {
      if (status == "success") {
       alert("    ");
      }
     },
     error: function () {
      alert("Error");
     },
     complete: function () {
     }
    });
   },
   columns: [
    {
     title: '  ',//  
     formatter: function (value, row, index) {
      return $("tb_departments").bootstrapTable("getIndex");
     }
    },
    {
     align: "left",//    
     halign: "left",//    
     field: "vehplate",
     title: "    ",
     editable: {
      type: 'text',
      title: "    ",
      noeditFormatter: function (value,row,index) {
       var result={filed:"vehplate",value:value};
       return result;
      },
      validate: function (value) {
       if ($.trim(value) == '') {
        return '        !';
       }
      }
     }
    },{
     align: "left",
     halign: "left",
     field: "price",
     sortable:true,
     title: "  (  )",
     editable: {
      type: 'text',
      title: "  (  )",
      noeditFormatter: function (value,row,index) {
       var result={filed:"price",value:value,class:"badge bg-green",style:"padding:5px 10px;"};
       return result;
      }
     }
    },
    {
     align: "left",
     halign: "left",
     field: "netvalue",
     sortable:true,
     title: "  (  )",
     editable: {
      type: 'text',
      title: "  (  )",
      noeditFormatter: function (value,row,index) {
       var result={filed:"netvalue",value:value,class:"badge bg-orange",style:"padding:5px 10px;"};
       return result;
      }
     }
    },
    {
     align: "left",
     halign: "left",
     field: "accumulatedmileage",
     sortable:true,
     title: "    ",
     editable: {
      type: 'text',
      title: "    ",
      noeditFormatter: function (value,row,index) {
       var result={filed:"accumulatedmileage",value:value};
       return result;
      }
     }
    },
    {
     align: "left",
     halign: "left",
     field: "accumulateddepreciation",
     sortable:true,
     title: "    (  )",
     editable: {
      type: 'text',
      title: "    (  )",
      noeditFormatter: function (value,row,index) {
       var result={filed:"accumulateddepreciation",value:value};
       return result;
      }
     }
    },
    {
     align: "left",
     halign: "left",
     field: "vehClass",
     title: "  "
    },
    {
     align: "left",
     halign: "left",
     field: "vehtype1Desc",
     title: "  "
    }, {
     align: "left",
     halign: "left",
     field: "vehtype2Desc",
     //width: 100,
     title: "    "
    }
   ],
   onPageChange:function(number, size)
   {
    //          ，         ，      
    me.queryBaseParam.limit=size;
    me.queryBaseParam.start=number;
    me.ajaxGetData();
   },
   onSort: function (name, order) {
    //           
    me.queryBaseParam.sort=name;
    me.queryBaseParam.order=order;
    me.ajaxGetData();
   }
  });

마지막 결 과 는 client 페이지 의 번호 와 같 습 니 다.
총결산
위 에서 말 한 것 은 소 편 이 소개 한 BootStrap Table 이 server 페이지 번호 연속 표시 기능(현재 페이지 는 이전 페이지 의 끝 번호 부터)을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!