bootstrap-table显示行号

最新推荐文章于 2025-04-29 14:46:33 发布
最新推荐文章于 2025-04-29 14:46:33 发布
阅读量4.3k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 练习 文章标签： bootstrap-table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cocoaxian/article/details/78302401
bootstrap-table显示行号

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<head>
<meta charset="utf-8">
<title>bootstrap-table显示行号</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/bootstrap-table.css" rel="stylesheet">
</head>
<body>
<div class="container" role="main">
<div class="row">
<div class="col-md-12">
<table class="table table-hover table-bordered" id="gravidaTable">
<thead>
<tr>
<th ></th>
<th >栏目标识</th>
<th>栏目名称</th>
</tr>
</thead>
<tbody>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>

<script type="text/javascript">
$('#gravidaTable').bootstrapTable({
columns: [{
title: '行号',
align: 'center',
valign: 'bottom',
formatter: function(value, row, index) {
return index + 1;
}
}
]
});
</script>
</body>
</html>

通过bootstrap-table这个插件可以通过页面和js做到动态显示表格行号的效果，上面js代码里columns是页面加载的时候重新设置了表格的内容属性。默认从第一列开始设置。
官方文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation
通过这个文档可以查阅其他属性的设置
bootstrap-table 显示行号，分页有效
nazhidao的专栏
06-12 1万+
使用bootstrap-table进行表格展示时，总觉得不显示行号有点别扭，于是网上找办法。看到下面的文章： bootstrap table 行号 显示行号 添加行号 bootstrap-table 行号 但是翻页后，行号还是会从1开始，没有连接上一页的。改bootstrap-table的源码，我用的版本是1.6.0
bootstrap-table的一些配置参数
weixin_44022446的博客
01-06 2334
1、在网页的head标签里插入下面的代码 &lt;!-- 引入bootstrap样式 --&gt; &lt;link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt; &lt;!-- 引入bootstrap-table样式 --&gt; &lt;link href="h...
bootstrap table 显示序号,分页有效
OnlyRu丶小心心
08-30 1427
{ 字段：'Number'， 标题：'序号'， 居中对齐'， 宽度：20， formatter：function（value，row，index）{ //返回索引+ 1; var pageSize = $（'＃parent_table'）。bootstrapTable（'getOptions'）。pageSize; //通过...
BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）
08-29
主要介绍了BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）,需要的朋友可以参考下
Bootstrap-table怎么所属权限 显示列
hui0371的博客
04-29 339
Bootstrap-table怎么所属权限 显示列在使用Bootstrap Table时，如果你想根据用户的权限动态显示或隐藏列，你可以通过几种方式来实现。
bootstrap-table 显示行号
leeze的博客
07-21 2260
思想：借助bootstrap-table 本身的index属性和 options的对象， 巧妙的的通过formatter 实现                                  分页后行号也是OK的                   {field: "Number",title: "序号",halign: 'center',ali
BootStrap Table显示行号，并且分页后依然递增
weixin_33671935的博客
01-07 295
bootStrap table 此处使用的是V1.9.0。在网上百度的方法是： { title: '序号', field: '', formatter: function (value, row, index) { return index+1; } } 但是尝试了下，在翻页后的第一行中，序号依然1...
Bootstrap-table 显示行号
ageng2545的博客
07-20 250
趁热打铁，使用bootstrap-table时，想要显示每行的行号，再网上查了查，网上给的显示行号的大部分方法，只要一翻页，行号就会又从1开始计算， 也许没有碰到想要的，自己试着解决了这个问题，本人初出茅庐，勿喷！先上图： 第一页： 第二页： .......图大了，下面是js代码： 1 columns: [ 2 ...
bootstrap tree ajax,bootstrap-treetable: 这个东西最初出现在guns项目，基于jquery.treegrid.js实现的树。但在实际应用过程中这个方案数据量过大...
weixin_31061699的博客
08-06 1083
bootstrap-treetable暂停维护，谢谢大家支持！项目介绍这个东西最初出现在guns项目，基于jquery.treegrid.js实现的树。但在实际应用过程中这个方案数据量过大会有性能问题，遂抛掉了jquery.treegrid重新实现了相关功能。用法跟bootstrap-table差不多。PS:如果不需要固定列，建议使用1.0.6版本2019-2-12 更新内容修复Bootstrap...
Django：使用模态框新增数据，成功后提示“提交成功”，并刷新表格bootstrap-table数据...
weixin_30318645的博客
07-12 1662
废话不说先看图： 代码实现： 　　前台代码： {% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title&gt...
bootstrap table detailView
u010934312的博客
11-22 3206
        最近在研究bootstrap table的使用，过程中查询了许多资料，在给table做点击下拉详情时发现网上的资料大部分是基础应用的资料，只有很少的一部分关于这部分的资料，而且并不完全。这里记录一下昨天遇到的问题。         在数据绑定上用了$('#table').bootstrapTable({...})的方式，在参数中添加了 detailView:true， d...
带有行号显示功能的JTable
06-19
自己写的一个继承自JTable的带有行号显示功能的表格，支持增删，设置行高等动态操作。
bootstrapTable-显示序号
m0_37938199的博客
04-16 2134
[javascript] view plain copycolumns:                      [{                          //field: 'Number',//可不加                          title: 'Number',//标题  可不加                          formatter: fun...
bootstrap table 行号 显示行号 添加行号 bootstrap-table 行号
weixin_30340775的博客
03-10 266
思想：借助bootstrap-table 本身的index属性， 巧妙的的通过formatter 实现 { field: 'Number', title: 'Number', formatter: function (value, r...
bootstrap table 显示序号,分页后保持连续性
weixin_44059948的博客
09-02 484
直接上代码 { field: 'no', title: '序号', visible: false, formatter: function (value, row, index) { // 通过表的#id 可以得到每页多少条 var pageSize =
BootstrapTable 表格 checkbox 和 显示行号
weixin_34138255的博客
09-27 572
var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tablelist').bootstrapTable('destroy');//...
BootStrap 显示行号
u012004128的博客
03-30 832
原文地址：https://www.cnblogs.com/xbq8080/p/8227487.htmlbootStrap table 此处使用的是V1.9.0。在网上百度的方法是：{      title: '序号',      field: '',      formatter: function (value, row, index) {          return index+1;   ...
bootstrap 拖动 行号变化
最新发布
05-16
### Bootstrap Table 行拖拽并更新行号的实现方法 为了实现在使用 Bootstrap 的情况下，通过拖拽功能调整表格行顺序的同时动态更新行号的功能，以下是详细的解决方案： #### 1. 引入必要的依赖库 除了基础的 jQuery 和 Bootstrap 文件外，还需要引入 `jquery.tablednd.js` 插件以及 `bootstrap-table-reorder-rows.js` 扩展文件。这些文件提供了支持拖拽的核心逻辑。 ```html <script src="path/to/jquery.min.js"></script> <link rel="stylesheet" href="path/to/bootstrap.min.css"> <script src="path/to/bootstrap.min.js"></script> <script src="path/to/jquery.tablednd.js"></script> <script src="path/to/bootstrap-table-reorder-rows.js"></script> ``` 此部分确保了前端环境能够正常运行拖拽操作[^1]。 --- #### 2. 配置 HTML 结构 在 `<table>` 元素中添加特定属性以启用拖拽功能。具体来说，设置 `data-use-row-attr-func="true"` 和 `data-reorderable-rows="true"` 属性即可激活行拖拽行为。 ```html <table id="exampleTable" data-toggle="table" data-use-row-attr-func="true" data-reorderable-rows="true"> <thead> <tr> <th>序号</th> <th>名称</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Alice</td> <td>User A</td> </tr> <tr> <td>2</td> <td>Bob</td> <td>User B</td> </tr> <!-- 更多行 --> </tbody> </table> ``` 上述配置使得表格具备可拖拽的基础能力[^1]。 --- #### 3. 处理拖拽事件并更新行号 利用 `onReorderRow` 方法捕获拖拽结束后的回调函数，在其中重新计算每行的序号，并将其应用到对应的单元格中。 ```javascript $('#exampleTable').on('reorder-row.bs.table', function (event, newData) { const $table = $('#exampleTable'); let rowIndex = 1; // 遍历每一行并更新序号列的内容 $table.find('tbody tr').each(function () { $(this).find('td:first-child').text(rowIndex++); }); }); ``` 在此代码片段中，每当发生拖拽动作完成后，都会触发 `reorder-row.bs.table` 事件。通过遍历所有的表体行 (`<tbody><tr></tr>`) 并逐一修改第一个单元格（即序号列），从而达到实时同步的效果。 --- #### 4. 可选：保存新顺序至服务器端 如果希望持久化用户的排序更改，则可以在 `onReorderRowsDrop` 或其他适当位置向后端发送请求，传递最新的数据结构以便存储于数据库中。 ```javascript const saveOrderToServer = async (newData) => { try { await $.ajax({ url: '/api/save-order', method: 'POST', contentType: 'application/json', data: JSON.stringify(newData), }); console.log('New order saved successfully.'); } catch (error) { console.error('Failed to save new order:', error); } }; // 调用示例 $('#exampleTable').on('reorder-row.bs.table', function (event, newData) { updateRowNumbers(); saveOrderToServer(newData); // 将新的排列顺序提交给后台处理 }); function updateRowNumbers() { const $table = $('#exampleTable'); let index = 1; $table.find('tbody tr').each((_, row) => { $(row).children('td:first-child').text(index++); }); } ``` 这里展示了如何结合 AJAX 请求将最新状态通知服务端。 --- ### 总结 综上所述，借助 `jquery.tablednd.js` 和 `bootstrap-table-reorder-rows.js` 提供的支持，配合自定义 JavaScript 函数可以轻松达成既定目标——不仅允许用户自由调整记录的位置关系，还能即时反映变动情况下的编号变化状况。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值