具备排序功能的表格(JS+CSS+table)

合集下载

sortablejs和el-table使用

SortableJS 是一个现代化的、轻量级的库，用于使任何HTML表格元素可排序。

它允许用户通过拖放来动态地重新排列表格行，同时提供了多种可自定义的选项和回调函数，使得对表格的排序行为能够完全按照开发者的意愿来进行。

在Vue.js框架中，我们通常使用element-ui来构建用户界面。

Element UI 中的 el-table 是一个非常常用的组件，它提供了丰富的可配置选项和强大的功能，用于展示和操作表格数据。

结合SortableJS 和 el-table 的使用，可以让我们在Vue.js项目中轻松实现表格的拖拽排序功能。

接下来，我们将详细介绍如何在Vue.js项目中使用SortableJS 和 el-table 来实现表格的拖拽排序，以及一些注意事项。

一、安装SortableJS和element-ui在使用之前，我们首先需要安装SortableJS 和element-ui 这两个库。

在Vue.js项目中，我们可以通过npm或yarn来进行安装。

1. 安装SortableJS在命令行中运行以下命令来安装SortableJS：```bashnpm install sortablejs```2. 安装element-ui在命令行中运行以下命令来安装element-ui：```bashnpm install element-ui```安装完成之后，我们就可以开始在Vue.js项目中使用这两个库了。

二、在Vue.js项目中使用SortableJS在Vue.js项目中使用SortableJS，我们首先需要引入它，并在需要进行排序的表格上添加相应的指令和事件处理函数。

1. 引入SortableJS在需要使用SortableJS的组件中，首先需要引入SortableJS：```javascriptimport Sortable from 'sortablejs';```2. 编写排序方法在组件的生命周期钩子函数中，我们可以编写一个方法，用来初始化SortableJS，并设置相关的选项和回调函数：```javascriptexport default {mounted() {this.initSortable();},methods: {initSortable() {new Sortable(this.$refs.sortableTable, {animation: 150,onEnd: (evt) => {// 拖拽结束后的操作// evt.oldIndex 表示拖动前的位置// evt.newIndex 表示拖动后的位置// 可以在这里处理数据的更新}});}}}```在这个例子中，我们在组件的 mounted 钩子函数中调用了initSortable 方法，用来初始化SortableJS。

20个很漂亮的CSS表格

并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。

现在让我们来看看这些表格：（点击每个样式前面的链接即可进入下载）#1. TableclothTablecloth 由CSS Globe开发，是一个轻量级的、易于使用的表格，以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。

#2. Ask the CSS Guy TableAsk the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格，例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。

#3. A CSS styled table version 2Veerle Duoh为我们介绍了一种如何利用CSS 使表格更有吸引力的方法，并且在实现的过程中充分考虑了表格的可访问性。

#4. Sortable TableSortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。

#5. Row Locking with CSS and JavaScript演示了如何利用Javascript 和CSS 实现“锁定行”的效果，选中的行会一直显示高亮效果直到用户再次点击才会消失。

#6. Vertical scrolling tables如果你有大量的数据但是没有足够大的空间来显示它，这会是一个很好的解决办法。

通过CSS 固定表格的页眉和页脚，但是内容却可以滚动显示。

#7. Replicating a Tree table利用HTML 和CSS 建立的树状表格。

#8. Collapsible tables with DOM and CSS利用DOM 和CSS 建立的可折叠的表格效果。

表格页脚部分包含的箭头有一个名为“footcollapse”的类，通过为之添加Javascript 代码可以让表格展开或折叠。

jquery.tableSort.js表格排序插件使用方法详解

jquery.tableSort.js表格排序插件使⽤⽅法详解本⽂实例为⼤家分享了jquery.tableSort.js表格排序的具体代码，供⼤家参考，具体内容如下1.⼀定要引jQuery包，所有jq插件都是基于jQuery包的2.如果想指定哪⼀栏不排序这样写 $(“#mytable”).tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了参考：///article/105217.htm<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery-1.9.0.min.js"></script><script type="text/javascript" src="js/jquery.tablesort.js"></script><style type="text/css">#tip {border: solid 1px black;width: 358px;line-height: 21px;height: 21px;padding: 2px 10px;background-color: pink;font-size: 12px;text-align: center;margin: 10px auto 10px;}.table {width: 380px;margin: 0 auto;border-collapse: collapse;text-align: center;}.table tr td,.table tr th {background: greenyellow;border: solid 1px red;color: #666;height: 30px;/*line-height: 30px;*/}.table tr th {background: #89AFB1;color: red;text-align: center;font-size: 14px;}.table a,.table a:visited {color: red;text-decoration: none}.table a:hover,.table a:active {color: blue;text-decoration: none}</style><script type="text/javascript">$(function() {$('table').tablesort().data('tablesort');var i = 0;$(".table tr th a").click(function() {if (i % 2 == 0) {$(".sj").text('升序');i++;} else {$(".sj").text('降序');i++;}})})</script></script></head><body><div id="tip">默认⽆排列规则(<span class="sj">----</span>)</div><table id="tbStudent" class="table"><tr><th><a class="num" href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编号</a></th> <th><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >姓名</a></th><th><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >性别</a></th><th><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >总分</a></th></tr><tr><td>1031</td><td>李渊</td><td>男</td><td>654</td></tr><tr><td>1021</td><td>张扬</td><td>男</td><td>624</td></tr><tr><td>1011</td><td>吴敏</td><td>⼥</td><td>632</td></tr><tr><td>1026</td><td>李⼩明</td><td>男</td><td>610</td></tr><tr><td>1016</td><td>周谨</td><td>⼥</td><td>690</td></tr><tr><td>1041</td><td>谢⼩敏</td><td>⼥</td><td>632</td></tr><tr><td>1072</td><td>刘明明</td><td>男</td><td>633</td></tr><tr><td>1063</td><td>蒋忠公</td><td>男</td><td>675</td></tr></table></body></html>源码下载：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

jquery实现的table排序功能示例

jquery实现的table排序功能⽰例本⽂实例讲述了jquery实现的table排序功能。

分享给⼤家供⼤家参考，具体如下：<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title></head><style type="text/css">div{width: 1024px;margin: 0 auto; /*div相对屏幕左右居中*/}table{border: solid 1px #666;border-collapse: collapse;width: 100%;cursor: default; /*该属性定义了⿏标指针放在⼀个元素边界范围内时所⽤的光标形状,default默认光标（通常是⼀个箭头）*/ }tr{border: solid 1px #666;height: 30px;}table thead tr{background-color: #ccc;}td{border: solid 1px #666;}th{border: solid 1px #666;text-align: center;cursor: pointer; /*光标呈现为指⽰链接的指针（⼀只⼿）*/}.sequence{text-align: center;}.hover{background-color: #3399FF;}</style><SCRIPT type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {var tableObject = $('#tableSort'); //获取id为tableSort的table对象var tbHead = tableObject.children('thead'); //获取table对象下的theadvar tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的thvar tbBody = tableObject.children('tbody'); //获取table对象下的tbodyvar tbBodyTr = tbBody.find('tr'); //获取tbody下的trvar sortIndex = -1;tbHeadTh.each(function () {//遍历thead的tr下的thvar thisIndex = tbHeadTh.index($(this)); //获取th所在的列号//给表态th增加⿏标位于上⽅时发⽣的事件$(this).mouseover(function () {tbBodyTr.each(function () {//编列tbody下的trvar tds = $(this).find("td"); //获取列号为参数index的td对象集合$(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式});var tds = $(this).find("td");$(tds[thisIndex]).removeClass("hover");//⿏标离开时移除td对象上的样式});});$(this).click(function () {//给当前表头th增加点击事件var dataType = $(this).attr("type");//点击时获取当前th的type属性值checkColumnValue(thisIndex, dataType);});});$("tbody tr").removeClass(); //先移除tbody下tr的所有css类//table中tbody中tr⿏标位于上⾯时添加颜⾊,离开时移除颜⾊$("tbody tr").mouseover(function () {$(this).addClass("hover");}).mouseout(function () {$(this).removeClass("hover");});//对表格排序function checkColumnValue(index, type) {var trsValue = new Array();tbBodyTr.each(function () {var tds = $(this).find('td');//获取⾏号为index列的某⼀⾏的单元格内容与该单元格所在⾏的⾏内容添加到数组trsValue中trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());$(this).html("");});var len = trsValue.length;if (index == sortIndex) {//如果已经排序了则直接倒序trsValue.reverse();} else {for (var i = 0; i < len; i++) {//split() ⽅法⽤于把⼀个字符串分割成字符串数组//获取每⾏分割后数组的第⼀个值,即此列的数组类型,定义了字符串\数字\Iptype = trsValue[i].split(".separator")[0];for (var j = i + 1; j < len; j++) {//获取每⾏分割后数组的第⼆个值,即⽂本值value1 = trsValue[i].split(".separator")[1];//获取下⼀⾏分割后数组的第⼆个值,即⽂本值value2 = trsValue[j].split(".separator")[1];//接下来是数字\字符串等的⽐较if (type == "number") {value1 = value1 == "" ? 0 : value1;value2 = value2 == "" ? 0 : value2;if (parseFloat(value1) > parseFloat(value2)) {var temp = trsValue[j];trsValue[j] = trsValue[i];trsValue[i] = temp;}} else if (type == "ip") {if (ip2int(value1) > ip2int(value2)) {var temp = trsValue[j];trsValue[j] = trsValue[i];trsValue[i] = temp;}} else {if (value1.localeCompare(value2) > 0) {//该⽅法不兼容⾕歌浏览器var temp = trsValue[j];trsValue[j] = trsValue[i];trsValue[i] = temp;}}}}}for (var i = 0; i < len; i++) {$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);}sortIndex = index;}//IP转成整型function ip2int(ip) {var num = 0;ip = ip.split(".");num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); return num;})</script><BODY><div><table id="tableSort"><thead><tr><th type="number">序号</th><th type="string">书名</th><th type="number">价格（元）</th><th type="string">出版时间</th><th type="number">印刷量（册）</th><th type="ip">IP</th></tr></thead><tbody><tr class="hover"><td class="sequence"> 1</td><td>狼图腾</td><td>29.80</td><td>2009-10</td><td>50000</td><td>192.168.1.125</td></tr><tr><td class="sequence"> 2</td><td>孝⼼不能等待</td><td>29.80</td><td>2009-09</td><td>800</td><td>192.68.1.125</td></tr><tr><td class="sequence"> 3</td><td>藏地密码2</td>2008-10</td><td></td><td>192.102.0.12</td></tr><tr><td class="sequence">4</td><td>藏地密码1</td><td>24.80</td><td>2008-10</td><td></td><td>215.34.126.10</td></tr><tr><td class="sequence">5</td><td>设计模式之禅</td><td>69.00</td><td>2011-12</td><td></td><td>192.168.1.5</td></tr><tr><td class="sequence">6</td><td>轻量级 Java EE 企业应⽤实战 </td><td>99.00</td><td>2012-04</td><td>5000</td><td>192.358.1.125</td></tr><tr><td class="sequence">7</td><td>Java 开发实战经典<td>2012-01</td><td>2000</td><td>192.168.1.25</td></tr><tr><td class="sequence" onclick="sortArray()">8</td><td>Java Web 开发实战经典</td><td>69.80</td><td>2011-11</td><td>2500</td><td>215.168.54.125</td></tr></tbody></table></div></body></html>运⾏效果图如下：更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。

ant design vue table排序通用方法

ant design vue table排序通用方法标题：Ant Design Vue Table 排序通用方法详解在当今的Web开发中，数据展示是必不可少的一部分。

而Vue.js作为一款流行的前端框架，为我们提供了强大的数据操作和展示功能。

在Vue生态系统中，Ant Design Vue是一个优秀的UI库，其中的Table组件是我们进行数据展示的常用工具。

然而，如何高效地对Table中的数据进行排序，是我们需要掌握的关键技能。

本文将详细介绍Ant Design Vue Table排序通用方法。

一、了解Ant Design Vue TableAnt Design Vue Table 是一个高度封装的表格组件，具有丰富的功能和优雅的外观。

它支持多种表格操作，包括但不限于增删改查、分页、筛选、排序等。

对于开发者来说，只需要简单配置即可实现复杂的功能。

二、 Ant Design Vue Table 排序原理Ant Design Vue Table 的排序主要依赖于其内部的SorterMixin。

这个mixin 为Table提供了一种通用的排序机制。

当用户点击表头的排序图标时，SorterMixin会捕获到这个事件，并根据当前的排序状态和用户的选择，重新计算表格的数据源。

三、使用Ant Design Vue Table 排序在实际应用中，我们可以通过以下步骤来使用Ant Design Vue Table的排序功能：1. 引入Table组件首先，我们需要在项目中引入Ant Design Vue的Table组件。

这可以通过安装ant-design-vue包并导入Table组件来实现。

2. 设置列定义然后，我们需要设置Table的列定义（columns）。

在这个过程中，我们可以指定哪些列可以被排序，以及它们的默认排序方式。

3. 实现数据更新最后，我们需要在Table的data属性中提供数据源。

每当用户改变排序选项时，我们需要更新这个数据源以反映新的排序结果。

ant design vue table排序通用方法

ant design vue table排序通用方法标题：Ant Design Vue Table排序通用方法的详解在前端开发中，表格是一个非常重要的组件。

无论是数据展示，还是数据操作，我们都需要用到表格。

Ant Design Vue作为一款优秀的UI库，提供了丰富的表格功能，包括但不限于：分页、过滤、排序等。

本文主要探讨的就是Ant Design Vue Table的排序通用方法。

首先，我们要明确一点，Ant Design Vue Table的排序并不是一个单独的功能，而是依赖于其内部的数据管理机制。

也就是说，你不能直接调用一个“排序”函数来实现排序，而是需要通过修改表格的数据源（dataSource）来达到排序的效果。

那么，如何修改dataSource呢？这就需要用到JavaScript的数组方法了。

在这里，我推荐使用sort()方法。

sort()方法会按照字典顺序对数组的所有元素进行排序，并返回数组。

如果想让数组按照其他标准进行排序，可以传入一个比较函数作为参数。

举个例子，假设我们有一个包含用户信息的数组：```javascriptlet users = [{ name: 'Tom', age: 20 },{ name: 'Jerry', age: 25 },{ name: 'Spike', age: 18 }];```如果我们想按照年龄从小到大排序，可以这样做：```javascriptusers.sort((a, b) => a.age - b.age);```这行代码的意思是：对于数组中的每一对元素，都比较它们的age属性。

如果a的age小于b的age，就认为a应该排在b前面，反之亦然。

回到Ant Design Vue Table，我们可以把上面的代码稍作修改，应用到实际项目中。

首先，我们需要获取到表格的dataSource：```javascriptlet dataSource = this.$refs.table.state.dataSource;```然后，我们可以使用sort()方法对dataSource进行排序：```javascriptdataSource.sort((a, b) => a.age - b.age);```最后，我们需要更新表格的状态，让它显示新的数据：```javascriptthis.$refs.table.setState({ dataSource });```以上就是Ant Design Vue Table排序的基本思路。

JS实现点击表头表格自动排序（含数字、字符串、日期）

JS实现点击表头表格⾃动排序（含数字、字符串、⽇期）这篇⽂章主要介绍了利⽤JS如何实现点击表头后表格⾃动排序，其中包含数字排序、字符串排序以及⽇期格式的排序，⽂中给出了完整的⽰例代码，并做了注释，相信⼤家都能看懂，感兴趣的朋友们⼀起来看看吧。

<!DOCTYPE><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>JS实现点击表头表格⾃动排序（含数字、字符串、⽇期）</title><style>#tableSort {moz-user-select: -moz-none;-moz-user-select: none;-o-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;border-collapse: collapse;border-spacing: 0;margin: 0;padding: 0;width: 100%;text-align: center;margin: 15px 0;}#tableSort th {cursor: pointer;background: #eee}#tableSort tr:nth-child(even) {background: #f9f9f9}#tableSort th,#tableSort td {padding: 10px;border: 1px solid #ccc;}</style></head><body><table id="tableSort"><thead><tr><th data-type="num">ID</th><th data-type="string">姓名</th><th data-type="string">性别</th><th data-type="date">时间</th></tr></thead><tbody><tr><td>07</td><td>zzzz</td><td>男</td><td>2012-12-12</td></tr><tr><td>03</td><td>yyyy</td><td>⼥</td><td>2013-12-16</td></tr><tr><td>01</td><td>hhhh</td><td>男</td><td>2014-12-12</td></tr><tr><td>04</td><td>wwww</td><td>⼥</td><td>2018-01-12</td></tr><tr><td>02</td><td>dddd</td><td>男</td><td>2016-12-18</td></tr><tr><td>06</td><td>ssss</td><td>⼥</td><td>2018-03-16</td></tr><tr><td>05</td><td>tttt</td><td>男</td><td>2017-07-22</td></tr></tbody></table><script>;(function() {var tbody = document.querySelector('#tableSort').tBodies[0];var th = document.querySelector('#tableSort').tHead.rows[0].cells;var td = tbody.rows;for(var i = 0; i < th.length; i++) {th[i].flag = 1;th[i].onclick = function() {sort(this.getAttribute('data-type'), this.flag, this.cellIndex);this.flag = -this.flag;};};function sort(str, flag, n) {var arr = [];//存放DOMfor(var i = 0; i < td.length; i++) {arr.push(td[i]);};//排序arr.sort(function(a, b) {return method(str, a.cells[n].innerHTML, b.cells[n].innerHTML) * flag;});//添加for(var i = 0; i < arr.length; i++) {tbody.appendChild(arr[i]);};};//排序⽅法function method(str, a, b) {switch(str) {case 'num': //数字排序return a - b;break;case 'string': //字符串排序return a.localeCompare(b);break;default: //⽇期排序，IE8下'2012-12-12'这种格式⽆法设置时间，替换成'/'return new Date(a.split('-').join('/')).getTime() - new Date(b.split('-').join('/')).getTime(); };};})();</script></body></html>效果图：按时间排序（其他效果⼤家可以⾃⼰在本地预览）：转载于：。

jsp+js实现可排序表格

首先，定义一个js：tableSort.js:function sort(tableId, sortColumn,nodeType) {var table = document.getElementById("theTable");var tableBody = table.tBodies[0];var tableRows = tableBody.rows;var rowArray = new Array();for (var i = 0; i < tableRows.length; i++) {rowArray[i] = tableRows[i];}if (table.sortColumn == sortColumn) {rowArray.reverse();} else {rowArray.sort(generateCompareTR(sortColumn, nodeType));}var tbodyFragment = document.createDocumentFragment();for (var i = 0; i < rowArray.length; i++) {tbodyFragment.appendChild(rowArray[i]);}tableBody.appendChild(tbodyFragment);table.sortColumn = sortColumn;}function generateCompareTR(sortColumn, nodeType) {return function compareTR(trLeft, trRight) {var leftValue = convert(trLeft.cells[sortColumn].firstChild.nodeValue, nodeType);var rightValue = convert(trRight.cells[sortColumn].firstChild.nodeValue, nodeType); if (leftValue < rightValue) { return -1; } else {if (leftValue > rightValue) { return 1;} else {return 0;}}};}function convert(value, dataType) { switch (dataType) { case "int": return parseInt(value); case "float": return parseFloat(value); case "date": return new Date(Date.parse(value)); default: return value.toString(); }}然后是使用：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'tabel.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"><script type="text/javascript" src="userjs/tableSort.js"></script></head><body><table id="theTable" align="center" border="1"><tr><td>标题1</td><td onclick="sort(theTable,1,'int')"> 标题2</td><td onclick="sort(theTable,2,'int')"> 标题3</td><td onclick="sort(theTable,3,'int')"> 标题4</td><td onclick="sort(theTable,4,'int')"> 标题5</td><td onclick="sort(theTable,5,'int')"> 标题6</td><td onclick="sort(theTable,6,'int')"> 标题7</td></tr></thead><tbody><tr><td></td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr><tr><td>2</td><td>3</td>5</td><td>6</td><td>7</td><td>1</td> </tr><tr><td>3</td><td>4</td><td>5</td><td>6<td>1</td><td>2</td> </tr><tr><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td></td> </tr><tr><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><tr><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></tbody></table></body></html>之后就可以看到效果了。

tablesorter.js表格排序使用方法（支持中文排序）

tablesorter.js表格排序使⽤⽅法（⽀持中⽂排序）最近，因为项⽬需要，对表格排序做了⼀下摸索，整理如下：1. ⾸先，可从官⽹下载tablesorter.js，但并不⽀持中⽂的排序，对其源码进⾏修改：部分源码：function sortText(a, b) {return ((a < b) ? -1 : ((a > b) ? 1 : 0));};function sortTextDesc(a, b) {return ((b < a) ? -1 : ((b > a) ? 1 : 0));};修改后：function sortText(a,b) {return a.localeCompare(b);};function sortTextDesc(a,b) {return b.localeCompare(a);};修改完之后的js可⽀持中⽂的排序。

2.建⽴⼀个表格，格式如下：<table><thead><tr><th></th></tr></thead><tr><td></td></tr></table><html><head><title>jquery.tablesorter</title><script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript" src="/manage/plugin/tablesorter/tablesorter.js"></script><link rel="stylesheet" href="/manage/plugin/tablesorter/blue/style.css type=" rel="external nofollow" text/css" /><script type="text/javascript">$("#mytable").tablesorter();</script></head><body><table id="mytable" border="1" class="tablesorter"><thead><tr><th class="header">First Name</th><th class="header">Last Name</th><th class="header">Age</th><th class="header">Total</th><th class="header">Discount</th><th class="header">Date</th><th class="header">State</th></tr></thead><tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td><td>已审核</td></tr><tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td><td>已审核</td></tr><tr><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td><td>已作废</td></tr><tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td><td>待审核</td></tr><tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td><td>已⽣效</td></tr></table></body></html>页⾯显⽰如图所⽰：点击表头，就能够排序。

前端框架中的表格排序与筛选技巧

前端框架中的表格排序与筛选技巧在前端开发中，表格是页面常见的数据展示方式之一。

为了让用户更方便地浏览和查找数据，表格的排序和筛选功能非常重要。

在使用前端框架进行开发时，可以借助框架提供的 API 和组件，快速实现表格的排序和筛选功能。

本文将介绍几种常用的前端框架中的表格排序与筛选技巧。

一、排序技巧1. 列头点击排序：在表格中，通常会给列头添加一个排序的图标，表示该列是否处于升序或降序的状态。

当用户点击列头时，可以通过监听事件，在前端框架中实现表格数据的排序。

具体实现方式如下：```// HTML<th @click="sortBy('columnName')">Column Name<i v-show="sortKey === 'columnName'" :class="sortOrders[columnName] === 1 ? 'fa fa-caret-down' : 'fa fa-caret-up'"></i></th>// JavaScriptsortBy(columnName) {this.sortKey = columnName;this.sortOrders[columnName] = this.sortOrders[columnName] * -1;this.tableData.sort((a, b) => {return a[columnName].localeCompare(b[columnName]) *this.sortOrders[columnName];});}```以上代码在点击列头时，通过改变 `sortOrders` 数组中对应字段的值实现升序和降序的切换，然后使用 `Array` 的 `sort` 方法对表格数据进行排序。

table排序(js版)

table排序(js版)代码说明:1.html 表格行排序调用示例: sortTableT.sort('sortTable',0,'Number');2.支持的排序数据类型有:{'Number' ,'String' ,'Date' ,'NoCaseString'}{数值, 字符串, 日期, 不区分大小写字符串}3.开始默认为升序,可指定开始为降序排序.4.可指定是否对所有tbody 排序,默认为排序第一个tbody5.IE8 , Firefox/3.6.24 下测试通过.代码:1.tableSortTool.js/** object* example : sortTableT.sort('sortTable',0,'Number')***/var sortTableT = new SortTableTool();/** function* SortTableTool*/function SortTableTool(){/** is sort all tBodies */this.isSortAlltBodies = false;/** is first descending sort by sortColumn */this.first_descending = false;};/** SortTableTool.sort* tableId : table.id* sortColumn : cell's index of row* nodeType : {'Number' ,'String' ,'Date' ,'NoCaseString'}* _first_descending : is first descending ,descending is default false.*/SortTableTool.prototype.sort = function(tableId, sortColumn ,nodeType ,_first_descending) {var table = document.getElementById(tableId);var _tBodies_length = this.isSortAlltBodies ? table.tBodies.length : 1;var rowArray = new Array();var rowIndex = 0;for(var t=0 ; t< _tBodies_length ; t++){var tableBody = table.tBodies[t];var tableRows = tableBody.rows;for (var i = 0; i < tableRows.length; i++) {rowArray[rowIndex++] = tableRows[i];}}if( !isNULL(_first_descending) && ( _first_descending == true || _first_descending == false)){this.first_descending = _first_descending;}else{this.first_descending = false;}if (table.sortColumn == sortColumn) {rowArray.reverse();} else {rowArray.sort(generateCompareTR(sortColumn, nodeType));if(this.first_descending){rowArray.reverse();}}var tbodyFragment = document.createDocumentFragment();for (var i = 0; i < rowArray.length; i++) {tbodyFragment.appendChild(rowArray[i]);}tableBody.appendChild(tbodyFragment);table.sortColumn = sortColumn;}/*** generateCompareTR* @return*/var generateCompareTR = function(sortColumn, nodeType) {return function compareTR(trLeft, trRight) {var left_firstChild = trLeft.cells[sortColumn].firstChild;var right_firstChild = trRight.cells[sortColumn].firstChild;var leftValue = convertData(left_firstChild == null ? "" :left_firstChild.nodeValue, nodeType);var rightValue = convertData(right_firstChild == null ? "" :right_firstChild.nodeValue, nodeType);if (leftValue < rightValue) {return -1;}else if (leftValue > rightValue) {return 1;}else{return 0;}};}/**function : convertData* _value : string value* _dataType : {'Number' ,'String' ,'Date' ,'NoCaseString'}* @return*/var convertData = function(_value, _dataType) {var value = isNULL(_value) ? "" : _value;var dataType = isNULL(_dataType) ? null : _dataType.toLowerCase();var v_result = null;switch (dataType) {case "number":v_result = new Number(value.trim().replace(/,/g,''));return isNaN(v_result) ? null : v_result ;case "string":return value.toString();case "nocasestring":return value.toString().toLowerCase();case "date":v_result = new Date(Date.parse(value.trim().trimNBSP().replace(/-/g,'/')));return isNaN(v_result) ? null : v_result;default:return value.toString();}}/*** isNULL()* @return true or false*/var isNULL=function(v){return v == null || typeof(v) == 'undefined';}/*** String.prototype.trim()* @return*/String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g, '');}String.prototype.ltrim=function(){return this.replace(/(^\s*)/g,'');}String.prototype.rtrim=function(){return this.replace(/(\s*$)/g,'');}/*** String.prototype.trimNBSP()* @return*/String.prototype.trimNBSP=function(){return this.replace(/^[\s\u3000\xA0]+|[\s\u3000\xA0]+$/g, '');}String.prototype.ltrimNBSP=function(){return this.replace(/^[\s\u3000\xA0]+/g,'');}String.prototype.rtrimNBSP=function(){return this.replace(/[\s\u3000\xA0]+$/g,'');}//------------------ over --------------------------2.Html代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>SortTableTool</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="SortTableTool"><script type="text/javascript" src="tableSortTool.js"></script><script type="text/javascript">sortTableT.isSortAlltBodies = true;</script></head><body><center><h5>表格-行排序</h5></center><center><h3>2011世界主要经济体GDP排名</h3></center><table id="sortTable" align="center" border="1"><thead><tr><td onclick="sortTableT.sort('sortTable',0,'Number' ,false)">排名</td><td onclick="sortTableT.sort('sortTable',1,'String')">国家</td><td onclick="sortTableT.sort('sortTable',2,'Number' ,true)">GDP</td><td onclick="sortTableT.sort('sortTable',3,'Date')">国庆日</td></tr></thead><tbody><tr bgcolor="#FF4500"><td>2<input type="text" name="id" value="2" size="2"> </td><td>中国</td><td>5,745,133</td><td>2011-10-1</td></tr><tr bgcolor="#FF0000"><td>1<input type="text" name="id" value="1" size="1"></td><td>美国</td><td>14,624,184</td><td>2011-7-4</td></tr></tbody><tbody><tr bgcolor="#FA8072"><td>4<input type="text" name="id" value="4" size="4"></td><td>德国</td><td>3,305,898</td><td>2011-10-3</td></tr><tr bgcolor="#F4A460"><td>3<input type="text" name="id" value="3" size="3"></td><td>日本</td><td>5,390,897</td><td>2011-2-11</td></tr><tr bgcolor="#FA8072"><td>9<input type="text" name="id" value="9" size="9"></td><td>加拿大</td><td>1,563,664</td><td>2011-7-1</td></tr><tr bgcolor="#F4A460"><td>10<input type="text" name="id" value="10" size="10"></td><td>俄国</td><td>1,476,912</td><td>2011-6-12</td></tr><tr bgcolor="#FA8072"><td>8<input type="text" name="id" value="8" size="8"></td><td>巴西</td><td>2,023,528</td><td>2011-9-7</td></tr><tr bgcolor="#F4A460"><td>5<input type="text" name="id" value="5" size="5"></td><td>法国</td><td>2,555,439</td><td>2011-7-14</td></tr><tr bgcolor="#FA8072"><td>6<input type="text" name="id" value="6" size="6"></td><td>英国</td><td>2,258,565</td><td></td></tr><tr bgcolor="#F4A460"><td>7<input type="text" name="id" value="7" size="7"></td><td>意大利</td><td>2,036,687</td><td>2011-6-2 </td></tr></tbody></table></body></html>3.排序效果。

web前端中table的各种用法

Web前端中，表格（table）是一种常用的HTML元素，用于展示和组织数据。

在实际开发过程中，表格的使用非常普遍，可以用于展示各种数据，比如排行榜、商品列表、数据报表等等。

本文将介绍Web 前端中table的各种用法，包括但不限于表格的基本结构、样式调整、事件处理、响应式布局等方面，帮助读者更好地掌握表格的灵活运用。

一、表格的基本结构在HTML中，表格由table、tr、td等元素构成。

其中，table是表格的容器，tr代表表格的一行，td代表表格中的单元格。

下面是一个简单的表格结构示例：```html<table><tr><td>尊称</td><td>芳龄</td></tr><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>28</td></tr></table>```上面的代码定义了一个包含尊称和芳龄信息的简单表格，每个tr代表一行数据，每个td代表一个单元格。

这是表格的基本结构，我们可以根据实际需求，灵活运用这些元素，构建不同形式的表格。

二、表格的样式调整1. 表格边框样式在CSS中，可以通过border属性来设置表格的边框样式，具体示例如下：```csstable {border: 1px solid #000;}td {border: 1px solid #000;}```上面的代码定义了表格和单元格的边框样式，可以根据需要调整border的值，实现不同的边框效果。

2. 表格的宽度和高度除了边框样式，我们还可以通过CSS来设置表格的宽度和高度，具体示例如下：```csstable {width: 100;}td {height: 30px;}```上面的代码定义了表格的宽度为100，单元格的高度为30px，这样可以让表格在页面中占据合适的空间，使页面布局更加美观。

elementui中table表格拖拽排序

标题：深度探讨elementui中的table表格拖拽排序功能在现代网页应用程序开发中，表格是一个十分常见的UI组件。

在使用Vue.js框架时，Element UI是一个十分常用的组件库，其中的table 表格组件支持拖拽排序功能，大大提高了用户的交互体验。

本文将对Element UI中table表格拖拽排序功能进行深入探讨，以帮助读者更好地理解和应用这一功能。

一、了解Element UI中table表格的基本使用在谈论表格拖拽排序功能前，首先需要了解Element UI中table表格的基本使用方法。

在Vue.js中引入Element UI后，可以很方便地使用table组件来展示数据，实现分页、排序等功能。

使用table组件可以大大减少开发工作量，同时具有良好的扩展性和定制性。

二、介绍table表格拖拽排序功能的实现原理Element UI中的table表格拖拽排序功能是基于拖拽事件和数据重新排序来实现的。

通过监听拖拽事件，可以获取拖拽的起始位置和目标位置，然后重新排序表格中的数据，从而实现拖拽排序的效果。

这一功能的实现原理十分简单，但是在实际应用中却能带来极大的便利。

三、探讨table表格拖拽排序功能的应用场景table表格拖拽排序功能可以应用于各种需要对数据进行自定义排序的场景。

在后台管理系统中，管理员可能需要根据自己的需求对数据进行排序，这时拖拽排序功能就能够提供很大的帮助。

另外，在团队协作的应用中，也可以通过拖拽排序来调整任务的优先级或者其他数据的排列顺序。

四、如何在Element UI中使用table表格拖拽排序功能要在Element UI中使用table表格拖拽排序功能，首先需要在table组件上添加拖拽事件监听，然后在事件处理函数中实现数据的重新排序。

可以通过Vue.js框架提供的响应式数据和计算属性来实现数据的动态更新，并且可以结合Element UI提供的drag事件和sortable属性来实现拖拽排序功能。

elementui plus table 排序

elementui plus table 排序Element UI Plus 是一个基于 Vue.js 的组件库，它提供了丰富的 UI 组件，帮助开发者更高效地构建前端应用。

其中，Table 组件是一个常用的数据展示组件，支持排序功能。

下面将详细介绍 Element UI Plus Table 的排序功能。

Element UI Plus 的 Table 组件支持通过配置 sortable 属性来实现排序功能。

sortable 属性用于指定某一列是否可排序，它接受一个布尔值，true 表示该列可排序，false 表示不可排序。

当某一列设置了 sortable 属性为 true 时，该列的表头会显示一个默认的排序图标。

点击该图标，可以对当前列的数据进行升序或降序排序。

除了通过点击表头进行排序外，Element UI Plus 的 Table 组件还支持通过 API 进行排序。

具体实现方式是，在 Table 组件上绑定一个 default-sort 属性，该属性接受一个对象，用于指定默认的排序规则。

default-sort 对象的 prop 属性指定了排序的字段名，order 属性指定了排序的方式，可以是 'ascending' 或 'descending'。

例如，下面的代码片段展示了如何通过 API 设置默认的排序规则为按照 age 字段进行升序排序：html<el-table:data="tableData":default-sort="{prop: 'age', order: 'ascending'}"><el-table-columnprop="name"label="姓名"sortable></el-table-column><el-table-columnprop="age"label="年龄"sortable></el-table-column></el-table>除了基本的排序功能外，Element UI Plus 的 Table 组件还支持自定义排序函数。

JS实现的表格操作类详解（添加，删除，排序，上移，下移）

JS实现的表格操作类详解（添加，删除，排序，上移，下移）本⽂实例讲述了JS实现的表格操作类。

分享给⼤家供⼤家参考，具体如下：运⾏效果截图如下：点击此处查看。

具体代码如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">*{font-size:14px}button{margin:3px}</style><script type="text/javascript">var mytable=null,mytable2=null;window.onload=function(){mytable=new CTable("tbl",10);mytable2=new CTable("tbl2",6);}Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)}function $A(arrayLike){for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]);return ret}Function.prototype.bind = function() {var __method = this, args = $A(arguments), object = args.shift();return function() {return __method.apply(object, args.concat($A(arguments)));}}function CTable(id,rows){this.tbl=typeof(id)=="string"?document.getElementById(id):id;if (rows && /^\d+$/.test(rows)) this.addrows(rows)}CTable.prototype={addrows:function(n){ //随机添加n个trnew Array(n).each(this.add.bind(this))},add:function(){ //添加1个trvar self=this;var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1),td3= tr.insertCell(-1);var chkbox=document.createElement("INPUT")chkbox.type="checkbox"chkbox.onclick=self.highlight.bind(self)td1.appendChild(chkbox)td1.setAttribute("width","35")td2.innerHTML=Math.ceil(Math.random()*99)td3.innerHTML=Math.ceil(Math.random()*99)},del:function(){ //删除所选trvar self=this$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)})},up:function(){ //上移所选trvar self=thisvar upOne=function(tr){ //上移1个trif (tr.rowIndex>0){self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])self.getChkBox(tr).checked=true}}var arr=$A(self.tbl.rows).reverse()if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){for(var i=arr.length-1;i>=0;i--){if (self.getChkBox(arr[i]).checked){arr.pop()}else{break}}arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)});},down:function(){var self=thisvar downOne=function(tr){if (tr.rowIndex<self.tbl.rows.length-1) {self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);self.getChkBox(tr).checked=true;}}var arr=$A(self.tbl.rows)if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){for(var i=arr.length-1;i>=0;i--){if (self.getChkBox(arr[i]).checked){arr.pop()}else{break}}}arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)});},sort:function(){ //排序var self=this,order=arguments[0];var sortBy=function(a,b){if (typeof(order)=="number"){ //数字,则按数字指⽰的列排序return Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1; //转化为数字类型⽐较⼤⼩}else if (typeof(order)=="function"){ //为程序,按程序的返回结果排序return order(a,b);}else{return 1;}}$A(self.tbl.rows).sort(sortBy).each(function(x){var checkStatus=self.getChkBox(x).checked;self.tbl.firstChild.appendChild(x);if (checkStatus) self.getChkBox(x).checked=checkStatus;});},rnd:function(){ //随即选择⼏⾏trvar self=this,selmax=0,tbl=self.tbl;if (tbl.rows.length){selmax=Math.max(Math.ceil(tbl.rows.length/4),1); //选择的⾏数不超过tr数的1/4$A(tbl.rows).each(function(x){self.getChkBox(x).checked=false;self.restoreBgColor(x)})}else{return alert("⽆数据可以选")}new Array(selmax).each(function(){var tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)]self.getChkBox(tr).checked=true;self.highlight({target:self.getChkBox(tr)})})},highlight:function(){ //设置tr的背景⾊var self=this;var evt=arguments[0] || window.eventvar chkbox=evt.srcElement || evt.targetvar tr=chkbox.parentNode.parentNodechkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)},swapTr:function(tr1,tr2){ //交换tr1和tr2的位置var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;var tBody=tr1.parentNodetBody.replaceChild(tr2,tr1);tBody.insertBefore(tr1,target);},getChkBox:function(tr){ //从tr得到 checkbox对象return tr.cells[0].firstChild},restoreBgColor:function(tr){tr.style.backgroundColor="#ffffff"setBgColor:function(tr){tr.style.backgroundColor="#c0c0c0"}}function f(a,b){var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)}; return sumRow(a)>sumRow(b)?1:-1;}</script></head><body><button onClick="javascript:mytable.rnd()">随机选择⾏</button><button onClick="javascript:mytable.add()">添加⼀⾏</button><button onClick="javascript:mytable.del()">删除选定⾏</button><button onClick="javascript:mytable.up()">上移选定⾏</button><button onClick="javascript:mytable.down()">下移选定⾏</button><button onClick="javascript:mytable.sort(1)">按第⼀列数字排序</button><button onClick="javascript:mytable.sort(f)">按每⾏数据的和排序</button><table width=100%><tr><td valign="top"><table border id="tbl" width="80%"></table></td><td valign="top"><table border id="tbl2" width="80%"></table></td></tr></table><button onClick="javascript:mytable2.rnd()">随机选择⾏</button><button onClick="javascript:mytable2.add()">添加⼀⾏</button><button onClick="javascript:mytable2.del()">删除选定⾏</button><button onClick="javascript:mytable2.up()">上移选定⾏</button><button onClick="javascript:mytable2.down()">下移选定⾏</button><button onClick="javascript:mytable2.sort(2)">按第⼆列数字排序</button><button onClick="javascript:mytable2.sort(f)">按每⾏数据的和排序</button></body></html>希望本⽂所述对⼤家JavaScript程序设计有所帮助。

element表格自定义的sortable排序

表格是数据展示和比较的重要工具，而表格的排序功能更是方便用户查看和分析数据。

在element-ui中，我们可以使用sortable属性来自定义表格的排序方式。

本文将介绍如何使用sortable属性来实现表格的排序功能。

一、sortable属性介绍sortable是element-ui中表格组件的一个属性，用于定义表格是否支持排序。

当sortable属性设置为"custom"时，表格的排序功能将由用户自定义实现。

我们可以根据sortable属性的设置，自定义表格的排序逻辑，以满足特定的需求。

二、使用sortable属性实现表格排序以下是使用sortable属性实现表格排序的示例代码：```vue<template><el-table :data="tableData" style="width: 100"><el-table-column label="尊称" prop="name" sortable></el-table-column><el-table-column label="芳龄" prop="age"sortable="custom"></el-table-column></el-table></template><script>export default {data() {return {tableData: [{ name: '张三', age: 25 },{ name: '李四', age: 20 },{ name: '王五', age: 30 },]};}};</script>```以上示例中，我们为尊称和芳龄两列添加了sortable属性。

react antdesign table表格分页场景下的排序

react antdesign table表格分页场景下的排序
在React Ant Design的Table表格分页场景下实现排序，可以参照以下步骤进行操作：
1. 在Table组件中，使用columns属性定义表格的列，并设置对应列的sorter属性为true，以启用排序功能。

2. 在Table组件中，使用onChange事件处理函数来监听表格排序状态的改变。

onChange事件处理函数会接收一个参数，包含了当前表格的排序状态和排序字段。

3. 在onChange事件处理函数中，根据sorter参数中的字段和排序状态进行相应的排序操作。

可以通过调用Table组件的pagination属性和state属性来进行分页和排序控制。

4. 在sortTableData函数中，根据传入的表格数据和排序字段进行排序。

可以使用JavaScript的Array.sort方法进行排序，根据排序字段的不同选择不同的排序方式。

5. 最后，在渲染Table组件时，将onChange事件处理函数绑定到表格的onChange属性上，以便在表格排序状态改变时触发相应的处理逻辑。

这样，在React Ant Design的Table表格分页场景下，就可以实现根据列的排序状态进行相应的排序操作了。

element plus table排序

element plus table排序Element Plus 是一款常用于 Vue.js 项目中的 UI 组件库，其中包括了 Table 表格组件，支持多种功能，其中排序是常见的需求。

本篇文章将介绍 Element Plus Table 排序的使用方法。

一、排序类型在 Element Plus 中，Table 支持三种排序方式：1. 单列排序：只对单列数据进行排序。

2. 多列排序：对多个列进行排序，第一列相同的，按照第二列排序，以此类推。

3. 自定义排序：可以根据自己的需求定制排序方法。

二、单列排序1.在 Table 中添加 sortable 属性，让这一列数据支持排序功能。

```html<el-table-column prop="name" label="姓名" sortable></el-table-column>```2.默认情况下，点击表头这一列的数据时，由小到大排序，再次点击进行倒序排序。

3.在代码中添加 sort-change 事件，实现在排序时执行的函数。

```html<el-table-column prop="name" label="姓名" sortable @sort-change="sortChange"></el-table-column>``````javascriptexport default {data() {return {// 数据源tableData: [{id: 1,name: '张三',age: 20,job: '工程师'},{id: 2,name: '李四',age: 25,job: '设计师'},{id: 3,name: '王五',age: 30,job: '产品经理'},],}},methods: {// 表格排序变化回调函数sortChange({ prop, order }) {if (order === 'ascending') {// 从小到大排序this.tableData.sort((a, b) => a[prop] - b[prop]) } else if (order === 'descending') {// 从大到小排序this.tableData.sort((a, b) => b[prop] - a[prop]) } else {// 恢复原本数据this.loadData()}},// 重新加载数据loadData() {// 数据初始化this.tableData = [{id: 1,name: '张三',age: 20,job: '工程师'},{id: 2,name: '李四',age: 25,job: '设计师'},{id: 3,name: '王五',age: 30,job: '产品经理'},]}},}```三、多列排序1.在 Table 中添加 sort-by 属性，指定多列排序的顺序。

bootstrap table 用法

bootstrap table 用法BootstrapTable是基于Bootstrap的jQuery插件，它可以将HTML 表格转换成一个具有各种功能、样式和布局的高度可定制的数据表格。

Bootstrap Table 的功能包括排序、搜索、分页、筛选、编辑和导出等。

在本文中，我们将介绍 Bootstrap Table 的基本用法和常用功能。

一、基本用法1. 引入 Bootstrap 和 Bootstrap Table 的 CSS 和 JS 文件。

2. 在 HTML 中创建一个表格，并为其添加一个 ID。

3. 在 JS 中使用 jQuery 选择器选中表格 ID，并调用Bootstrap Table 方法。

二、常用功能1. 排序：使用 data-sortable='true' 属性启用排序功能。

2. 搜索：使用 data-search='true' 属性启用搜索功能。

3. 分页：使用 data-pagination='true' 属性启用分页功能。

4. 筛选：使用 data-filter-control='true' 属性启用筛选功能。

5. 编辑：使用 data-editable='true' 属性启用编辑功能。

6. 导出：使用 data-export='true' 属性启用导出功能。

以上是 Bootstrap Table 的基本用法和常用功能，使用起来非常简单，而且可以满足大部分的数据表格需求。

如果您想要进一步定制表格的样式和功能，可以参考官方文档，或者使用一些第三方插件进行扩展。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><title>具备排序功能的表格(JS+CSS+table)-</title><head><STYLE type=text/css>TABLE {BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid; border-spacing: 0px; cell-spacing: 0px}TD {PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMIL Y: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap }TH {PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMIL Y: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap }TD.numeric {TEXT-ALIGN: right}TH {BACKGROUND-COLOR: #c0c0c0}TH.mainHeader {COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left}TH A {COLOR: #000080; TEXT-DECORA TION: none}TH A:visited {COLOR: #000080}TH A:active {COLOR: #800000; TEXT-DECORA TION: underline}TH A:hover {COLOR: #800000; TEXT-DECORA TION: underline}TR.alternateRow {BACKGROUND-COLOR: #e0e0e0}TD.sortedColumn {BACKGROUND-COLOR: #f0f0f0}TH.sortedColumn {BACKGROUND-COLOR: #b0b0b0}TR.alternateRow TD.sortedColumn {BACKGROUND-COLOR: #d0d0d0}</STYLE><SCRIPT type=text/javascript>//-----------------------------------------------------------------------------// sortTable(id, col, rev)//// id - ID of the TABLE, TBODY, THEAD or TFOOT element to be sorted.// col - Index of the column to sort, 0 = first column, 1 = second column,// etc.// rev - If true, the column is sorted in reverse (descending) order// initially.//// Note: the team name column (index 1) is used as a secondary sort column and // always sorted in ascending order.//-----------------------------------------------------------------------------function sortTable(id, col, rev) {// Get the table or table section to sort.var tblEl = document.getElementById(id);// The first time this function is called for a given table, set up an// array of reverse sort flags.if (tblEl.reverseSort == null) {tblEl.reverseSort = new Array();// Also, assume the team name column is initially sorted.stColumn = 1;}// If this column has not been sorted before, set the initial sort direction.if (tblEl.reverseSort[col] == null)tblEl.reverseSort[col] = rev;// If this column was the last one sorted, reverse its sort direction.if (col == stColumn)tblEl.reverseSort[col] = !tblEl.reverseSort[col];// Remember this column as the last one sorted.stColumn = col;// Set the table display style to "none" - necessary for Netscape 6// browsers.var oldDsply = tblEl.style.display;tblEl.style.display = "none";// Sort the rows based on the content of the specified column using a// selection sort.var tmpEl;var i, j;var minVal, minIdx;var testVal;var cmp;for (i = 0; i < tblEl.rows.length - 1; i++) {// Assume the current row has the minimum value.minIdx = i;minVal = getTextValue(tblEl.rows[i].cells[col]);// Search the rows that follow the current one for a smaller value.for (j = i + 1; j < tblEl.rows.length; j++) {testVal = getTextValue(tblEl.rows[j].cells[col]);cmp = compareValues(minVal, testVal);// Negate the comparison result if the reverse sort flag is set.if (tblEl.reverseSort[col])cmp = -cmp;// Sort by the second column (team name) if those values are equal.if (cmp == 0 && col != 1)cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]), getTextValue(tblEl.rows[j].cells[1]));// If this row has a smaller value than the current minimum, remember its // position and update the current minimum value.if (cmp > 0) {minIdx = j;minVal = testVal;}}// By now, we have the row with the smallest value. Remove it from the // table and insert it before the current row.if (minIdx > i) {tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);tblEl.insertBefore(tmpEl, tblEl.rows[i]);}}// Make it look pretty.makePretty(tblEl, col);// Set team rankings.setRanks(tblEl, col, rev);// Restore the table's display style.tblEl.style.display = oldDsply;return false;}//-----------------------------------------------------------------------------// Functions to get and compare values during a sort.//-----------------------------------------------------------------------------// This code is necessary for browsers that don't reflect the DOM constants // (like IE).if (document.ELEMENT_NODE == null) {document.ELEMENT_NODE = 1;document.TEXT_NODE = 3;}function getTextValue(el) {var i;var s;// Find and concatenate the values of all text nodes contained within the // element.s = "";for (i = 0; i < el.childNodes.length; i++)if (el.childNodes[i].nodeType == document.TEXT_NODE)s += el.childNodes[i].nodeV alue;else if (el.childNodes[i].nodeType == document.ELEMENT_NODE && el.childNodes[i].tagName == "BR")s += " ";else// Use recursion to get text within sub-elements.s += getTextValue(el.childNodes[i]);return normalizeString(s);}function compareValues(v1, v2) {var f1, f2;// If the values are numeric, convert them to floats.f1 = parseFloat(v1);f2 = parseFloat(v2);if (!isNaN(f1) && !isNaN(f2)) {v1 = f1;v2 = f2;}// Compare the two values.if (v1 == v2)return 0;if (v1 > v2)return 1return -1;}// Regular expressions for normalizing white space.var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");var whtSpMult = new RegExp("\\s\\s+", "g");function normalizeString(s) {s = s.replace(whtSpMult, " "); // Collapse any multiple whites space.s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space. return s;}//-----------------------------------------------------------------------------// Functions to update the table appearance after a sort.//-----------------------------------------------------------------------------// Style class names.var rowClsNm = "alternateRow";var colClsNm = "sortedColumn";// Regular expressions for setting class names.var rowTest = new RegExp(rowClsNm, "gi");var colTest = new RegExp(colClsNm, "gi");function makePretty(tblEl, col) {var i, j;var rowEl, cellEl;// Set style classes on each row to alternate their appearance.for (i = 0; i < tblEl.rows.length; i++) {rowEl = tblEl.rows[i];rowEl.className = rowEl.className.replace(rowTest, "");if (i % 2 != 0)rowEl.className += " " + rowClsNm;rowEl.className = normalizeString(rowEl.className);// Set style classes on each column (other than the name column) to// highlight the one that was sorted.for (j = 2; j < tblEl.rows[i].cells.length; j++) {cellEl = rowEl.cells[j];cellEl.className = cellEl.className.replace(colTest, "");if (j == col)cellEl.className += " " + colClsNm;cellEl.className = normalizeString(cellEl.className);}}// Find the table header and highlight the column that was sorted.var el = tblEl.parentNode.tHead;rowEl = el.rows[el.rows.length - 1];// Set style classes for each column as above.for (i = 2; i < rowEl.cells.length; i++) {cellEl = rowEl.cells[i];cellEl.className = cellEl.className.replace(colTest, "");// Highlight the header of the sorted column.if (i == col)cellEl.className += " " + colClsNm;cellEl.className = normalizeString(cellEl.className);}}function setRanks(tblEl, col, rev) {// Determine whether to start at the top row of the table and go down or// at the bottom row and work up. This is based on the current sort// direction of the column and its reversed flag.var i = 0;var incr = 1;if (tblEl.reverseSort[col])rev = !rev;if (rev) {incr = -1;i = tblEl.rows.length - 1;}// Now go through each row in that direction and assign it a rank by// counting 1, 2, 3...var count = 1;var rank = count;var curVal;var lastVal = null;// Note that this loop is skipped if the table was sorted on the name// column.while (col > 1 && i >= 0 && i < tblEl.rows.length) {// Get the value of the sort column in this row.curVal = getTextValue(tblEl.rows[i].cells[col]);// On rows after the first, compare the sort value of this row to the// previous one. If they differ, update the rank to match the current row// count. (If they are the same, this row will get the same rank as the// previous one.)if (lastVal != null && compareValues(curV al, lastVal) != 0)rank = count;// Set the rank for this row.tblEl.rows[i].rank = rank;// Save the sort value of the current row for the next time around and bump // the row counter and index.lastVal = curVal;count++;i += incr;}// Now go through each row (from top to bottom) and display its rank. Note // that when two or more rows are tied, the rank is shown on the first of// those rows only.var rowEl, cellEl;var lastRank = 0;// Go through the rows from top to bottom.for (i = 0; i < tblEl.rows.length; i++) {rowEl = tblEl.rows[i];cellEl = rowEl.cells[0];// Delete anything currently in the rank column.while (stChild != null)cellEl.removeChild(stChild);// If this row's rank is different from the previous one, Insert a new text// node with that rank.if (col > 1 && rowEl.rank != lastRank) {cellEl.appendChild(document.createTextNode(rowEl.rank));lastRank = rowEl.rank;}}}</SCRIPT></HEAD><BODY><P><TABLE cellSpacing=0 cellPadding=0 border=0><THEAD><TR><TH class=mainHeader colSpan=11><a href="" target="_blank">懒人建站</a></TH></TR><TR><TH style="TEXT-ALIGN: left">Rank</TH><TH style="TEXT-ALIGN: left"><A title="Team Name"onclick="this.blur(); return sortTable('offTblBdy', 1, false);"href="/js/">Team</A></TH><TH><SPAN title="Games Played">Gms</SPAN></TH><TH><A title="Total Yards"onclick="this.blur(); return sortTable('offTblBdy', 3, true);"href="/js/">Yds</A></TH><TH><A title="Yards Per Game"onclick="this.blur(); return sortTable('offTblBdy', 4, true);"href="/js/">Yds/G</A></TH><TH><A title="Total Rushing Yards"onclick="this.blur(); return sortTable('offTblBdy', 5, true);"href="/js/">RuYds</A></TH><TH><A title="Rushing Yards Per Game"onclick="this.blur(); return sortTable('offTblBdy', 6, true);"href="/js/">RuYds/G</A></TH><TH><A title="Total Passing Yards"onclick="this.blur(); return sortTable('offTblBdy', 7, true);"href="/js/">PaYds</A></TH><TH><A title="Passing Yards Per Game"onclick="this.blur(); return sortTable('offTblBdy', 8, true);"href="/js/">PaYds/G</A></TH><TH><A title="Total Points Scored"onclick="this.blur(); return sortTable('offTblBdy', 9, true);"href="/js/">Pts</A></TH><TH><A title="Points Per Game"onclick="this.blur(); return sortTable('offTblBdy', 10, true);"href="/js/">Pts/G</A></TH></TR></THEAD> <TBODY id=offTblBdy><TR><TD class=numeric></TD><TD>Arizona</TD><TD class=numeric>16</TD><TD class=numeric>4898</TD><TD class=numeric>306.1</TD><TD class=numeric>1449</TD><TD class=numeric>90.6</TD><TD class=numeric>3449</TD><TD class=numeric>215.6</TD><TD class=numeric>295</TD><TD class=numeric>18.4</TD></TR><TR class=alternateRow><TD class=numeric></TD><TD>Atlanta</TD><TD class=numeric>16</TD><TD class=numeric>5070</TD><TD class=numeric>316.9</TD><TD class=numeric>1773</TD><TD class=numeric>110.8</TD><TD class=numeric>3297</TD><TD class=numeric>206.1</TD><TD class=numeric>291</TD><TD class=numeric>18.2</TD></TR><TR><TD class=numeric></TD><TD>Baltimore</TD><TD class=numeric>16</TD><TD class=numeric>4773</TD><TD class=numeric>318.2</TD><TD class=numeric>1598</TD><TD class=numeric>106.5</TD><TD class=numeric>211.7</TD><TD class=numeric>284</TD><TD class=numeric>18.9</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Buffalo</TD><TD class=numeric>16</TD><TD class=numeric>5137</TD><TD class=numeric>321.1</TD><TD class=numeric>1686</TD><TD class=numeric>105.4</TD><TD class=numeric>3451</TD><TD class=numeric>215.7</TD><TD class=numeric>265</TD><TD class=numeric>16.6</TD></TR> <TR><TD class=numeric></TD><TD>Carolina</TD><TD class=numeric>16</TD><TD class=numeric>4254</TD><TD class=numeric>265.9</TD><TD class=numeric>1372</TD><TD class=numeric>85.8</TD><TD class=numeric>2882</TD><TD class=numeric>180.1</TD><TD class=numeric>253</TD><TD class=numeric>15.8</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Chicago</TD><TD class=numeric>16</TD><TD class=numeric>4694</TD><TD class=numeric>293.4</TD><TD class=numeric>1742</TD><TD class=numeric>108.9</TD><TD class=numeric>2952</TD><TD class=numeric>184.5</TD><TD class=numeric>338</TD><TD class=numeric>21.1</TD></TR> <TR><TD class=numeric></TD><TD>Cincinnati</TD><TD class=numeric>16</TD><TD class=numeric>300.0</TD><TD class=numeric>1712</TD><TD class=numeric>107.0</TD><TD class=numeric>3088</TD><TD class=numeric>193.0</TD><TD class=numeric>226</TD><TD class=numeric>14.1</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Cleveland</TD><TD class=numeric>16</TD><TD class=numeric>4152</TD><TD class=numeric>259.5</TD><TD class=numeric>1351</TD><TD class=numeric>84.4</TD><TD class=numeric>2801</TD><TD class=numeric>175.1</TD><TD class=numeric>285</TD><TD class=numeric>17.8</TD></TR> <TR><TD class=numeric></TD><TD>Dallas</TD><TD class=numeric>16</TD><TD class=numeric>4402</TD><TD class=numeric>275.1</TD><TD class=numeric>2184</TD><TD class=numeric>136.5</TD><TD class=numeric>2218</TD><TD class=numeric>138.6</TD><TD class=numeric>246</TD><TD class=numeric>15.4</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Denver</TD><TD class=numeric>16</TD><TD class=numeric>4817</TD><TD class=numeric>301.1</TD><TD class=numeric>1877</TD><TD class=numeric>117.3</TD><TD class=numeric>2940</TD><TD class=numeric>183.8</TD><TD class=numeric>340</TD><TD class=numeric>21.2</TD></TR><TR><TD class=numeric></TD><TD>Detroit</TD><TD class=numeric>16</TD><TD class=numeric>4994</TD><TD class=numeric>312.1</TD><TD class=numeric>1398</TD><TD class=numeric>87.4</TD><TD class=numeric>3596</TD><TD class=numeric>224.8</TD><TD class=numeric>270</TD><TD class=numeric>16.9</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Green Bay</TD><TD class=numeric>16</TD><TD class=numeric>5463</TD><TD class=numeric>341.4</TD><TD class=numeric>1693</TD><TD class=numeric>105.8</TD><TD class=numeric>3770</TD><TD class=numeric>235.6</TD><TD class=numeric>390</TD><TD class=numeric>24.4</TD></TR> <TR><TD class=numeric></TD><TD>Indianapolis</TD><TD class=numeric>16</TD><TD class=numeric>5955</TD><TD class=numeric>372.2</TD><TD class=numeric>1966</TD><TD class=numeric>122.9</TD><TD class=numeric>3989</TD><TD class=numeric>249.3</TD><TD class=numeric>413</TD><TD class=numeric>25.8</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Jacksonville</TD><TD class=numeric>16</TD><TD class=numeric>4840</TD><TD class=numeric>302.5</TD><TD class=numeric>1600</TD><TD class=numeric>100.0</TD><TD class=numeric>202.5</TD><TD class=numeric>294</TD><TD class=numeric>18.4</TD></TR> <TR><TD class=numeric></TD><TD>Kansas City</TD><TD class=numeric>16</TD><TD class=numeric>5673</TD><TD class=numeric>354.6</TD><TD class=numeric>2008</TD><TD class=numeric>125.5</TD><TD class=numeric>3665</TD><TD class=numeric>229.1</TD><TD class=numeric>320</TD><TD class=numeric>20.0</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Miami</TD><TD class=numeric>16</TD><TD class=numeric>4821</TD><TD class=numeric>301.3</TD><TD class=numeric>1664</TD><TD class=numeric>104.0</TD><TD class=numeric>3157</TD><TD class=numeric>197.3</TD><TD class=numeric>344</TD><TD class=numeric>21.5</TD></TR> <TR><TD class=numeric></TD><TD>Minnesota</TD><TD class=numeric>16</TD><TD class=numeric>5006</TD><TD class=numeric>333.7</TD><TD class=numeric>1523</TD><TD class=numeric>101.5</TD><TD class=numeric>3483</TD><TD class=numeric>232.2</TD><TD class=numeric>287</TD><TD class=numeric>19.1</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>New England</TD><TD class=numeric>16</TD><TD class=numeric>305.1</TD><TD class=numeric>1793</TD><TD class=numeric>112.1</TD><TD class=numeric>3089</TD><TD class=numeric>193.1</TD><TD class=numeric>371</TD><TD class=numeric>23.2</TD></TR> <TR><TD class=numeric></TD><TD>New orleans</TD><TD class=numeric>16</TD><TD class=numeric>5226</TD><TD class=numeric>326.6</TD><TD class=numeric>1712</TD><TD class=numeric>107.0</TD><TD class=numeric>3514</TD><TD class=numeric>219.6</TD><TD class=numeric>333</TD><TD class=numeric>20.8</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>New York Giants</TD><TD class=numeric>16</TD><TD class=numeric>5335</TD><TD class=numeric>333.4</TD><TD class=numeric>1777</TD><TD class=numeric>111.1</TD><TD class=numeric>3558</TD><TD class=numeric>222.4</TD><TD class=numeric>294</TD><TD class=numeric>18.4</TD></TR> </TBODY></TABLE></body></html>文章来源：季长旭博客鹿胎膏。