对标题点击进行排序这个是比较常见的,很多为了在前面显示一些重要的东西,可以进行对某列进行排序,而一般排序可以分为服务端排序和客户端排序,服务端一般是通过sql里面的order by进行排序,把排序后的数据再传给前端进行循环输出,还有一个就是通过本地进行排序的,通过服务端进行排序的本文就暂时不进行介绍,如果数据比较大的话,每次都要进行数据库排序,而本地排序就不同了,只要数据下来了就不用再在服务端和客户端再进行传输数据了,只需占用客户端一点的内存资源进行排序,速度比服务端排序更快,而且如果你要快速的切换点击排序,远程服务端进行排序速度也是比较慢的!个人觉得还是在客户端这边进行排序比较占优势的,下面这个直接排上进行本地排序的代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jquery 表格排序</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <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="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.zhuangjinhui.cn
                    </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.zhuangjinhui.cn
                    </td>
                </tr>
                <tr>
                    <td>
                        CSmith
                    </td>
                    <td>
                        John
                    </td>
                    <td>
                        DDDD@gmail.com
                    </td>
                    <td>
                        $50.00
                    </td>
                    <td>
                        Mar 2009
                    </td>
                    <td>
                        http://www.zhuangjinhui.cn
                    </td>
                </tr>
                <tr>
                    <td>
                        Smith
                    </td>
                    <td>
                        John
                    </td>
                    <td>
                        sdsf@gmail.com
                    </td>
                    <td>
                        $50.00
                    </td>
                    <td>
                        f32 2009
                    </td>
                    <td>
                        ffttp://www.zhuangjinhui.cn
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

 

需要指出的是这个是用jquery来编写,所以运行需要jquery的支持!

还有一款也是支持进行本地的列排序,还支持分页等功能,功能比较多,这个叫做DataTables-1.9.4,但是没去细研究,看什么时候有时间了再去折腾折腾。主要是这款比较小巧,而且有符合自己需要的功能,就没有直接去研究那个了~

分享该文章:

相关文章:

  • 暂无相关文章