前端表格排序插件TableSort资料整理

川长思鸟来 2022-06-01 23:27 438阅读 0赞

\*\*

## 前端表格排序插件TableSort资料整理 ##

\*\*  
一、前言  
项目实际开发中，经常会遇到对表格排序的需求，下面整理了几个常用的表格排序方法。

二、 常用插件  
1、jquery.tablesorter.js ， 用法参考这篇文章：[https://www.cnblogs.com/rsky/p/4998757.html][https_www.cnblogs.com_rsky_p_4998757.html]  
或 [http://www.jq22.com/jquery-info7356][http_www.jq22.com_jquery-info7356]

2、前端js 硬编码实现表格排序，参考这位大神的： [http://blog.csdn.net/wdfscp/article/details/8373311][http_blog.csdn.net_wdfscp_article_details_8373311]

3、bootstrapTable.js ， 该插件生成固定样式的表格，且自带排序功能，通过配置即可实现。  
参考用法资料： [https://www.cnblogs.com/landeanfen/p/5821192.html\#\_label1][https_www.cnblogs.com_landeanfen_p_5821192.html_label1]  
官方资料：[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/][http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]

bootstrapTable 效果如下：

![这里写图片描述](https://img-blog.csdn.net/20171227102718706?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSGFIYV9TaXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

![这里写图片描述][SouthEast]

[https_www.cnblogs.com_rsky_p_4998757.html]: https://www.cnblogs.com/rsky/p/4998757.html
[http_www.jq22.com_jquery-info7356]: http://www.jq22.com/jquery-info7356
[http_blog.csdn.net_wdfscp_article_details_8373311]: http://blog.csdn.net/wdfscp/article/details/8373311
[https_www.cnblogs.com_landeanfen_p_5821192.html_label1]: https://www.cnblogs.com/landeanfen/p/5821192.html#_label1
[http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
[SouthEast]: /images/20220602/5d79e09952c944b780fe80f80f6eb358.png