[转] BootStrap table增加一列显示序号
原文地址: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增加一列显示序号的更多相关文章
- Bootstrap Table 超多列 使用滚动条
overflow-x: scroll;横向滑动详细讲解 able显示滚动条,要先把table放到一个div中,控制div 属性overflow值为scroll <div style=" ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- bootstrap table 分页序号递增问题 (转)
原文地址:https://segmentfault.com/q/1010000011040346 如题,怎么在bootstrap table中显示序号,序号递增,并且分页有效,等于是每页10条,第2页 ...
- BootStrap Table显示行号,并且分页后依然递增
bootStrap table 此处使用的是V1.9.0.在网上百度的方法是: { title: '序号', field: '', formatter: function (value, row, i ...
- bootstrap table 怎么实现前两列固定冻结?
$("#Table").bootstrapTable('destroy').bootstrapTable({ pagination: true,//分页 minimumCountC ...
- bootstrap table 标题列重复
使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...
- [转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
- 关于如何解决bootstrap table 列 切换 刷新 高度不一样
在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...
随机推荐
- python的pickle和shelve模块
python中用于序列化的模块总结 目录 pickle模块 shelve模块 xml模块 pickle模块 介绍 Pickle的问题和所有其他编程语言特有的序列化问题一样,就是它只能用于Python, ...
- mvc返回多个结果集,返回多个视图
System.Web.Mvc.ViewPage<dynamic> public ActionResult Index() { IDictionary< ...
- bootstrap中的对话框-dialog
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name= ...
- 让.Net程序支持命令行启动
很多时候,我们需要让程序支持命令行启动,这个时候则需要一个命令行解析器,由于.Net BCL并没有内置命令行解析库,因此需要我们自己实现一个.对于简单的参数来说,自己写一个字符串比较函数来分析args ...
- Linux下 $(cd `dirname $0`;pwd)
在命令行状态下单纯执行 $ cd `dirname $0` 是毫无意义的.因为他返回当前路径的".".这个命令写在脚本文件里才有作用,他返回这个脚本文件放置的目录,并可以根据这个目 ...
- centos7下opencv3的安装
前面说过opencv和python模块的安装,版本是基于opencv 2的,这篇主要说一下opencv3的安装过程以及相关依赖问题的解决,同样opencv3的安装包在官网上可以下载,最新稳定版是3.3 ...
- Idea调试
Idea调试 学习了:https://www.jb51.net/article/128965.htm 1,多线程同时断点: 2,drop frame 回退调试: 3,条件断点/片段代码: 4,调试的时 ...
- 微信出现BUG,发送“ 两位数字+15个句号 ”,双方系统会卡崩……
刚刚,有网友反映称,微信出现了新的bug.例如,在微信中发“两位数字+15个句号”(另一说法是任意数字,任意15个标点符号),如果有华为手机或者安卓手机收到,就会卡死. 用安卓手机的朋友可以试一下,不 ...
- Android添加全屏启动画面
有的Android软件需要在启动的时候显示一个启动画面,可以是一张图或者一些设置什么呢,还有一个好处就是,可以趁机在后台加载数据.创建启动画面一般有两种方式:1.建立一个activity,展示启动画面 ...
- OpenCV学习代码记录——人脸检测
很久之前学习过一段时间的OpenCV,当时没有做什么笔记,但是代码都还在,这里把它贴出来做个记录. 代码放在码云上,地址在这里https://gitee.com/solym/OpenCVTest/tr ...