原文地址: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. kali上部署dvwa漏洞测试平台

    kali上部署dvwa漏洞测试平台 一.获取dvwa安装包并解压 二.赋予dvwa文件夹相应权限 三.配置Mysql数据库 四.启动apache2和mysql服务 五.在网页配置dvwa 六.登陆到D ...

  2. .NET Core中使用Docker

    一.Docker简介 Docker是基于Linux容器技术(LXC),使用Go语言实现的开源项目,诞生于2013年,遵循Apache2.0协议.Docker自开源后,受到广泛的关注和讨论. Docke ...

  3. Playmaker全面实践教程之Playmaker常用工具

    Playmaker全面实践教程之Playmaker常用工具 Playmaker常用工具 Playmaker插件搭载了8个工具:FSM Browser.State Browser.Templates.T ...

  4. Shiro自定义过滤器

    项目中需要所有首次登录的用户必须修改密码才可使用系统,项目采用的是Shiro框架. 突然想到了配置文件org.apache.shiro.spring.web.ShiroFilterFactoryBea ...

  5. 2827: 千山鸟飞绝 非旋treap

    国际惯例的题面:看起来很不可做的样子,我们先来整理一下题意吧.就是,维护每个点曾经拥有过的最大的两个属性值,支持把点的位置移动.我们用map对每个位置进行离散化,对每个位置建立一个平衡树.为了方便分离 ...

  6. Phone漂亮的动画

    //此处标明非原创 实现iPhone漂亮的动画效果主要有两种方法, 一种是UIView层面的, 一种是使用CATransition进行更低层次的控制, 第一种是UIView,UIView方式可能在低层 ...

  7. 一些公司的面试题目 U3D

    #include <iostream> using namespace std; int main() { int N; while (cin>>N&&N> ...

  8. EasyUI学习总结(四)——parser源码分析

    parser模块是easyloader第一个加载的模块,它的主要作用,就是扫描页面上easyui开头的class标签,然后初始化成easyui控件. /** * parser模块主要是解析页面中eas ...

  9. LiteIDE 在 Windows 下为 Go 语言添加智能提示代码补全

    本文以 Windows 7 64 位为环境,go1.4.2.windows-amd64 和 liteidex27.2.1.windows-qt5 为例. 成功搭建开发环境后,发现 LiteIDE 没有 ...

  10. 微软补丁安装工具wusa报错。

    命令行需要msu格式的补丁安装文件的全路径,否则报错.