<!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. 项目部署错误 HTTP Error 500.19 - Internal Server Error

    HTTP Error 500.19 - Internal Server Error配置错误: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的 (overrid ...

  2. Hibernate学习 （一）

    Hibernate错误总结: 1:不能自动创建表.把MySQL的版本的方言修改一下. 首先自己要注意自己的MYSQL版本,然后设置对应的方言 兼容性模式 <property name=" ...

  3. OC学习篇之---谓词(NSPredicate)

    在前一篇文章中我们介绍了OC中一个重要技术通知:http://blog.csdn.net/jiangwei0910410003/article/details/41923401,今天我们在来看一下OC ...

  4. BZOJ 1778: [Usaco2010 Hol]Dotp 驱逐猪猡(高斯消元+期望dp)

    传送门 解题思路 设\(f(x)\)表示到\(x\)这个点的期望次数,那么转移方程为\(f(x)=\sum\frac{f(u)*(1 - \frac{p}{q})}{deg(u)}\),其中\(u\) ...

  5. [NOIP模拟25]题解

    A.字符串 Catalan数不能再裸了 #include<cstdio> #include<iostream> #include<cstring> using na ...

  6. 【从0到1，搭建Spring Boot+RESTful API+Shiro+Mybatis+SQLServer权限系统】01、环境准备

    开发环境 windows+STS(一个针对Spring优化的Eclipse版本)+Maven+SQLServer 环境部署 1.安装SQLServer(使用版本2008R2) 自行安装,此处略过 2. ...

  7. java sigar 系统监控

    <dependency> <groupId>org</groupId> <artifactId>sigar</artifactId> < ...

  8. 查看静态库(.lib)和动态库(.dll)的导出函数的信息 error LNK2001: 无法解析的外部符号 _Delete

    转自VC错误:http://www.vcerror.com/?p=1381 在window下查看动态库的导出函数可以用vs自带的Dependenc工具: 查看静态库的信息要用命令行来实现: 首先运行V ...

  9. 【git】如何ignore一个文件的更改又保留其初始版本

    参考: https://compiledsuccessfully.dev/git-skip-worktree/ https://stackoverflow.com/questions/9794931/ ...

  10. mac、windows系统charles安装破解

    一.下载 官网下载适合自己电脑的最新版本 下载地址:https://www.charlesproxy.com/latest-release/download.do 二.破解 破解地址:https:// ...