<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

    <title>tablesort表格排序</title>

    <style>

        /* 自定义设置排序指示箭头 */

        .SortDescCss{background-image:url(Desc.gif);background-repeat:no-repeat;background-position:right center;}

        .SortAscCss{background-image:url(Asc.gif);background-repeat:no-repeat;background-position:right center;}

    </style>

</head>

<body>

    <table border="1" cellpadding="5" cellspacing="0" id="myTable">

        <tr>

            <th>序号</th>

            <th>姓名</th>

            <th>工号</th>

            <th>职位</th>

            <th>性别</th>

            <th>业绩</th>

            <th>报到时间</th>

        </tr>

        <tr>

            <td>1</td>

            <td>刘德华</td>

            <td>8008</td>

            <td>总裁</td>

            <td>男</td>

            <td>98</td>

            <td>2008-04-12</td>

        </tr>

        <tr>

            <td>2</td>

            <td>吴奇隆</td>

            <td>8004</td>

            <td>主管</td>

            <td>男</td>

            <td>80</td>

            <td>2008-04-16</td>

        </tr>

        <tr>

            <td>3</td>

            <td>王光良</td>

            <td>8003</td>

            <td>经理</td>

            <td>男</td>

            <td>85</td>

            <td>2008-04-15</td>

        </tr>

        <tr>

            <td>4</td>

            <td>张学友</td>

            <td>8009</td>

            <td>副总裁</td>

            <td>男</td>

            <td>90</td>

            <td>2008-04-11</td>

        </tr>

        <tr>

            <td>5</td>

            <td>张柏芝</td>

            <td>8005</td>

            <td>助理</td>

            <td>女</td>

            <td>78</td>

            <td>2008-04-13</td>

        </tr>

        <tr>

            <td>6</td>

            <td>陈冠希</td>

            <td>8001</td>

            <td>总监</td>

            <td>男</td>

            <td>60</td>

            <td>2008-04-18</td>

        </tr>

        <tr>

            <td>7</td>

            <td>陈慧琳</td>

            <td>8002</td>

            <td>试用期</td>

            <td>女</td>

            <td>85</td>

            <td>2008-04-18</td>

        </tr>

        <tr>

            <td>8</td>

            <td>张曼玉</td>

            <td>8007</td>

            <td>高级经理</td>

            <td>女</td>

            <td>82</td>

            <td>2008-04-16</td>

        </tr>

        <tr>

            <td>9</td>

            <td>周润发</td>

            <td>8006</td>

            <td>副总裁</td>

            <td>男</td>

            <td>88</td>

            <td>2008-04-13</td>

        </tr>

    </table>

<br />

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="tablesorter.js"></script>

<script>

    //点击任意表头可以排序

    new TableSorter("myTable");

    //点击0,2,5,6表头可以排序

    new TableSorter("myTable", 0, 2 , 5, 6);

    //点击表头排序并且返回提示

    new TableSorter("myTable").OnSorted = function(c, t){

        //Asc升序，Desc降序

        alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));

    }

</script>

</body>

</html>

表格排序tablesort小案列的更多相关文章

  1. 使用nosql实现页面静态化的一个小案列

    页面静态化,其实就是将动态生成的php页面,变成静态的HTML页面,让用户直接访问.有一下几方面好处: 1,首先就是访问速度,不需要去访问数据库,或者缓存来获取哪些数据,浏览器直接加载渲染html页即 ...

  2. Jquery局部刷新小案列

    /* 调用showTest()方法去后台拿到处理数据后返回到part.jsp页面,main.jsp再调用html()方法 和显示的结果集show()方法把part.jsp显示到当前的页面,实现局部页面 ...

  3. jQuery---EasyUI小案列

    jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等 ...

  4. canvas小案列-绚丽多彩的倒计时

    本次随笔中,我将实现一个绚丽的倒计时效果,这个效果主要是结合canvas和js实现的,具体代码如下 index.html文件 <!DOCTYPE html> <html> &l ...

  5. JS实现表格排序

    今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 ...

  6. JS表格排序

    var employees = [] employees[0] = { name: "George", age: 32, retiredate: "March 12, 2 ...

  7. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  8. 案例学习总结：原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  9. javascript 表格排序和表头浮动效果(扩展SortTable)

    前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了 ...

随机推荐

  1. sql server教程

    简单认识 SQL Server sql server教程 SQL Server 是 Microsoft 开发的一个关系数据库管理系统(RDBMS),现在是世界上最为常用的数据库: SQL Server ...

  2. Oracle with as语法

    with as优点 增加了sql的易读性,如果构造了多个子查询,结构会更清晰: 更重要的是:“一次分析,多次使用”,这也是为什么会提供性能的地方,达到了“少读”的目标 用法:给查询的语句起个别名 e. ...

  3. org.zkoss.zul.Filedownload.java 源码

    /* Filedownload.java Purpose: Description: History: Mon Apr 16 09:29:44 2007, Created by tomyeh Copy ...

  4. printf 输出格式设置\033[47\033[5m 与-8.8s

    摘要:在使用linux终端命令的时候,我们可以看到像more命令,它的显示方式与一般的字符串不同,是用了反显.同样,linux C下printf还有很多其他不常见的格式化输出形式.本文主要为你盘点这些 ...

  5. BZOJ 3207: 花神的嘲讽计划Ⅰ(莫队+哈希)

    传送门 解题思路 刚开始写了个莫队+哈希+\(map\)的\(O(n\sqrt(n)log(n)\)的辣鸡做法,\(T\)飞了.后来看了看别人博客发现其实并不用拿\(map\)当桶存那些哈希值.因为只 ...

  6. Linux系统Centos查看IP地址，不显示IP地址或者显示127.0.0.1

    1.桌面界面 右上角有个电脑的图标,鼠标悬停会显示no network connect 点击一下图标,选择连接的网络则ok 2.命令行界面 在命令行界面输入 vi  /etc/sysconfig/ne ...

  7. Kali Linux下运行nfc工具测试！

    由于Kali本身就集成了很多nfc工具,用起来很方便,再加上一个acr122u读卡器,来尝试PJ学校水卡! 首先安装驱动,到龙杰官网下载Linux的,解压后进入自己Linux发行版,Kali的是Deb ...

  8. 20175223 《Java程序设计》第十一周学习总结

    目录 教材学习内容总结 代码调试中的问题和解决过程 1. Linux中编程实现计算器方法乘法报错,但 IDEA 中可以. [代码托管] 学习进度条 参考资料 目录 教材学习内容总结 因未熟练掌握第十章 ...

  9. jsp中jstl、el使用

    tomcat7.0+JSTL1.1.2(不冲突) EL表达式获取变量 ${表达式} 如:${user.name} 不可以动态取值 ${user[name]}可以动态取值,变量名中含有特殊字符时只能用此 ...

  10. SPSS输出的结果都要写到文章中吗

    SPSS输出的结果都要写到文章中吗 经常有人问到,SPSS输出的结果都要写到文章中吗?文章中应该写什么呢?比如,均值.中位数.众数.标准差.百分位数.最小值.最大值等等,都要出现在文章中吗?洋洋洒洒那 ...