kaedah jquery untuk melaksanakan pengisihan tempatan tables

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程序设计有所帮助.

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

kaedah jquery untuk melaksanakan pengisihan tempatan tables_jquery