原文地址: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. myeclipse maven的联系

    本文非完整的maven安装步骤,这些只是我看的资料的一点点而已,做出一些总结,纯属以后可以看看我的学习经历.如有需要,可以下载我分享的Maven实战(有目录的),书中源代码下载. 设置myclipse ...

  2. C# 设置MDI子窗体只能弹出一个的方法

    Windows程序设计中的MDI(Multiple Document Interface)官方解释就是所谓的多文档界面,与此对应就有单文档界面 (SDI), 它是微软公司从Windows .0下的Mi ...

  3. C# DataGridView转DataTable

    public static DataTable ToDataTable(this DataGridView dataGridView, string tableName = null) { DataG ...

  4. AngularJS checkbox/复选框 根据缓存数据实时显示

    想缓存选择按钮时,可以使用这样的方法. index.html <!DOCTYPE html> <html data-ng-app="App"> <he ...

  5. Codeforces.919E.Congruence Equation(同余 费马小定理)

    题目链接 \(Description\) 给定a,b,x,p,求[1,x]中满足n*a^n ≡b (mod p) 的n的个数.\(1<=a,b<p\), \(p<=1e6+3\), ...

  6. 潭州课堂25班:Ph201805201 爬虫高级 第三课 sclapy 框架 腾讯 招聘案例 (课堂笔记)

    到指定目录下,创建个项目 进到 spiders 目录 创建执行文件,并命名 运行调试 执行代码,: # -*- coding: utf-8 -*- import scrapy from ..items ...

  7. redis清除缓存和连接远程服务器

    直接进入命令行输入 1.连接远程redis:   redis-cli -h 127.0.0.1 -p 3008 -a pIctur3   (a后是密码) 2.查看缓存:keys * 3.清除缓存:de ...

  8. 2016年3月11日Android学习日记

    1.调试技巧:当一次调试过后,可以在App重新返回当前的状态,然后再调试,而不用再点击Android studio的Debug按钮. 参考:http://www.2cto.com/kf/201506/ ...

  9. 几种Unity运行平台的判断

    这里就介绍几种常见的,也是便于使用的几种平台判断的方法. 1.先说第一种,也是我用的顺手的一个.利用RuntimePlatform判断,API上的解释是[The platform applicatio ...

  10. spring如何解决单例循环依赖问题?

    更多文章点击--spring源码分析系列 1.spring循环依赖场景2.循环依赖解决方式: 三级缓存 1.spring循环引用场景 循环依赖的产生可能有很多种情况,例如: A的构造方法中依赖了B的实 ...