首页 > 代码库 > bootstrap table 显示连续序号，分页有效

bootstrap table 显示连续序号，分页有效

2024-10-28 22:24:39   208人阅读

参考：http://blog.csdn.net/nazhidao/article/details/51647799

 

第一种，通过index+1可以简单实现，但是，翻页后又重新从第一个开始

{  
    field: ‘Number‘,  
    title: ‘Number‘,  
    formatter: function (value, row, index) {  
    return index+1;  
    }  
}

第二种，为了能够实现，在翻页时也能后接着上一页的序号显示，下边修改bootstrap 的js库：

在bootstrap-table.js这个js库中找到allowedMethods对象添加一个getPage属性：（红色部分为自己添加，注意逗号）

 var allowedMethods = [
        ‘getSelections‘, ‘getData‘,
        ‘load‘, ‘append‘, ‘remove‘,
        ‘updateRow‘,
        ‘mergeCells‘,
        ‘checkAll‘, ‘uncheckAll‘,
        ‘check‘, ‘uncheck‘,
        ‘refresh‘,
        ‘resetView‘,
        ‘destroy‘,
        ‘showLoading‘, ‘hideLoading‘,
        ‘showColumn‘, ‘hideColumn‘,
        ‘filterBy‘,
        ‘scrollTo‘,
        ‘prevPage‘, ‘nextPage‘,
        ‘getPage‘
    ];

然后，在js库中，添加方法：

 BootstrapTable.prototype.getPage = function (params) {  
        return {pageSize: this.options.pageSize, pageNumber: this.options.pageNumber};  
};

这样就可以在jsp中直接使用了：

 {
                         field:‘‘,
                        title : ‘序号‘,
                        formatter : function (value, row, index){
                             var page = $(‘#task_list‘).bootstrapTable("getPage");  
                                return page.pageSize * (page.pageNumber - 1) + index + 1;  
                        }
                    },

结果：

技术分享

bootstrap table 显示连续序号，分页有效


联系
我们