jquery实现表格本地排序的方法


Posted in Javascript onMarch 11, 2015

本文实例讲述了jquery实现表格本地排序的方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

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

    <style type="text/css">

        thead

        {

            background-color: Blue;

            color: White;

        }

        tr.odd

        {

            background-color: #ddd;

        }

        tr.even

        {

            background-color: #eee;

        }

        .clickable

        {

            text-decoration: underline;

        }

        .hover

        {

            background-color: #5dd354;

        }

        .sorted

        {

            background-color: #ded070;

        }

        .page-number

        {

            color: Black; 

            margin:2px 10px;

            padding:2px 5px;

        }

        .active

        {

            border:solid 1px red;

            background-color:#76a7d2;

            }

        .pager

        {

            margin-bottom:10px;

            margin-left:20px;

            }

    </style>

    <script type="text/javascript" language="javascript" src="js/jquery1.3.2.js"></script>

    <script type="text/javascript" language="javascript">

        $(function() {

            jQuery.fn.alternateRowColors = function() {                      //做成插件的形式

                $('tbody tr:odd', this).removeClass('even').addClass('odd'); //隔行变色 奇数行

                $('tbody tr:even', this).removeClass('odd').addClass('even'); //隔行变色 偶数行

                return this;

            };

            $('table.myTable').each(function() {

                var $table = $(this);                       //将table存储为一个jquery对象

                $table.alternateRowColors($table);          //在排序时隔行变色

                $('th', $table).each(function(column) {

                    var findSortKey;

                    if ($(this).is('.sort-alpha')) {       //按字母排序

                        findSortKey = function($cell) {

                            return $cell.find('sort-key').text().toUpperCase() + '' + $cell.text().toUpperCase();

                        };

                    } else if ($(this).is('.sort-numeric')) {       //按数字排序

                        findSortKey = function($cell) {

                            var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''));

                            return isNaN(key) ? 0 : key;

                        };

                    } else if ($(this).is('.sort-date')) {          //按日期排序

                        findSortKey = function($cell) {

                            return Date.parse('1 ' + $cell.text());

                        };

                    }

                    if (findSortKey) {

                        $(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() {

                            //反向排序状态声明

                            var newDirection = 1;

                            if ($(this).is('.sorted-asc')) {

                                newDirection = -1;

                            }

                            var rows = $table.find('tbody>tr').get(); //将数据行转换为数组

                            $.each(rows, function(index, row) {

                                row.sortKey = findSortKey($(row).children('td').eq(column));

                            });

                            rows.sort(function(a, b) {

                                if (a.sortKey < b.sortKey) return -newDirection;

                                if (a.sortKey > b.sortKey) return newDirection;

                                return 0;

                            });

                            $.each(rows, function(index, row) {

                                $table.children('tbody').append(row);

                                row.sortKey = null;

                            });

                            $table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');

                            var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')');

                            //实现反向排序

                            if (newDirection == 1) {

                                $sortHead.addClass('sorted-asc');

                            } else {

                                $sortHead.addClass('sorted-desc');

                            }

                            //调用隔行变色的函数

                            $table.alternateRowColors($table);

                            //移除已排序的列的样式,添加样式到当前列

                            $table.find('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');

                            $table.trigger('repaginate');

                        });

                    }

                });

            });

        });

        //分页

        $(function() {

            $('table.paginated').each(function() {

                var currentPage = 0;

                var numPerPage = 10;

                var $table = $(this);

                $table.bind('repaginate', function() {

                    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();

                });

                var numRows = $table.find('tbody tr').length;

                var numPages = Math.ceil(numRows / numPerPage);

                var $pager = $('<div class="pager"></div>');

                for (var page = 0; page < numPages; page++) {

                    $('<span class="page-number"></span>').text(page + 1)

                     .bind('click', { newPage: page }, function(event) {

                         currentPage = event.data['newPage'];

                         $table.trigger('repaginate');

                         $(this).addClass('active').siblings().removeClass('active');

                     }).appendTo($pager).addClass('clickable');

                }

                $pager.insertBefore($table);

                $table.trigger('repaginate');

                $pager.find('span.page-number:first').addClass('active');

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table class="myTable paginated">

            <thead>

                <tr>

                    <th class="sort-alpha">

                        Last Name

                    </th>

                    <th class="sort-alpha">

                        First Name

                    </th>

                    <th>

                        Email

                    </th>

                    <th class="sort-numeric">

                        Due

                    </th>

                    <th class="sort-date">

                        Date

                    </th>

                    <th>

                        Web Site

                    </th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>

                        tmith

                    </td>

                    <td>

                        erthn

                    </td>

                    <td>

                        eth@gmail.com

                    </td>

                    <td>

                        $34.00

                    </td>

                    <td>

                       14 2009

                    </td>

                    <td>

                        ftp://www.baidu.com

                    </td>

                </tr>

                <tr>

                    <td>

                        TTmith

                    </td>

                    <td>

                        BJohn

                    </td>

                    <td>

                        jsmith@gmail.com

                    </td>

                    <td>

                        $50.00

                    </td>

                    <td>

                        Mar 2009

                    </td>

                    <td>

                        ftp://www.baidu.com

                    </td>

                </tr>

                <tr>

                    <td>

                        CSmith

                    </td>

                    <td>

                        John

                    </td>

                    <td>

                        DDDD@gmail.com

                    </td>

                    <td>

                        $50.00

                    </td>

                    <td>

                        Mar 2009

                    </td>

                    <td>

                        https://3water.com

                    </td>

                </tr>

                <tr>

                    <td>

                        Smith

                    </td>

                    <td>

                        John

                    </td>

                    <td>

                        sdsf@gmail.com

                    </td>

                    <td>

                        $50.00

                    </td>

                    <td>

                        f32 2009

                    </td>

                    <td>

                        ffttp://3water.com

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

    </form>

</body>

</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
关于Js中new操作符的作用详解
Feb 21 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 #Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 #Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 #Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 #Javascript
JavaScript前补零操作实例
Mar 11 #Javascript
JavaScript限定图片显示大小的方法
Mar 11 #Javascript
iScroll中事件点击触发两次解决方案
Mar 11 #Javascript
You might like
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Flask框架配置与调试操作示例
2018/07/23 Python
python查看模块安装位置的方法
2018/10/16 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python切割图片的示例
2020/11/12 Python
家庭教育先进个人事迹材料
2014/01/24 职场文书
仓管岗位职责范本
2014/02/08 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
学生会竞聘书范文
2014/03/31 职场文书
商业融资计划书
2014/04/29 职场文书
考试作弊检讨书
2015/01/27 职场文书
皇城相府导游词
2015/02/06 职场文书
大学运动会加油稿
2015/07/22 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android