bootstrap-table后端分页

项目用bootstrap-table做告警的后端分页表格，学习了下bootstrap-table

1 参考资料

资料：http://bootstrap-table.wenzhixin.net.cn/zh-cn/ --官方地址 查询参数 下面是最近看的一些 http://www.cnblogs.com/gamehiboy/p/5176618.html 用例 http://www.imooc.com/article/8917 排序 http://www.cnblogs.com/RushPasser/p/bootstarp-table%E8%A1%A8%E6%A0%BC%E4%B8%AD%E5%B5%8C%E5%A5%97%E5%A4%9A%E4%B8%AABUTON%E6%8C%89%E9%92%AE%E5%AE%9E%E7%8E%B0.html 表格带多个button实现 http://my.oschina.net/sallency/blog/638629 讲返回值必须的格式 包含total和包裹体 http://blog.csdn.net/song19890528/article/details/50299885 bootstrap分页和填充 http://www.itozi.net/32579.html bootstrap源码解读

2 常见的参数解释

<pre name="code" class="html">gridOptions:any = {
    method:'get',  请求后端的URl方法
    [url='api/v1.0/fm/alarms]url:'api/v1.0/fm/alarms'[/url], url固定部分
    queryParams:params =>this.queryParams(params, this.exportData),url参数部分
    sidePagination:'server',表示后端分页，前端是client
    pagination: true,// 是否分页
    pageSize: 10,//分页默认页数
    pageNumber:1,页码起始
    pageList:[5,10],分页选择的页码的下拉菜单
    paginationDetailHAlign: 'right',//分页信息的位置
    paginationHAlign: 'right',//
    sortable: true,//是否排序
    sortOrder:'asc',默认排序
    search:true,是否显示搜索框
  };

下面是拼url里面的参数，并且把分页信息取出来给导出功能使用，exportData为外面angular部分传入的，这里因为接口定的比较早，当前页用offset和limit做了个转换，转换为当前页

做出的成品：

一些坑 1 initTable() 中 最开始一定要使用 var that = this;，用that访问组件中的变量，可以在这里断点看，this指针已经指向table；（angular 2.0） 2 responseHandler这里用来对返回参数做一些处理，注意返回体，必须是total +包裹体的这种方式，如果不是，自己构造这样一个结构，填充返回 3 如删除或者对某些字段更新后，可以通过$('#table1').bootstrapTable('refresh');进行刷新 或者通过 $('#table1').bootstrapTable('load', Alarm);方法进行加载4 可变参数的实现： let tmp = { microService:undefined,---如果未定义就不会出现在url中 }; initTable的实现 initTable() { var that = this; $('#table1').bootstrapTable($.extend(this.gridOptions, { ajaxOptions: { beforeSend: function (xhr) { let accessToken = window.localStorage.accessToken; let username = window.localStorage.username; xhr.setRequestHeader('Access-Token', accessToken); xhr.setRequestHeader('operateuser', username); } }, url: AppCfg.fmServiceUrl + 'alarms', toolbar: '#toolbar1', dataField: 'alarms', responseHandler: function (res) { let AlarmDetails:Array<any> = []; let Alarm = { 'total': 0, 'alarms': AlarmDetails }; Alarm.total = res.total; that.exportData.allPage = Math.ceil(res.total / this.pageSize); let currentAlarmLinks:Array<any> = []; currentAlarmLinks = _.chain(res.alarms).pluck('links').flatten().where({ 'rel': 'self' }).pluck('uri').value(); that.alarmService.getCurrentAlarmsDetail(currentAlarmLinks).then((res:any) => { Alarm.alarms = res; $('#table1').bootstrapTable('load', Alarm); }); if (res.total === 0) { $('.fixed-table-footerButtons').css('display','none'); } else { $('.fixed-table-footerButtons').css('display','block'); } $('.fixed-table-body td').css('color','red'); return Alarm; } })); $('.bootstrap-table .search input').attr('placeholder', '输入关键字筛选') .parent().append(`<span></span>`); $('#table1').parents('.fixed-table-container').append(`<div class="fixed-table-footerButtons"> <input type="checkbox" class="checkAll"> <button id="delete-curalarm-btn" data-target="#DelConfirm" data-toggle="modal" disabled>??</button> <button id="confirm-curalarm-btn" disabled>确认</button> <button id="unconfirm-curalarm-btn" disabled>取消确认</button> </div>`); $('#table1').on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function () { $('#delete-curalarm-btn').prop('disabled', !$('#table1').bootstrapTable('getSelections').length); }); $('#table1').on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function () { $('#confirm-curalarm-btn').prop('disabled', !$('#table1').bootstrapTable('getSelections').length); }); $('#table1').on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function () { $('#unconfirm-curalarm-btn').prop('disabled', !$('#table1').bootstrapTable('getSelections').length); }); $('#table1').on('check-all.bs.table uncheck-all.bs.table', function () { $('.fixed-table-footerButtons .checkAll').prop('checked', $('#table1').bootstrapTable('getSelections').length > 0); }); $('.bootstrap-table .fixed-table-footerButtons .checkAll').change(function () { if ($(this).prop('checked')) { $('#table1').bootstrapTable('checkAll'); } else { $('#table1').bootstrapTable('uncheckAll'); } }); $('#confirm-curalarm-btn').click(function () { that.alarmConfirm(); }); $('#unconfirm-curalarm-btn').click(function () { that.alarmUnConfirm(); }); $('#alarm-export-btn').click(function () { that.prepareExportInfo(); }); }