zoukankan      html  css  js  c++  java
  • bootstrap table 显示连续序号,分页有效

    参考: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;  
                            }
                        },

    结果:

  • 相关阅读:
    适配器和外观模式
    命令模式
    单件模式
    工厂模式
    装饰者模式
    观察者模式(发布--订阅模式)
    设计模式之策略模式
    C#学习笔记15
    C#学习笔记14
    lucky的时光助理-2017.02
  • 原文地址:https://www.cnblogs.com/hy928302776/p/7197406.html
Copyright © 2011-2022 走看看