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