原文地址: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. P2789 直线交点数

    P2789 直线交点数分成两种情况,一种是平行直线,一种是自由直线,在自由直线中可以存在平行直线,但是不能和第一组的直线平行.自由直线和平行直线的交点是i*(n-i). #include<ios ...

  2. Angular 个人深究(四)【生命周期钩子】

    Angular 个人深究(四)[生命周期钩子] 定义: 每个组件都有一个被 Angular 管理的生命周期. Angular 创建它,渲染它,创建并渲染它的子组件,在它被绑定的属性发生变化时检查它,并 ...

  3. JAVA Socket通信 打造属于自己的网盘

    近一个月没敲JAVA代码了,最近老师布置了一个写JAVA网盘的作业,总共花了十几个小时,总算写完了,debug真的累,感觉自己还是菜了,没有那种有一个想法就能马上用代码实现的能力....不扯了,下面开 ...

  4. 13,EasyNetQ-错误条件

    在本节中,我们将看看任何消息系统中可能出现的各种错误情况,并查看EasyNetQ如何处理它们. 1,我的订阅服务死亡 你已经写了一个订阅了我的NewCustomerMessage的windows服务. ...

  5. u3d 地形 U3d terrain

    u3d 地形 U3d terrain 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-mail: 313134555 @qq.com fbx ...

  6. BZOJ.4566.[HAOI2016]找相同字符(后缀数组 单调栈)

    题目链接 给定两个字符串,求它们有多少个相同子串.相同串的位置不同算多个. POJ3145简化版. 后缀自动机做法见这儿,又快又好写(一下就看出差距了..) //13712kb 4076ms #inc ...

  7. MoreWindows 微软认证专家博客目录(白话算法,C++ STL,windows编程)

    为了方便大家查找和学习,现将本人博客中所有博客文章列出目录. (http://blog.csdn.net/morewindows) 一.      白话经典算法 目前有17篇,分为七大排序和经典面试题 ...

  8. Qt 4.6.2静态编译后,创建工程出现中文乱码的解决办法

    一.如果静态编译是用mingw编译的 1)在pro文件里增加QTPLUGIN += qcncodecs 2)在main函数所在的文件里面增加#include <QtPlugin>和Q_IM ...

  9. IDEA下使用Maven的test命令乱码

    IDEA下使用Maven的test命令乱码的时候,加上 -Dfile.encoding=GBK 就可以解决啦   如下图所示:   或者在Maven的pom.xml文件中增加: <propert ...

  10. WPF腾讯视频通话开发

    一.IntPtr.HandleC#中的IntPtr类型称为“平台特定的整数类型”,它们用于本机资源,如窗口句柄. 1.WPF窗口句柄IntPtr wnip = new System.Windows.I ...