jQuery 表格排序插件 Tablesorter 使用

时间:2023-02-01 19:57:47

jQuery 表格排序插件 Tablesorter 使用方式如下:

1.引入头文件(注意一定要把jQuery放在前面):

<script src="lib/jquery-1.8.3.min.js"></script>
<!--tablesorter-->
<link href="css/css_tablesorter_green/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#alltable").tablesorter();
});
</script>

2.在需要使用排序的<Table>上无需做任何设定,很方便:

<table id="alltable" class="tablesorter"  width="584">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

在<thead>上就会有两个小三角符号,点击可以用于排序。

jQuery 表格排序插件 Tablesorter 使用

Tablesorter下载地址:http://download.csdn.net/detail/leixiaohua1020/6377187

jQuery 表格排序插件 Tablesorter 使用的更多相关文章

  1. jQuery表格排序总成-tablesorter

    一个.进口单证 <script type="text/javascript" src="js/jquery.js"></script> ...

  2. jQuery表格排序组件-tablesorter

    一.引入文件 <script type="text/javascript" src="js/jquery.js"></script> & ...

  3. jQuery表格排序(tablesorter)

    1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...

  4. jQuery html表格排序插件:tablesorter

    ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...

  5. 表格排序插件datatables

    之前用过表格排序插件tinytables,用到后面,随着需求的更改,发现这个插件真的low到爆了,不适合用于多表格,只有一个表格的页面可以凑合着用,有很多局限性. 之后发现了一款表格排序插件datat ...

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

    jquery 表格排序,实时搜索表格内容   演示 XML/HTML Code <table class="table-sort"> <thead> &lt ...

  7. 表格排序(tablesorter)

    1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...

  8. 一个简洁漂亮的jQuery拖放排序插件DDSort

    拖放排序是WEB应用中常见的功能.虽然网上有很多别人已经造好的*,但是就我个人而言,没事就喜欢研究原理,自己造*,不管强大与否,简洁够用就是我的目标,再一个就是自己写的东西,应用起来得心应手,修改 ...

  9. jquery表格简单插件

    1.一直对jquery插件感觉非常神奇.今天动手写了一个超级简单的案例. 2.效果 3.体会 a.jquery插件编写能力. 须要具备一定js能力的编写.还有写css样式的运用:希望以后这方面会有提高 ...

随机推荐

  1. 常见CSS与HTML使用误区

       误区一.多div症 <div class="nav"> <ul> <li><a href="/home/"&gt ...

  2. iOS 图片加载导致内存警告

    虽然UITableView和UICollectionView都有cell复用机制,但是如果利用SDWebImage加载的图片本身过大且cell复用池中的个数比较多(cell的Size越小,复用池中的c ...

  3. codeforces 712B&period; Memory and Trident

    题目链接:http://codeforces.com/problemset/problem/712/B 题目大意: 给出一个字符串(由'U''D''L''R'),分别是向上.向下.向左.向右一个单位, ...

  4. Delphi中的接口和抽象类

    参考:http://blog.csdn.net/xinzheng_wang/article/details/6058643 接口:Interface Delphi中接口中的关键字Interface,但 ...

  5. 【转】打造属于自己的Android Studio神器

    本文转载自:http://www.stormzhang.com/android/2015/05/26/android-tools/,并加以修改.黄色底部分是本人添加的内容. 一晃好久没更新博客了,最近 ...

  6. android&colon;layout&lowbar;weight属性的简单使用

    效果: style.xml <style name="etStyle2"> <item name="android:layout_width" ...

  7. DOM ISO - get current element's XPATH

    DOM ISO - get current element's XPATH DOM ISO - get current element's XPATH

  8. 小妖精的完美游戏教室——人工智能,A&ast;算法,实现篇

    //================================================================//// Copyright (C) 2017 Team Saluk ...

  9. 获取SQL server 中的表和说明

    SELECT 表名 = case when a.colorder = 1 then d.name                    else '' end,        表说明 = case w ...

  10. AndroidStudio中builde&period;gradle文件详解

    Android Studio是采用Gradle来构建项目的,一个Android项目中包含两个build.gradle文件,如下图:     (1)最外层目录下build.gradle文件 最外层目录下 ...