<!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. Linux文本处理三剑客之——grep

    一Linux文本处理三剑客之——grep Linux文本处理三剑客都支持正则表达式 grep :文本过滤( 模式:pattern) 工具,包括grep, egrep, fgrep (不支持正则表达式) ...

  2. BlueStore-先进的用户态文件系统《一》

    https://zhuanlan.zhihu.com/p/45084771 分布式存储系统通过将数据分散到多台机器上来充分利用多台机器的资源提高系统的存储能力,每台机器上的数据存放都需要本地的单机存储 ...

  3. 【Linux】【sendmail】利用sendmail发送带附件的邮件及解决邮件中文标题乱码

    #收件邮箱列表 TO_LIST=$1 #邮件标题 MAIL_TITLE=$2 #附件地址 LOG_PATH=$3 fromAdd="=?UTF-8?B?`echo $MAIL_TITLE | ...

  4. AcWing 215. 破译密码 （莫比乌斯反演）打卡

    达达正在破解一段密码,他需要回答很多类似的问题: 对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d. 作为达达的同学,达达希望得到你的帮助. ...

  5. SAS 读取数据文件

    每次读取数据时需要告诉SAS3件事:1:数据存在哪里?2:数据的形式3:创建的数据集的类型(永久/临时) 1 读取SAS数据集 DATA temp; /*temp 为创建的数据集名称*/ INFILE ...

  6. PHP 工程师技能图谱

    # PHP 工程师技能图谱## 基础知识 - HTTP - HEADER - REQUEST - RESPONSE - GET/POST/PUT/DELETE/PATCH/CONNECT/OPTION ...

  7. layui弹出层回调的使用

    <%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ in ...

  8. PHP面试 MySQL创建高性能索引考点

    MySQL索引 MySQL索引的基础和类型 索引的基础:索引类似于书籍的目录,要想找到一本书的某个特定篇章,需要查找书的目录,定位对应的页码 存储引擎使用类似的方式进行数据查询,先去索引当中找到对应的 ...

  9. 大数据学习之BigData常用算法和数据结构

    大数据学习之BigData常用算法和数据结构 1.Bloom Filter     由一个很长的二进制向量和一系列hash函数组成     优点:可以减少IO操作,省空间     缺点:不支持删除,有 ...

  10. mysql与navicat应用

    下载安装配置 用法 1.连接本机数据库: 打开navicat选择连接---第一个mysql---在常规下自己明明连接名和密码----确定 我这边建立了本机测试库 2. 连接阿里云服务器上的mysql ...