本文實例講述了jquery實作表格本地排序的方法。分享給大家供大家參考。具體實作方法如下: 複製程式碼 程式碼如下: jquery 表格排序 <br /> 頭<br /> {<br /> 背景顏色:藍色;<br /> 顏色:白色;<br /> }<br /> tr.奇數<br /> {<br /> 背景顏色:#ddd;<br /> }<br /> tr.even<br /> {<br /> 背景顏色:#eee;<br /> }<br /> .可點選<br /> {<br /> 文字修飾:底線;<br /> }<br /> .懸停<br /> {<br /> 背景顏色:#5dd354;<br /> }<br /> .已排序<br /> {<br /> 背景顏色:#ded070;<br /> }<br /> .頁碼<br /> {<br /> 顏色:黑色; <br /> 邊距:2px 10px;<br /> 內邊距:2px 5px;<br /> }<br /> .活躍<br /> {<br /> 邊框:實心 1px 紅色;<br /> 背景顏色:#76a7d2;<br /> }<br /> .呼叫器<br /> {<br /> 邊距底部:10px;<br /> 左距:20px;<br /> }<br /> </樣式><br /> <腳本類型=“text/javascript”語言=“javascript”src=“js/jquery1.3.2.js”></腳本><br /> <腳本類型=“text/javascript”語言=“javascript”><br /> $(函數() {<br /> jQuery.fn.alternateRowColors = function() { $('tbody tr:odd', this).removeClass('even').addClass('odd'); //d', this).removeClass('even').addClass('odd'); //d', this).removeClass('even').addClass('odd'); //d', this).removeClass('even').addClass('odd'); //隔行變色奇數行<br /> $('tbody tr:even', this).removeClass('odd').addClass('even'); //隔行變色偶數行<br /> 返回此;<br /> };<br /> $('table.myTable').each(function() {<br /> var $table = $(this); $table.alternateRowColors($table); 與排序時隔行變色 //於排序時隔行變色><br /> $('th', $table).each(函數(列) {<br /> var findSortKey;<br /> if ($(this).is('.sort-alpha')) { //依字母排序<br /> findSortKey = 函數($cell) {<br /> return $cell.find('sort-key').text().toUpperCase() '' $cell.text('sort-key')。 };<br /> } else if ($(this).is('.sort-numeric')) { findSortKey = 函數($cell) {<br /> var key = parseFloat($cell.text().replace(/^[d.]); 以 isNaN(key) 返回 isNaN(key) ? 0:鍵;<br /> };<br /> } else if ($(this).is('.sort-date')) { findSortKey = 函數($cell) {<br /> return Date.parse('1 ' $cell.text());<br /> };<br /> }<br /> if (findSortKey) {<br /> $(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }) .click(函數() {<br /> //以逆轉狀態排序宣告為「🎜> var newDirection = 1;<br /> if ($(this).is('.sorted-asc')) {<br /> 新方向 = -1;<br /> }<br /> var rows = $table.find('tbody>tr').get(); //將資料行轉換為陣列<br /> $.each(行, 函數(索引, 行) {<br /> });<br /> rows.sort(函數(a, b) {<br /> , 0;<br /> });<br /> $.each(行, 函數(索引, 行) {<br /> $table.children('tbody').append(row)<br />;<br />;<br />;<br />;<br />;<br />;<br />;<br />;<br />;<br />;<br />; 的row.sortKey = null<br />; });<br /> $table.find('th').removeClass('sorted-asc').remtable.find('th').removeClass('sorted-asc').removeClass('sor-csorted); var $sortHead = $table.find('th').filter(':nth-child(') 1 位列); //以反向排序<br /> if (newDirection == 1) {<br /> $sortHead.addClass('sor } 和其他 {<br /> $sortHead.addClass('sor }<br /> //且以隔行變色的被呼叫函數<br /> $table.alternateRowColors($table);<🎜> // 移除已排序的欄位的樣式,並新增樣式至目前欄位<🎜> 可能 $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 /> for (var page = 0; page <numPages; page ) {<br /> $('<span class="page-number">').text(第 1 頁)<br /> .bind(' 點選', { newPage: 頁 }, 函數(事件) {<br /> currentPage = event.data['newPage'];<br /> $table.trigger('重複分頁』);<br /> $(this).addClass('active').siblings().removeClass('active');<br /> }).appendTo($pager).addClass('clickable');<br /> }<br /> $pager.insertBefore($table);<br /> $table.trigger('重分頁');<br /> $pager.find('span.page-number:first').addClass('active');<br /> });<br /> });<br /> </腳本><br /> </頭><br /> <身體><br /> <form id="form1" runat="server"><br /> <div><br /> <table class="myTable 分頁"><br /> <頭部><br /> <tr><br /> <th class="sort-alpha"><br /> 姓<br /> <br /> <th class="sort-alpha"><br /> 姓名為<br /> <br /> <第><br /> 電子郵件<br /> <br /> <th class="sort-numeric"><br /> 因<br /> <br /> <th class="sort-date"><br /> 日期<br /> <br /> <第><br /> 網址<br /> <br /> <br /> </頭><br /> <身體><br /> <tr><br /> <td><br /> tmith<br /> <br /> <td><br /> 愛森<br /> <br /> <td><br /> eth@gmail.com<br /> <br /> <td><br /> $34.00<br /> <br /> <td><br /> 2009 年 14 日<br /> <br /> <td><br /> ftp://www.baidu.com<br /> <br /> <br /> <tr><br /> <td><br /> TT史密斯<br /> <br /> <td><br /> B約翰<br /> <br /> <td><br /> jsmith@gmail.com<br /> <br /> <td><br /> $50.00<br /> <br /> <td><br /> 2009 年 3 月<br /> <br /> <td><br /> ftp://www.baidu.com<br /> <br /> <br /> <tr><br /> <td><br /> 史密斯<br /> <br /> <td><br /> 約翰<br /> <br /> <td><br /> DDDD@gmail.com<br /> <br /> <td><br /> $50.00<br /> <br /> <td><br /> 2009 年 3 月<br /> <br /> <td><br /> http://www.jb51.net<br /> <br /> <br /> <tr><br /> <td><br /> , 史密斯<br /> <br /> <td><br /> 約翰<br /> <br /> <td><br /> sdsf@gmail.com<br /> <br /> <td><br /> $50.00<br /> <br /> <td><br /> f32 2009<br /> <br /> <td><br /> ffttp://www.jb51.net<br /> <br /> <br /> <br /> </表><br /> 表格> 身體> 希望本文對大家介紹的jquery程式設計有幫助。