[转] 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计算多边形面积
最近业务上有一个需求,给出多边形面积. Google了一下,发现国内论坛给的算法都是你抄我我抄你,也不验证一下是否正确, 从 博客园到csdncsdn 然后传播到国内各个角落...真是无力吐槽了. 直 ...
- Android-LruCache与DiskLruCache
Android LruCache与DiskLruCache 学习自 Android开发艺术探索 https://blog.csdn.net/guolin_blog/article/details/28 ...
- SqlDataAdapter更新数据
插入.更新和删除的排序 在许多情况下,以何种顺序向数据源发送通过 DataSet 作出的更改是相当重要的. 例如,如果已更新现有行的主键值并且添加了具有新主键值的新行, 则务必要在处理插入之前处理更新 ...
- npm和yarn
在2016年10月11日facebook公开了新的javascript包管理工具yarn,用来替代目前被广泛使用的npm(nodejs 自带的包管理工具)
- svn版本管理工具的使用
安装参考http://www.cnblogs.com/macula/archive/2012/02/12/2347637.html 主要的使用步骤如下: 建立版本管理库: svnadmin creat ...
- python单元测试模块unittest
1.unittest_demo.py # coding=utf-8 import time import unittest from HtmlTestRunner import HTMLTestRun ...
- BZOJ.4894.天赋(Matrix Tree定理 辗转相除)
题目链接 有向图生成树个数.矩阵树定理,复习下. 和无向图不同的是,度数矩阵改为入度矩阵/出度矩阵,分别对应外向树/内向树. 删掉第i行第i列表示以i为根节点的生成树个数,所以必须删掉第1行第1列. ...
- SPOJTLE - Time Limit Exceeded(高维前缀和)
题意 题目链接 题目的意思是给一个数组C,长度为n,每个数字的范围是2^m,然后要求构造一个数组a,满足 1.a[i] % C[i] !=0 ; 2.a[i] < 2^m ; 3.a[i] &a ...
- Android studio 3.0以上版本无法引入,找不到v4,v7包方案解决
Android studio 3.0以上版本无法引入v4.v7包报红,即找不到v4.v7包,解决方案如下: 步骤: 1,Close Object,点击左上角的关闭工程. 2,点击x,删除项目. 3,重 ...
- Celery入门指北
Celery入门指北 其实本文就是我看完Celery的官方文档指南的读书笔记.然后由于我的懒,只看完了那些入门指南,原文地址:First Steps with Celery,Next Steps,Us ...