参考思路

01 jQuery

《Jquery对Table表格排序(方法一)》
https://blog.csdn.net/wdfscp/article/details/8373311
主要思想：
获取鼠标点击的表头单元格的列号，遍历数据行，获取每个中的html，同时获取每个标签下对应获取到的列号的标签中的内容，并取得标签的type属性值，将获取的html、的内容和的type属性值拼接成字符串添加到数组array中，然后将表格中的html全部置空，根据type属性值的不同采用不同的方法对的内容进行比较，根据比较结果对数组array进行排序，然后将排序后的数组元素重新赋值给已经置空的。如果已经对该列排序过了，则直接对数组进行倒置
jQuery.tablesorter.js插件
https://www.cnblogs.com/Mr-Kenson/p/9796643.html
《在前端和后端同时修改数据》
https://blog.csdn.net/RoxLiu/article/details/73730753
框架：
前端主要使用JQuery；后端使用SpringMVC+Hibernate
具体的设计思路：

1、对可排序的th，设置class=”sortable”，value为排序字段名称，使用order属性保存当前选择的排序顺序：升序、降序或无排序。
2、增加一个隐藏的input，使用string来保存向后台提交的排序信息。
3、前端监听点击事件，改变th的图标、order值，并设置到隐藏的input中。注意：用户可以同时 选择多列且不同的排序顺序，input中string必须要能反应正确的排序顺序。
4、点击th改变排序排序，同时会触发相应的form提交数据。
5、后端接收到请求后，从request中提取中input提交的排序信息，动态构造相关的Sort。然后查询数据。
6、 view渲染时，需要将input提交的数据再写入回去。
7、 前端加载完页面，然后再根据input中的值，刷新th的图标和order属性。

02 Vue.js

使用Vue.js实现表格的排序和搜索功能
《Vue练习–表格数据筛选排序》
https://blog.csdn.net/y_silence_/article/details/82496339

《Vue小模块之功能全面的表格（一）用Element创建基本页面布局》
https://blog.csdn.net/sps900608/article/details/79810305
《Vue小模块之功能全面的表格（二）创建表格》
https://blog.csdn.net/sps900608/article/details/79822626
《Vue小模块之功能全面的表格（三）筛选表格中的数据》
https://blog.csdn.net/sps900608/article/details/79832348
《Vue小模块之功能全面的表格（四）表格数据的排序和分页》
https://blog.csdn.net/sps900608/article/details/79843965

《gitlab 2018年四大热门VueJs项目之一：vue-good-table》
用于VueJs的数据表格的东西，可以实现排序、分页、过滤等
https://github.com/xaksis/vue-good-table

03 对于单列数据：遍历后sort排序再插入

具体实现：
遍历每个li，并把它们存放到数组中去，然后通过sort()方法进行排序，再插入

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>排序</title>
</head><body><input type="button" value="排序按钮" id="btn1"><ul id="ul1"><li>58</li><li>8</li><li>31</li><li>98</li><li>75</li></ul><script type="text/javascript">window.onload=function(){var oBtn=document.getElementById("btn1");var arr=[];var oUl=document.getElementById("ul1");var aLi=oUl.getElementsByTagName("li");var i;var bAsc=true;oBtn.onclick=function(){for(i=0;i<aLi.length;i++){arr[i]=aLi[i];}arr.sort(function(li1,li2){if(bAsc){return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);}else{return parseInt(li2.innerHTML)-parseInt(li1.innerHTML);}});for(i=0;i<arr.length;i++){oUl.appendChild(arr[i]); //appendChild实际上分两步  1.先移除父级 2.添加到新的父级 （添加到原本的父级就相当于把当前元素拿到队列的末尾）}if(bAsc){bAsc=false;} //==>bAsc=!bAsc;  //简化写法else{bAsc=true;}};}
</script></body>
</html>

04 SpreadJS控件

使用纯前端表格控件 SpreadJS 实现在线的电子表格产品
《Web前端实现类似Excel的电子表格》
https://cloud.tencent.com/developer/article/1075146

05 Bootstrap Table表格插件

《Bootstrap Table表格分页的使用及分页数据（Excel）导出》
https://cloud.tencent.com/developer/article/1403938

总结：js实现表格排序

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=js表格的查找排序功能&rsv_spt=1&oq=%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%9C%A8%E7%BA%BF%E8%A1%A8%E6%A0%BC%E7%9A%84%E6%9F%A5%E6%89%BE%E6%8E%92%E5%BA%8F%E5%8A%9F%E8%83%BD&rsv_pq=de6b127d00694387&rsv_t=96c7wT25dTgtkyad3fEcF1aT3VxnUUHIOwSyFKA7XXjnUzfonN7lmNTwO7LRf9YE5DSg&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=2&rsv_sug2=0&inputT=1139&rsv_sug4=1139

在Web页面实现表格排序功能：jQuery、Vue等思路分析相关推荐

HTML列表内容自动排序,JS实现HTML表格排序功能
本文实例为大家分享了JavaScript实现HTML表格排序功能,供大家参考,具体内容如下 HTML代码: click me click me click me click me 15.43 700 ...
使用JExcel 实现基于web页面的表格数据录入
页面需要实现类似 Excle录入的功能, 开始计划是使用web 表格录入录入功能,奈何本人前端技术实在是渣,实现起来很困难,而且要求少动鼠标最好是纯纯的excle风. 最后选定了jspreads ...
elementui表格排序功能
在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false.可以通过 Table 的default-sort属性设置默认的排序列和排序顺序. 在列中使用sort ...
JAVA打印web页面_JavaWeb实现打印功能
废话不多说了,直接给大家贴代码了,具体代码如下所示: function printsetup(){ // 打印页面设置 wb.execwb(8,1); } 整理的关于打印的内容 1.控制"纵 ...
分享一个web页面背景全屏的jquery插件Fullscreen Background
简单测试了下,直接谷歌 IE10 IE6 http://gayadesign.com/scripts/fullscreenbackground/ 下载地址:https://github.com/Gay ...
war 发布后页面不更新_一文看懂tomcat8如何配置web页面管理
概述大部分时候,我们的tomcat服务器都不是部署在本机,那么怎么样不通过ftp/sftp方式来将war包部署到tomcat容器呢?tomcat有提供web页面管理应用的功能. tomcat页面管理 ...
在 iOS 模拟器中调试 Web 页面
转自:http://taobaofed.org/blog/2015/11/13/web-debug-in-ios/ 双十一大家"买买买"了吗?我猜你们要么是躺在沙发上,要么是躲在被 ...
html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...
html表格td向下排序,jquery实现的table排序功能示例
本文实例讲述了jquery实现的table排序功能.分享给大家供大家参考,具体如下: Document div { width: 1024px; margin: 0 auto; /*div相对屏幕左右 ...

在Web页面实现表格排序功能：jQuery、Vue等思路分析