• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > jquery.tableSort.js表格排序插件使用方法详解

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

作者:最骚的就是你 字体:[增加 减小] 来源:互联网 时间:2017-05-11

最骚的就是你通过本文主要向大家介绍了jquery.tablesort.js,jquery tablesort,tablesort.js,tablesort,jquery.min.js等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下

1.一定要引jQuery包,所有jq插件都是基于jQuery包的

2.如果想指定哪一栏不排序这样写 $(“#mytable”).tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了

参考:http://www.weikejianghu.com/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>
</div>

源码下载:jquerytableSortjs(weikejianghu.com).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11原生js仿浏览器滚动条效果
  • 2017-05-11基于jQuery实现咖啡订单管理简单应用
  • 2017-05-11从零学习node.js之详解异步控制工具async(八)
  • 2017-05-11javascript 面向对象function详解及实例代码
  • 2017-05-11你真的了解BOM中的history对象吗
  • 2017-05-11基于jQuery代码实现圆形菜单展开收缩效果
  • 2017-05-11javascript判断回文数详解及实现代码
  • 2017-05-11jQuery插件echarts去掉垂直网格线用法示例
  • 2017-09-15canvas-api beginPath()和closePath()
  • 2017-05-11thinkphp标签实现bootsrtap轮播carousel实例代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 理解javascript中的闭包
    • Vue.js实现一个漂亮、灵活、可复用的提示组件示例
    • 微信小程序中的swiper组件详解
    • JS实现标签页切换效果
    • 浅谈JavaScript异步编程
    • JS简单获取日期相差天数的方法
    • canvas绘制多边形
    • ES6新特性二:Iterator(遍历器)和for-of循环详解
    • jquery实现数字输入框
    • jQuery仿IOS弹出框插件

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有