在使用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;
}
}
分享到:
相关推荐
$('#table').bootstrapTable({ columns: [{ field: 'id', title: '编号' }, { field: 'name', title: '名称' }, { field: 'tecParam', title: '技术参数' }], data: [{ id: 1, name: 'Product 1', ...
HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class=table> 类别编号 类别名称 类别组 状态 说明 <td>C00001 机车 机车 有效 <t
在HTML中,我们定义了一个`<table>`元素,其中`ng-table`指令与`tableParams`绑定,`show-filter="true"`启用过滤功能,`class="table"`则添加Bootstrap样式: ```html <table ng-table="tableParams" show-filter=...
2. 刷新方法:可以绑定事件监听器来实现刷新按钮的功能,`bootstrapTable('refresh')` 方法用来刷新表格数据。如果需要在刷新时传递特定的查询参数,可以传入一个对象作为参数。 ```javascript $('#heartBtn')....
在Bootstrap Table中,我们可以利用`data-row-style`属性来自定义每一行的样式。通过这个扩展方法,我们可以根据特定条件为行应用不同的CSS类。例如,在提供的代码中,`rowStyle`函数检查`sno`字段是否包含字符'2',...
1. 前端框架:可以选择Bootstrap或React等,用于快速构建用户界面。 2. 后端开发:使用Python的Django或Flask框架,提供RESTful API接口。 3. 数据库:MySQL或SQLite存储用户信息、预订记录等数据。 4. 邮件服务:如...
构建好的行被追加到具有`.table`类的表格中。 后台处理请求并返回Json数据的部分,这里使用了ThinkPHP框架。代码如下: ```php $list = $File->group('num')->order('id desc')->limit($Page->firstRow . ',' . $...
<table class="table table-striped table-hover table-bordered datatable" id="article"> 编号 文章标题 所属类别 点击次数 审核 置顶 热点 添加时间 操作 </table> ``` #### 四、应用场景...
第09课 bootstrap的搭建+栅格系统+table 第10课 bootstrap 表单 (二)会议管理系统之设计部分 第11课 原型设计_设备管理 第12课 原型设计_会议室管理+预约会议室 第13课 原型设计_会议管理+系统管理 第14课 数据库...
<table class="table table-bordered text-center"> 编号 姓名 成绩 操作 <!-- 示例数据 --> <td>1 张三 <td>89 <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal...
在前端开发中,模态框(Modal)是一种常用于显示附加信息而不离开当前页面的用户界面元素。...5. 动态创建表格行,并将每一行添加到模态框的表格中。 掌握这一技术点,能够显著提高前端页面的交互性和用户体验。
6. **表格**:`<table>`、`<tr>`(行)、`<th>`(表头)、`<td>`(数据单元格)构建表格。 7. **表单元素**:HTML表单用于用户输入,包括`<form>`、`<input>`、`<textarea>`、`<select>`和`<button>`等。 8. **...
HTML中的`<table>`元素用于创建表格,`<tr>`表示行,`<td>`表示单元格,`<th>`用于表头。`<caption>`可添加表格标题,`<colgroup>`和`<col>`用来设置列的样式。 【HTML列表】 HTML提供有序列表`<ol>`和无序列表`...
5. **表格**:`<table>`、`<tr>`(行)、`<th>`(表头单元格)、`<td>`(普通单元格)用于创建表格。 6. **表格**:`<form>`用于创建表单,`<input>`定义输入字段,`<button>`定义按钮,`<select>`和`<option>`用于...
【标题】"csc148a2"可能是指一个编程课程或项目,可能是哥伦比亚大学(Columbia University)计算机科学CS148课程的第二个作业或实验,因为"148a2"通常表示课程编号和版本。这个标签"HTML"表明内容与超文本标记语言...
6. **表格(Tables)**:HTML支持创建表格,用`<table>`、`<tr>`(行)、`<th>`(表头)和`<td>`(单元格)等标签。 7. **样式(Style)**:虽然HTML主要用于结构,但可以通过`<style>`元素或`<link>`标签引入外部...
【标题】"672ps:最后6.72"可能指的是某个项目或者课程的编号,结合描述中的"672ph 最后6.72",我们可以推测这可能是一系列学习材料或教程的最终部分,其中“ph”可能是特定阶段或者主题的缩写。 【HTML】标签表明这...