如何在bootstrap 4表中使列可排序
在Bootstrap 4中，要使表格列可排序，可以借助第三方插件进行实现。以下是一种常见的做法：
- 引入jQuery库和Bootstrap 4 CSS文件。
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>- 引入Bootstrap Table插件的CSS和JS文件。
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
</head>- 创建一个表格，并为需要排序的列添加
data-sortable="true"属性。
<table id="myTable" class="table">
<thead>
<tr>
<th data-sortable="true">列1</th>
<th data-sortable="true">列2</th>
<th data-sortable="true">列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>值1</td>
<td>值2</td>
<td>值3</td>
</tr>
<tr>
<td>值4</td>
<td>值5</td>
<td>值6</td>
</tr>
<!-- 其他行... -->
</tbody>
</table>- 使用JavaScript初始化表格，并启用排序功能。
<script>
$(document).ready(function() {
$('#myTable').bootstrapTable({
// 可选配置项
sortable: true // 启用排序
});
});
</script>现在，表格的每一列都可以点击进行升序和降序的排序。这样用户就可以根据需要按照某一列的值来对表格进行排序了。
腾讯云相关产品和产品介绍链接：
- 腾讯云服务器（CVM）：提供虚拟的计算环境，可用于托管网站、运行应用程序等。了解更多：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：提供稳定可靠的MySQL数据库服务，适用于各种规模的应用程序。了解更多：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：提供高可靠性、低成本、可扩展的对象存储服务，用于存储和访问各种类型的文件。了解更多：https://cloud.tencent.com/product/cos
相关·内容
我想让bootstrap表中的一列是可排序的，我遵循这里的文档，甚至我将data-sortable="true"添加到列和表中，我没有排序功能。我只得到了排序功能的箭头，但它们不起作用 当我使用示例数据时-可排序功能运行良好，只有当我将示例更改为使用来自数据的数据(根据这个：https://examples.bootstrap-table.c
浏览 19提问于2019-10-11得票数 1
默认情况下，只有当前表的列在Silverstripe中的modeladmin中是可排序的。如何在modeladmin>中使相关表的列也是可排序的？
浏览 1提问于2016-05-19得票数 0
1回答
我正在构建一个带有可排序头的数据表，如文档中的这个所示。可排序表标题必须启用键盘导航才能访问。表标题必须具有选项卡焦点可选，当按下enter按钮时，所选列必须触发排序函数。这样，排序可以用于键盘导航(不需要鼠标)。版本：&qu
浏览 5提问于2020-06-04得票数 1
回答已采纳
1回答
我正在使用bootstrap table @
这个表看起来很棒，是可搜索的，可排序的，并且有分页，但我不知道如何告诉它，一旦呈现了表，就按第二列按升序排序或按第三列按降序排序。我该怎么做呢？
浏览 2提问于2021-04-20得票数 0
4回答
我希望将货币符号添加到我的数字中，同时使该值在Bootstrap Table中作为一个数字保持可排序状态(第30-34行；表中的第4列)： try{
浏览 0提问于2015-06-23得票数 2
2回答
我计划实现服务器端的排序和分页，以便在网页上显示数据表。数据表是一个带有外部CSS的Javascript托管HTML表。Ajax将从服务器端提取数据。我正在考虑在服务器端创建一个类来表示数据表，但不知道如何在不同的列上实现排序。对任何备份表的类来说，排序都应该是足够通用的。编辑:一个备份类，如：{ pr
浏览 6提问于2012-04-21得票数 1
回答已采纳
1回答
如何将许多行插入到kickstart可排序表格中？我使用jQuery方法appendTo将<tr>...</tr>代码安装到表的主体(如：$("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>".format(a, b, c)).appendTo("#items-tbody"
浏览 2提问于2014-02-16得票数 0
我正在创建一些表使用ngx数据表工具在角4。我需要一个列ie。该表的第一列不能是可重新排序的，所有其他列都必须是可排序的。有人能帮我吗？
浏览 0提问于2019-04-01得票数 0
我有一个，它有3列，并使用jqgrid，我正在将它转换为jqgrid表。下面这行代码做到了这一点：但是，我的所有列现在都是可排序的我不希望我的第三列是可排序的。我如何在这里指定它呢？
提前感谢:)
浏览 0提问于2011-10-11得票数 0
回答已采纳
1回答
为数不多的几个不能转换的东西之一是这些排序箭头。很抱歉，我不知道它们的确切术语，但它们是倒三角形(如箭头)，允许您通过列范围的值快速访问您希望如何对整个表进行排序。如何在Google Sheets中为每个专栏获得相同(或至少相似)的效果？我知道我可以在Google Sheets中按列排序，但我必须选择范围，并且每次都要正确地执行所有步骤，而不是单击该<em
浏览 2提问于2019-12-29得票数 0
我在第二列上有一个可排序的表，而且拖放不能很好地使用它，所以希望在列之前为拖动创建一些空间。如何使第一栏仅显示在移动设备上？
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"integrity=&quo
浏览 6提问于2022-03-29得票数 -1
回答已采纳
1回答
我试图在我的角度项目中使用ng排序库来使表可排序，...@NgModuleSortModule, ], bootstrap: [AppComponent]export classSortModule
})
export c
浏览 3提问于2019-10-31得票数 0
回答已采纳
我有两个可排序的列表。当我从list1到list2排序一个项目时，该函数可以工作，但当我在同一列表中排序时，事件不起作用。如何在同一列表中排序时获取事件(更改同一列表中项目的位置) ?？
浏览 1提问于2013-06-14得票数 1
2回答
如何使自定义表行为更容易访问？
、、、、
我和我的团队正在为一个要求定制数据表功能的客户构建一个web应用程序:单击给定表列的标题后，该表将根据该列进行排序。此功能已经实现。
然而，合同的一项重要规定是遵守WCAG2.1无障碍标准。除了在表中，我们在所有正确的地方都有aria标签，但不清楚我们应该如何使这种定制的表行为更容易访问--特别是对于屏幕读取技术。表头单元格也是可聚焦的，因此用户可以使用Enter或Spacebar以这种方式切换功能。我们应该如何处理与用户，特别是那些使用屏幕阅读器的用户交流这种行为？由于此功能并不是典型
浏览 9提问于2021-09-09得票数 1
回答已采纳
1回答
我使用的是C# mvc + DataTablesBootstrap，我不能按日期对表进行排序。它是作为字符串进行排序的。').dataTable({ // "aaSorting": [[5, 'desc//"oLanguage": { "sZeroRecords"
浏览 3提问于2013-09-12得票数 0
2回答
我在我的应用程序中使用Bootstrap和DataTables，并且我有一个基于类的表的默认初始化器。我只需将类data-table添加到表中，它就会用我想要的默认值实例化。aoColumnDefs: [ ]}
我的所有数据表的第一列都有一个复选框，因此上面的排序删除对所有数据表</
浏览 0提问于2012-12-19得票数 2
1回答
修改引导DataTable
、、、、
我使用了一个bootstrap datatable的例子，在我的symfony项目中有一个可排序的表。唯一的问题是，我不希望我的所有列都是可排序的(例如，有些列只包含一个复选框或一个按钮)。此外，有了这个表和这段javascript代码，我就会自动地有一个搜索栏，以及前面的Next按钮和其他自动出现的选项。我希望能够通过删除所有这些我不需要的选项来修改这个默认模板。你知道如何调整这个数据表吗？ 提前感谢
浏览 10提问于2020-07-24得票数 0
回答已采纳
有没有办法在智能表中使用条件st排序？示例-我有一个数组，它告诉我表中哪些列是可排序的。假设我的表有FirstName，LastName，Age，email列，我的排序数组是firstName，age，这意味着只有名字和年龄字段是排序的。我如何使用智能桌面来实现这一点。
浏览 0提问于2015-10-30得票数 0
2回答
我有jquery数据，其中第一列是行号，其他列是可排序列。我希望这个行号是“静态的”，所以当排序表时，行号仍然是1,2,3,4，不管表是如何排序的。
现在，当我按其他列排序时，行号随行而改变，即。
浏览 0提问于2015-10-30得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
