原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208

最近由于项目需要,使用BootStrap table做数据展示,其中要在第一列显示序号,如图所示:
这里写图片描述
查看了API,发现bootstrap table并没有像其他表格组件提供这个直接显示的功能(也有可能自己没有发现,如果有发现的伙伴们可以告诉我一下下),但是可以根据options里面的pageSize,pageNumber自己进行计算,代码如下:

title : '序号',
align: "center",
width: 40,
formatter: function (value, row, index) {
    //获取每页显示的数量
    var pageSize=$('#tableId').bootstrapTable('getOptions').pageSize;  
    //获取当前是第几页  
    var pageNumber=$('#tableId').bootstrapTable('getOptions').pageNumber;
    //返回序号,注意index是从0开始的,所以要加上1
    return pageSize * (pageNumber - 1) + index + 1;
}

[转] BootStrap table增加一列显示序号的更多相关文章

  1. Bootstrap Table 超多列 使用滚动条

    overflow-x: scroll;横向滑动详细讲解 able显示滚动条,要先把table放到一个div中,控制div 属性overflow值为scroll <div style=" ...

  2. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  3. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

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

    原文地址:https://segmentfault.com/q/1010000011040346 如题,怎么在bootstrap table中显示序号,序号递增,并且分页有效,等于是每页10条,第2页 ...

  5. BootStrap Table显示行号,并且分页后依然递增

    bootStrap table 此处使用的是V1.9.0.在网上百度的方法是: { title: '序号', field: '', formatter: function (value, row, i ...

  6. bootstrap table 怎么实现前两列固定冻结?

    $("#Table").bootstrapTable('destroy').bootstrapTable({ pagination: true,//分页 minimumCountC ...

  7. bootstrap table 标题列重复

    使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...

  8. [转]bootstrap table 动态列数

    原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...

  9. 关于如何解决bootstrap table 列 切换 刷新 高度不一样

    在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...

随机推荐

  1. SQLite中的SELECT子句使用通配符

    SQLite中的SELECT子句使用通配符 在SELECT子句中支持两个通配符,分别为*和table_name.*.其中,*通配符会将FROM子句中每个源表的所有用户定义的列进行输出.例如,下面的SQ ...

  2. js 停止事件冒泡 阻止浏览器的默认行为(比如阻止超连接 # )

      在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...

  3. VR开发 VR development

    VR开发 VR development 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-mail: 313134555 @qq.com Ho ...

  4. 洛谷.1782.旅行商的背包(背包DP 单调队列)

    题目链接(卡常背包) 朴素的多重背包是: \(f[i][j] = \max\{ f[i-1][j-k*v[i]]+k*w[i] \}\),复杂度 \(O(nV*\sum num_i)\) 可以发现求\ ...

  5. POJ.3537.Crosses and Crosses(博弈论 Multi-SG)

    题目链接 \(Description\) 有一个一行n列的棋盘,每个人每次往上放一个棋子,将三个棋子连在一起的人赢.问是否有必胜策略. \(Solution\) 首先一个人若在\(i\)处放棋子,那么 ...

  6. BZOJ.2242.[SDOI2011]计算器(扩展欧几里得 BSGS)

    同余方程都不会写了..还一直爆int /* 2.关于同余方程ax ≡b(mod p),可以用Exgcd做,但注意到p为质数,y一定有逆元 首先a%p=0时 仅当b=0时有解:然后有x ≡b*a^-1( ...

  7. LCD带字符液晶显示I LOVE YOU

    1602是字符型液晶,内含128个ASCLL字符型的字符库,故可以显示ASCLL字符,而不能显示汉字. 1602可以显示两行信息,每行16个字符,5V电源供电,带有背光. 知识点: #include ...

  8. 2016/2/26Android实习笔记(Android签名和aapt)

    1. 我们平时用eclipse或Android Studio开发得到的android应用程序,其实已经添加有默认的debug签名了. Android系统要求所有的程序经过数字签名才能安装,如果没有可用 ...

  9. World final 2017 题解

    链接:https://pan.baidu.com/s/1kVQc9d9 Problem A: #include <cstdio> #include <algorithm> #i ...

  10. 咏南中间件JSON序列类

    咏南中间件JSON序列类 1)支持跨平台.跨语言 2)支持主从表数据序列.还原,支持任意数量的表 主从表数据序列为JSON字符串样式: { "rows": [ { "FD ...