kaedah jquery untuk melaksanakan pengisihan tempatan tables_jquery

Contoh dalam artikel ini menerangkan cara jquery melaksanakan pengisihan tempatan jadual. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut: jquery 表格排序 thead { warna latar belakang: Biru; warna: Putih; } tr.odd { warna latar belakang: #ddd; } tr.even { warna latar belakang: #eee; } .boleh diklik { hiasan teks: garis bawah; } .tuding { warna latar belakang: #5dd354; } .disusun { warna latar belakang: #ded070; } .nombor halaman { warna: Hitam; jidar:2px 10px; padding:2px 5px; } .aktif { sempadan:pejal 1px merah; warna latar belakang:#76a7d2; } .pager { jidar-bawah:10px; jidar-kiri:20px; } $(fungsi() { jQuery.fn.alternateRowColors = function() { //做成插件的形式 $('tbody tr:odd', this).removeClass('even').addClass('odd'); //隔行变色 奇数行 $('tbody tr:even', this).removeClass('odd').addClass('even'); //隔行变色 偶数行 pulangkan ini; }; $('table.myTable').setiap(fungsi() { var $table = $(ini); //将table存储为一个jquery对象 $table.alternateRowColors($table); //在排序时隔行变色 $('th', $table).setiap(fungsi(lajur) { var findSortKey; if ($(this).is('.sort-alpha')) { //按字母排序 findSortKey = function($cell) { kembalikan $cell.find('sort-key').text().toUpperCase() '' $cell.text().toUpperCase(); }; } lain jika ($(this).is('.sort-numeric')) { //按数字排序 findSortKey = function($cell) { kunci var = parseFloat($cell.text().replace(/^[^d.]*/, '')); pulangkan isNaN(key) ? 0 : kunci; }; } lain jika ($(this).is('.sort-date')) { //按日期排序 findSortKey = function($cell) { kembalikan Date.parse('1 ' $cell.text()); }; } jika (findSortKey) { $(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }) .klik(fungsi() { //反向排序状态声明 var newDirection = 1; jika ($(ini).is('.sorted-asc')) { Arah baru = -1; } var rows = $table.find('tbody>tr').get(); //将数据行转换为数组 $.each(baris, fungsi(indeks, baris) { row.sortKey = findSortKey($(row).children('td').eq(column)); }); rows.sort(function(a, b) { jika (a.sortKey jika (a.sortKey > b.sortKey) kembalikan Arah baharu; pulangkan 0; }); $.each(baris, fungsi(indeks, baris) { $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(' (lajur 1) ')'); //实现反向排序 jika (Arah baru == 1) { $sortHead.addClass('sorted-asc'); } lain { $sortHead.addClass('sorted-desc'); } //调用隔行变色的函数 $table.alternateRowColors($table); //移除已排序的列的样式,添加样式到当前列 $table.find('td').removeClass('diisih').filter(':nth-child(' (lajur 1) ')').addClass('diisih'); $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 = $(' '); untuk (halaman var = 0; halaman $(' ').teks(halaman 1) .bind('klik', { newPage: page }, function(event) { currentPage = event.data['newPage']; $table.trigger('ubah semula'); $(this).addClass('active').siblings().removeClass('active'); }).appendTo($pager).addClass('boleh diklik'); } $pager.insertBefore($table); $table.trigger('ubah semula'); $pager.find('span.page-number:first').addClass('active'); }); }); Nama Akhir Nama Pertama E-mel Diperuntukkan Tarikh Tapak Web tmith ertn eth@gmail.com $34.00 14 2009 ftp://www.baidu.com TTmith BJohn jsmith@gmail.com $50.00 Mac 2009 ftp://www.baidu.com CSmith John DDDD@gmail.com $50.00 Mac 2009 http://www.jb51.net Smith John sdsf@gmail.com 50,00 $ f32 2009 ffttp://www.jb51.net 希望本文所述对大家的jquery程序设计有所帮助.