この記事の例では、jquery がテーブルのローカル ソートを実装する方法について説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。 コードをコピー コードは次のとおりです: jquery 表格排序 <br> 頭<br> {<br> 背景色: 青;<br> 色: ホワイト;<br> }<br> tr.odd<br> {<br> 背景色: #ddd;<br> }<br> tr.even<br> {<br> 背景色: #eee;<br> }<br> .clickable<br> {<br> テキスト装飾: 下線;<br> }<br> .hover<br> {<br> 背景色: #5dd354;<br> }<br> .sorted<br> {<br> 背景色: #ded070;<br> }<br> .page-number<br> {<br> 色: 黒; <br> マージン:2px 10px;<br> パディング:2px 5px;<br> }<br> .active<br> {<br> ボーダー: 1 ピクセルの赤の実線;<br> 背景色:#76a7d2;<br> }<br> .pager<br> {<br> margin-bottom:10px;<br> margin-left:20px;<br> }<br> <br> $(function() {<br> jQuery.fn.alternateRowColors = function() { //做成插件の形式<br> $('tbody tr:odd', 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); // テーブルは jquery オブジェクトとして保存されます<br> $table.alternateRowColors($table); //排列時間間隔行变色<br> $('th', $table).each(function(column) {<br> var findSortKey;<br> if ($(this).is('.sort-alpha')) { //按字母排序<br> findSortKey = function($cell) {<br> return $cell.find('sort-key').text().toUpperCase() '' $cell.text().toUpperCase();<br> };<br> } else if ($(this).is('.sort-numeric')) { //按数字排序<br> findSortKey = function($cell) {<br> var key = parseFloat($cell.text().replace(/^[^d.]*/, ''));<br> isNaN(キー)を返す? 0 : キー;<br> };<br> } else if ($(this).is('.sort-date')) { //按日期排序<br> findSortKey = function($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(function() {<br> //逆方向排序状態态警告<br> var newDirection = 1;<br> if ($(this).is('.sorted-asc')) {<br> newDirection = -1;<br> }<br> var rows = $table.find('tbody>tr').get(); // 将データ据行转换は数组<br> $.each(rows, function(index, row) {<br> row.sortKey = findSortKey($(row).children('td').eq(column));<br> });<br> rows.sort(function(a, b) {<br> if (a.sortKey < b.sortKey) return -newDirection;<br /> if (a.sortKey > b.sortKey) return newDirection;<br /> 0 を返す;<br /> });<br /> $.each(rows, function(index, row) {<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(' (列 1) ')');<br /> //实现反向排序<br /> if (newDirection == 1) {<br /> $sortHead.addClass('sorted-asc');<br /> } else {<br /> $sortHead.addClass('sorted-desc');<br /> }<br /> //调用隔行色の関数<br /> $table.alternateRowColors($table);<br /> //移除已排序の列の样式、現在の列への追加样式<br /> $table.find('td').removeClass('sorted').filter(':nth-child(' (列 1) ')').addClass('sorted');<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> for (var page = 0; page < numPages; page ) {<br /> $('<span class="page-number"></span>').text(ページ 1)<br> .bind('click', { newPage: ページ }, function(event) {<br> currentPage = events.data['newPage'];<br> $table.trigger('repaginate');<br> $(this).addClass('active').siblings().removeClass('active');<br> }).appendTo($pager).addClass('clickable');<br> }<br> $pager.insertBefore($table);<br> $table.trigger('repaginate');<br> $pager.find('span.page-number:first').addClass('active');<br> });<br> });<br> <頭> 姓 名 メール 期限 日付 ウェブサイト 頭> ティミット えっ eth@gmail.com $34.00 2009 年 14 月 ftp://www.baidu.com てぃみっ ジョン jsmith@gmail.com $50.00 2009 年 3 月 ftp://www.baidu.com CSスミス ジョン DDDD@gmail.com $50.00 2009 年 3 月 http://www.jb51.net スミス ジョン sdsf@gmail.com $50.00 f32 2009 ffttp://www.jb51.net テーブル>