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;
                        }
                    },

结果:

时间: 2024-12-27 09:34:57

bootstrap table 显示连续序号,分页有效的相关文章

bootstrap table 服务器端分页--ashx+ajax

1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="

bootstrap table 分页序号递增问题 (转)

原文地址:https://segmentfault.com/q/1010000011040346 如题,怎么在bootstrap table中显示序号,序号递增,并且分页有效,等于是每页10条,第2页的序号可以从11开始到20.之前的是这样写的columns的序号: columns:[{ field: '序号', title: 'number', width:5 , align:'center', switchable:false, formatter:function(value,row,in

使用bootstrap table时不能显示筛选列和分页每页显示的行数

使用bootstrap table时不能显示筛选列和分页每页显示的行数 后来在同事的帮助下,才发现没有引用bootstrap的js文件 <script src="/Scripts/bootstrap/js/bootstrap.js"></script> 这个引用了就可以了

bootstrap table 服务端分页

前端js $(function () { //$('#MDTable').bootstrapTable('destroy'); $("#MDTable").bootstrapTable({ //'destroy' 是必须要加的==作用是加载服务器数据,初始化表格的内容Destroy the bootstrap table. toolbar: '#toolbar', //工具按钮用哪个容器 method: 'get', url: "/MD_All/MD_Data",

bootstrap table的属性sidePagination设置不当导致数据不显示

使用bootstrap table,某个页面不需要分页,就将参数 pagination设置为了 false. 想想既然不用分页了,干脆分页方式也删掉吧,结果莫名的结果是"没有找到匹配的记录",而前端调试看Network内容,明明返回了两条数据. 折腾半天后,逐步回退代码,才发现必须要sidePagination存在,且值为: "server", 如果配置为"client"也不显示数据. 原文地址:https://www.cnblogs.com/G

elementui el-table根据分页显示表格序号

每页显示的序号都是一样的: <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange"> <el-table-column type="index" width="50"> </el-table-column><el-table> 根据分页显示序号:当前点击的页码:

BootStrap table使用

bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="../bower_compon

Bootstrap Table使用分享

版权声明:本文为博主原创文章,未经博主允许不得转载. 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一.效果展示 二.B

Bootstrap table使用知识-转

http://www.cnblogs.com/landeanfen/p/5005367.html 官方文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstra