网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jquery实现表格本地排序的方法
内容
    这篇文章主要介绍了jquery实现表格本地排序的方法,实例分析了jQuery操作数组实现本地表格排序的技巧,需要的朋友可以参考下
    本文实例讲述了jquery实现表格本地排序的方法。分享给大家供大家参考。具体实现方法如下：
    代码如下:
    <html xmlns="">
    <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></div>');
    for (var page = 0; page < numPages; page++) {
    $('<span></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>
    <thead>
    <tr>
    <th>
    Last Name
    </th>
    <th>
    First Name
    </th>
    <th>
    Email
    </th>
    <th>
    Due
    </th>
    <th>
    Date
    </th>
    <th>
    Web Site
    </th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>
    tmith
    </td>
    <td>
    erthn
    </td>
    <td>
    </td>
    <td>
    $34.00
    </td>
    <td>
    14 2009
    </td>
    <td>
    </td>
    </tr>
    <tr>
    <td>
    TTmith
    </td>
    <td>
    BJohn
    </td>
    <td>
    </td>
    <td>
    $50.00
    </td>
    <td>
    Mar 2009
    </td>
    <td>
    </td>
    </tr>
    <tr>
    <td>
    CSmith
    </td>
    <td>
    John
    </td>
    <td>
    </td>
    <td>
    $50.00
    </td>
    <td>
    Mar 2009
    </td>
    <td>
    </td>
    </tr>
    <tr>
    <td>
    Smith
    </td>
    <td>
    John
    </td>
    <td>
    </td>
    <td>
    $50.00
    </td>
    <td>
    f32 2009
    </td>
    <td>
    ffttp://www.jb51.net
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </form>
    </body>
    </html>
    希望本文所述对大家的jquery程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 6:17:47