原文地址: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. socket.io的用户认证

    一直专心于写代码,遇到问题便看别人的博客来解决问题,突然感觉自己也应该写点东西帮助别人来解决问题.废话不多说了,直接切入正题~ 最近在写一个聊天室来学习node和socket相关知识.遇到的问题描述: ...

  2. vue+ElementUI使用笔记

    1,使用表单验证: //定义验证规则 window.varifyUtil = { //验证数字 validateNumber: function(rule, value, callback){ if ...

  3. C#:几种数据库的大数据批量插入(转)

    在之前只知道SqlServer支持数据批量插入,殊不知道Oracle.SQLite和MySql也是支持的,不过Oracle需要使用Orace.DataAccess驱动,今天就贴出几种数据库的批量插入解 ...

  4. Altium Designer Summer 09换成中文步骤

    1.打开Altium Designer Summer 09软件,在左上角file文件中点击,再打开Preferences出现如下,然后关闭软件在打开就完成了

  5. v$instance如何生成

    参考:http://www.itpub.net/thread-1284858-1-1.html 1.ORACLE 先创建的x$ 表即RDBMS的内部表 2.然后在X$表的基础上创建了GV$ 视图.  ...

  6. 简单理解Linux的Loopback接口

    Linu支持环回接口( Loopback Interface),以允许运行在同一台主机上的客户程序和服务器程序通TCP/IP进行通信. A 类网络127就是为环回接口预留的 .根据惯例,大多数系统把I ...

  7. Windows IIS注册asp 此操作系统版本不支持此选项 错误解决方法

    更新Win10,原来的IIS站点访问不了,原因是因为IIS 没有.net 4.5,使用网上的aspnet_regiis.exe -i命令,一点都不靠谱,直接提示: C:\WINDOWS\system3 ...

  8. 在数据库繁忙时如何快速有效的关闭MySQL服务

    如果InnoDB_buffer_size参数很大,缓冲区内的脏数据太多,那么关闭MySQL的时候必须把脏数据刷新到磁盘,这个过程有可能是很漫长的,从而导致关闭MySQL服务的时间过长.可以临时设置in ...

  9. 回顾2018年最受欢迎的十四款NoSQL产品

    ​​虽然NoSQL的流行与火起来才短短一年的时间,但是不可否认,现在已经开始了第二代运动.尽管早期的堆栈代码只能算是一种实验,然而现在的系统已经更加的成熟.稳定.不过现在也面临着一个严酷的事实:技术越 ...

  10. V-rep学习笔记:机器人路径规划2

    路径规划问题是机器人学研究的一个重要领域,它是指给定操作环境以及起始和目标的位置姿态,要求选择一条从起始点到目标点的路径,使运动物体(移动机器人或机械臂)能安全.无碰撞地通过所有的障碍物而达到目标位置 ...