`

bootstrap-table给每行添加编号

阅读更多
在使用bootstrap-table时,想给每行添加一个编号,sql语句已经写好,不想改,所以就在前端上动脑筋了。
首先想到的就是列属性中formatter的参数index,测试后发现index从0开始,只记录当前页的行号,下一页后从新计数,即每页都是从0到pageSize,无法实现自己想要的所有行统一计数,于是想到结合分页参数pageNumber和pageSize与当前行号index来实现。
那么,如何实现呢,问题的关键就在于获取table对象的pageNumber和pageSize,翻看文档,没有发现相关api,查看源码,发现有个方法‘getOptions’没有在作者提供的文档中出现,不过源码中已经写好了,于是尝试调用,再于是,问题解决了。
在bootstrap-table对象的columns属性中加入以下代码,就可以实现为表格所有行添加一个统一的计数编号了。
{
	  title: '编号',
	  align: 'center',
	  valign: 'bottom',
	  formatter:function(value,row,index){
	  	  var pageNumber = $('#btable').bootstrapTable('getOptions').pageNumber;
	  	  var pageSize = $('#btable').bootstrapTable('getOptions').pageSize;
	  	  return (pageNumber-1) * pageSize+index+1;
	  }
}
分享到:
评论

相关推荐

    Bootstrap table使用方法记录

    $('#table').bootstrapTable({ columns: [{ field: 'id', title: '编号' }, { field: 'name', title: '名称' }, { field: 'tecParam', title: '技术参数' }], data: [{ id: 1, name: 'Product 1', ...

    利用Bootstrap实现表格复选框checkbox全选

    HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class=table> 类别编号 类别名称 类别组 状态 说明 <td>C00001 机车 机车 有效 <t

    angularjs表格ng-table使用备忘录

    在HTML中,我们定义了一个`<table>`元素,其中`ng-table`指令与`tableParams`绑定,`show-filter="true"`启用过滤功能,`class="table"`则添加Bootstrap样式: ```html <table ng-table="tableParams" show-filter=...

    Bootstrap Table使用整理(四)之工具栏

    2. 刷新方法:可以绑定事件监听器来实现刷新按钮的功能,`bootstrapTable('refresh')` 方法用来刷新表格数据。如果需要在刷新时传递特定的查询参数,可以传入一个对象作为参数。 ```javascript $('#heartBtn')....

    Bootstrap Table使用整理(二)

    在Bootstrap Table中,我们可以利用`data-row-style`属性来自定义每一行的样式。通过这个扩展方法,我们可以根据特定条件为行应用不同的CSS类。例如,在提供的代码中,`rowStyle`函数检查`sno`字段是否包含字符'2',...

    Restauarant-Table-booking-system:餐厅表预订系统

    1. 前端框架:可以选择Bootstrap或React等,用于快速构建用户界面。 2. 后端开发:使用Python的Django或Flask框架,提供RESTful API接口。 3. 数据库:MySQL或SQLite存储用户信息、预订记录等数据。 4. 邮件服务:如...

    如何将ajax请求返回的Json格式数据循环输出成table形式

    构建好的行被追加到具有`.table`类的表格中。 后台处理请求并返回Json数据的部分,这里使用了ThinkPHP框架。代码如下: ```php $list = $File->group('num')->order('id desc')->limit($Page->firstRow . ',' . $...

    Jquery dataTable中文API中文文档

    <table class="table table-striped table-hover table-bordered datatable" id="article"> 编号 文章标题 所属类别 点击次数 审核 置顶 热点 添加时间 操作 </table> ``` #### 四、应用场景...

    基于Servlet3.0+IBatis+BootStrip技术构建简单会议管理系统

    第09课 bootstrap的搭建+栅格系统+table 第10课 bootstrap 表单 (二)会议管理系统之设计部分 第11课 原型设计_设备管理 第12课 原型设计_会议室管理+预约会议室 第13课 原型设计_会议管理+系统管理 第14课 数据库...

    【JavaScript源代码】jQuery实现增删改查.docx

    <table class="table table-bordered text-center"> 编号 姓名 成绩 操作 <!-- 示例数据 --> <td>1 张三 <td>89 <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal...

    使用jQuery将多条数据插入模态框的实现代码

    在前端开发中,模态框(Modal)是一种常用于显示附加信息而不离开当前页面的用户界面元素。...5. 动态创建表格行,并将每一行添加到模态框的表格中。 掌握这一技术点,能够显著提高前端页面的交互性和用户体验。

    a3-task3-task4-bb

    6. **表格**:`<table>`、`<tr>`(行)、`<th>`(表头)、`<td>`(数据单元格)构建表格。 7. **表单元素**:HTML表单用于用户输入,包括`<form>`、`<input>`、`<textarea>`、`<select>`和`<button>`等。 8. **...

    LMS1_2121009

    HTML中的`<table>`元素用于创建表格,`<tr>`表示行,`<td>`表示单元格,`<th>`用于表头。`<caption>`可添加表格标题,`<colgroup>`和`<col>`用来设置列的样式。 【HTML列表】 HTML提供有序列表`<ol>`和无序列表`...

    20ab

    5. **表格**:`<table>`、`<tr>`(行)、`<th>`(表头单元格)、`<td>`(普通单元格)用于创建表格。 6. **表格**:`<form>`用于创建表单,`<input>`定义输入字段,`<button>`定义按钮,`<select>`和`<option>`用于...

    csc148a2

    【标题】"csc148a2"可能是指一个编程课程或项目,可能是哥伦比亚大学(Columbia University)计算机科学CS148课程的第二个作业或实验,因为"148a2"通常表示课程编号和版本。这个标签"HTML"表明内容与超文本标记语言...

    C69

    6. **表格(Tables)**:HTML支持创建表格,用`<table>`、`<tr>`(行)、`<th>`(表头)和`<td>`(单元格)等标签。 7. **样式(Style)**:虽然HTML主要用于结构,但可以通过`<style>`元素或`<link>`标签引入外部...

    672ps:最后6.72

    【标题】"672ps:最后6.72"可能指的是某个项目或者课程的编号,结合描述中的"672ph 最后6.72",我们可以推测这可能是一系列学习材料或教程的最终部分,其中“ph”可能是特定阶段或者主题的缩写。 【HTML】标签表明这...

Global site tag (gtag.js) - Google Analytics