使用 JQuery 实现将 table 按照列排序
使用 JQuery 实现将 table 按照列排序
代码如下
<!DOCTYPE html>
<html>
<head>
<title>如何使用js使table按照表头排序</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div style="text-align: center;margin: 10px;">
<button type="button" style="width: 200px;" class="btn btn-outline-danger">按照表头排序</button>
</div>
<table class="table table-hover" style="width: 80%;text-align:center;margin: 0 auto;border: 0;" id="sorttable">
<thead class="thead-dark">
<tr>
<th>Fri</th>
<th>Thu</th>
<th>Wed</th>
<th>Tue</th>
<th>Mon</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone(true);
var copy_from = $(this).clone(true);
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
jQuery.moveColumn = function(table, from, to) {
var rows = jQuery('tr', table);
var cols;
rows.each(function() {
cols = jQuery(this).children('th, td');
cols.eq(from).swapWith(cols.eq(to));
});
};
$(function() {
$("button").click(function() {
var tbl = $("#sorttable");
$('#sorttable tr').eq(0).each(function(i) { // 遍历 tr
var length = $(this).find('th').length;
for (var i = 0; i < length / 2; i++) {
jQuery.moveColumn(tbl, i, length - i - 1);
}
});
});
});
</script>
</html>
未排序前
排序后
参考资料
使用 JQuery 实现将 table 按照列排序的更多相关文章
- jQuery 选择表格(table)里的行和列及改变简单样式
本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...
- jquery的DataTable按列排序
不管你用SQL查询数据时,是如何排序的,当数据传递给DataTable时,它会按照它自己的规则再进行一次排序,这个规则就是"order" 可以使用以下代码来进行排序 $('#exa ...
- Jtable 表格按多列排序(支持中文汉字排序)
这两天公司让做一个Jtable表格的排序,首先按A列排序,在A列相等时按B列排序,B列相等时按C列排序,ABC三列可以任意指定,最多分三列,这样的一个需求.由于我是大神,所以必须做了出来.ok,不自恋 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- 非常强大的table根据表头排序,点击表头名称,对其内容排序
js代码: /** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 ...
- iot表输出按主键列排序,heap表不是
<pre name="code" class="html"> create table t1 (id char(10) primary key,a1 ...
- BootstrapTable的列排序怎么搞
1.BootstrapTable的列排序怎么搞. 先搞一个table,使用ajax将数据查询出来,然后可以在所有列都加上排序.满足自己的需求. data-sortable="true&quo ...
- 【变态需求】bootstrapTable列排序-选择正序倒序不排序
产品经理:那个table排序能不能点击后弹个选项选择正序倒序不排序? -- 那个是bootstrapTable的插件!不支持!改不了!! 注意:数据上假的,效果看http请求参数进行脑补 这是boot ...
- js&jquery获取指定table指定行里面的内容
js&jquery获取指定table指定行里面的内容 CreateTime--2018年5月18日11:46:04 Author:Marydon 1.展示 代码展示 <table s ...
随机推荐
- 对于redis框架的理解(四)
上一篇讲述了eventloop的结构和创建,添加文件事件删除文件事件,派发等等. 而eventloop主要就是调用不同网络模型完成事件监听和派发的. 这一篇主要讲述epoll网络模型,redis是如何 ...
- redis 字符串的管理的一点理解
redis字符串可以实现通过地址偏移找到所在结构体的首地址,struct sdshdr *sh = (void *)(s - (sizeof(struct sdshdr))) 也就是通过buf地址可以 ...
- Qt ------ 我定义的规则 之 对象命名规则
类型 + 特性,比如 button_closeLigth 非公有的变量前面要加上小写m_ (指的修饰符为private时) 静态变量前面加上小写s_ 其它变量以小写字母开头 静态变量全大写 (sta ...
- PHP扩展开发--02.包裹第三方的扩展
背景 也许最常见的PHP扩展是那些包裹第三方C库的扩展.这些扩展包括MySQL或Oracle的数据库服务库,libxml2的 XML技术库,ImageMagick 或GD的图形操纵库. 在本节中,我们 ...
- 基于HDP3.0的基础测试
1,TestDFSIO write和read的性能测试, 测试hadoop读写的速度.该测试为Hadoop自带的测试工具,位于$HADOOP_HOME/share/hadoop/mapreduce目录 ...
- 【BZOJ】3238: [Ahoi2013]差异
[题意]给定长度为n的小写字母字符串,令Ti表示以i开头的后缀,求Σ[Ti+Tj-2*lcp(Ti,Tj)],1<=i<j<=n. [算法]后缀自动机 [题解]Σ(Ti+Tj)只与n ...
- 【CodeForces】960 F. Pathwalks 主席树+动态规划
[题目]F. Pathwalks [题意]给定n个点m条边的有向图,可能不连通有重边有自环.每条边有编号 i 和边权 wi ,求最长的路径(可以经过重复节点)满足编号和边权都严格递增.n,m,wi&l ...
- UVA - 10494 If We Were a Child Again
用java写的大数基本操作,java要求的格式比较严谨. import java.util.*; import java.math.*; public class Main { public stat ...
- python模块之imghdr检测图片类型
1. imghdr是什么 imghdr是一个用来检测图片类型的模块,传递给它的可以是一个文件对象,也可以是一个字节流. 能够支持的图片格式: 2. 如何使用 提供了一个api叫做imghdr.what ...
- 南邮综合题writeup
http://teamxlc.sinaapp.com/web3/b0b0ad119f425408fc3d45253137d33d/index.php fuckjs直接console得到地址 http: ...