>웹 프론트엔드 >JS 튜토리얼 >BootStrap+테이블 정렬 페이징 시퀀스 번호

BootStrap+테이블 정렬 페이징 시퀀스 번호

php中世界最好的语言
php中世界最好的语言원래의
2018-04-18 09:14:382976검색

이번에는 BootStrap+테이블 정렬 및 페이징 일련 번호와 BootStrap+테이블 정렬 및 페이지 매김 일련 번호의 노트가 무엇인지 살펴보겠습니다.

머리말

  • 부트스트랩 테이블을 사용하면 필연적으로 페이징을 사용하게 됩니다. 페이징은 클라이언트 페이징과 서버 페이징이라는 두 가지 방법을 제공합니다.

  • 일반적으로 프로젝트에서는 클라이언트 페이징을 사용하지 않습니다. 일반적으로 테이블 데이터의 양이 많고 클라이언트 페이징을 사용하면 캐시 폭발이 발생하므로 서버 페이징을 선택합니다.

  • 존재가 합리적이고 클라이언트도 사용할 수 있습니다(데이터 양이 특히 적은 경우). 서버 방식에 비해 페이징 시퀀스 번호가 자동으로 연속됩니다. 서버 모드 페이징의 일련 번호는 연속적이지 않습니다(각 페이지는 이전 페이지의 끝 일련 번호가 아닌 1부터 시작함). 이 문서에서는 이 문제를 해결하는 데 중점을 둡니다.

페이지가 매겨진 원본 결과

  • 클라이언트 페이징은 부트스트랩 테이블의 포맷터에 있는 인덱스 값을 사용하여 일련번호를 연속적으로 만들 수 있습니다

  • 서버 페이징은 현재 페이지 위치인 pageNumber와 각 페이지의 크기(pageSize)가 부족하여 포맷터를 사용하여 인덱스를 반환하는 경우 현재 페이지의 인덱스만 확인할 수 없습니다.

해결 단계

이 문제가 발생하는 이유는 무엇입니까? 우리가 사용하는 포맷터에서 반환된 인덱스 매개 변수는 클라이언트의 총 n개 데이터가 모두 클라이언트에 있는 테이블의 인덱스이므로 인덱스는 1-n입니다. server paging 매번 서버는 현재 페이지의 데이터만 클라이언트에 반환하므로 인덱스는 1-pageSize만 되고, pageSize는 한 페이지에 대한 데이터의 양이므로 이러한 문제가 발생합니다.

서버가 한 페이지의 데이터만 반환하므로 페이지를 넘길 때마다 일련번호가 1부터 시작하는 문제를 고려하여 서버와 클라이언트의 페이지 데이터를 연결해야 하므로 이를 기반으로 수정합니다. 원본 포맷터에서 이 매개변수를 전달하면 괜찮을 것입니다.

먼저 부스트랩 테이블의 js 소스 코드를 살펴보고 다음과 같은 일부 내부 함수가 어떻게 작성되는지 확인할 수 있습니다.

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

그렇다면 함수형 함수를 스스로 정의할 수 있을까요? 대답은 '예'입니다. 필요한 인덱스 값을 반환하는 함수도 작성하겠습니다. 이는 다음과 같이 정의됩니다:

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

index 매개변수를 전달하기 위해 이 함수를 작성할 수 있는 이유는 pageSize 및 pageNumber 자체가 부트스트랩 테이블의 내부 매개변수이고 모두 옵션에 통합되어 있기 때문입니다. 따라서 이 매개변수가 있으면 이를 반환하는 함수를 작성할 수 있습니다. 값.

함수를 작성한 후에는 이 함수를 내부 함수 목록에 작성해야 합니다. 그렇지 않으면 다음과 같이 원래 함수처럼 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'
 ];

이러한 방식으로 테이블에서 사용할 수 있습니다. 포맷터의 getIndex 메소드를 사용하여 페이징 일련 번호의 연속성을 달성합니다(편집 가능: {…}은 행 편집입니다. 내 다른 블로그를 확인하세요):

$("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();
   }
  });

최종 결과는 클라이언트 페이징 시퀀스 번호와 동일합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS+canvas는 원형 차트를 그립니다.

js는 글자 수 제한을 구현합니다. 한자 = 두 글자

위 내용은 BootStrap+테이블 정렬 페이징 시퀀스 번호의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.