使用jquery的tablesorter插件进行表格排序

今天在学习bootstrap的时候,突然看见tablesorter这个东东了,立马百度了一下,发现了这个东东。。

下面说一下今天我在项目中看见前辈们用的表格排序

  

tablesorter的官方网站:http://tablesorter.com/docs/

使用方法:1.下载tablesorter http://tablesorter.com/jquery.tablesorter.zip

2.解压文件,将jquery和jquery.tablesorter.min.js导入到项目文件中

3.修改html:

  1).添加链接

    <script  type="text/javascript" src=‘/pagemedia/js/jquery.tablesorter.min.js‘></script>

    <script  type="text/javascript" src=‘/pagemedia/js/jquery.min.js‘></script>

  2).修改表格

    <table  id="myTable"  class=‘tablesorter‘>为table添加id和class,class为tablesorter.

    (注意:table必须有thead和tbody)

  3).添加javascript脚本:

    <script>

      $(document).ready(function(){  $("#myTable").tablesorter();  });

    </script>

上面的这句是网上大多地方的写法,我在项目中发现的写法是这样的:

  

使用jquery的tablesorter插件进行表格排序

时间: 2025-01-14 16:27:44

使用jquery的tablesorter插件进行表格排序的相关文章

jQuery的dataTables插件实现中文排序

最近在写Java web. 写JSP的时候发现一个很好玩的插件dataTables.分页.过滤.排序等等手到擒来. 哎哎哎,有点点可惜的是排序这个功能不支持中文.于是网上查查找找,现在把方法整理一下,与君共享. 1 <script type="text/javascript"> 2 3 // oSort是排序类型数组, 'chinese-asc'是自己定义的类型的排序(*-asc || *-desc)名称 4 // 插件应该会根据表格中的内容的类型(string, numb

非常好用的jQuery表格排序插件

非常好用的 jQuery表格排序插件 https://mottie.github.io/tablesorter/docs/ CDN https://www.bootcdn.cn/jquery.tablesorter/ http://www.jq22.com/jquery-info7356 原文地址:https://www.cnblogs.com/nanahome/p/10585728.html

jQuery表格排序组件-tablesorter

一.引入文件 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <link href=

使用jQuery UI 实现表格排序

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格排序</title> <link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css"></head> <body><table id="myTabl

jquery 表格排序,实时搜索表格内容

jquery 表格排序,实时搜索表格内容 演示 XML/HTML Code <table class="table-sort"> <thead> <tr> <th class="table-sort">First Name</th> <th class="table-sort">Last Name</th> <th class="table-sor

jQuery拖拽插件制作拖拽排序特效

基于jQuery拖拽插件制作拖拽排序特效是一款非常实用的鼠标拖拽布局插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

jQuery整理笔记九----功能性表格开发

示例中用到的一些图片.插件.样式文件等下载地址:点我进入下载 过去在开发过程中关于table方面的jquery应用仅仅是局限于使用jquery操作table增加一行.删除一列等等操作.今天整理的跟过去用的不一样. 1.uiTableFilter uiTableFilter是一款表格数据行过滤插件,使用很简单,具体用法如下: $.uiTableFilter(table,phrase)  该函数包含两个参数,其中第一个参数为jQuery对象,即为jQuery方法匹配的表格,或者也可以是jQuery匹

JS实现表格排序

今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var tr = tbody.rows; var trValue

jquery easyui+sparkline插件+jqplot插件实现数据表行内插入线形图

Jquery easyui : 实现前端数据包格式化输出,支持多种模块式定义,只需要添加相应的预设参数即可实现丰富的前端. 资料参考: http://www.jeasyui.com/ Jquery sparkline: 基于jQuery 的js插件,底层调用html5的canvas标签,并通过js动态实现在数据表行内画条形图或趋势图,操作简单,可实现不同类型的图形化,如线形图,饼状图,柱形图. 资料参考:http://omnipotent.net/jquery.sparkline/#s-docs