jquery對table做排序操作的實例演示
更新時間：2017年08月10日 09:40:23 作者：haochao_wu
這篇文章主要介紹了jquery對table做排序操作的實例演示,通過添加自定義屬性data-sort-field-ftime及表頭添加onchange事件詳細講解了操作過程,需要的朋友可以參考下
最近要對報表數(shù)組進行排序，在前端處理如下：
首先在前臺頁面加載時對每行tr添加自定義的屬性data-sort-field-ftime，屬性值為要排序的字段的值（我的是數(shù)字比較方便）：
$.each(jsonarray, function(i, obj) {
troptions += "<tr data-sort-field-ftime=\""+obj.paiming+"\">";
troptions += "<td>"+(Number(obj.cdsPrem)/unitnow).toFixed(dotnow)+"</td>";
troptions += "<td>"+(Number(obj.cdjPrem)/unitnow).toFixed(dotnow)+"</td>";
troptions += "<td>"+(Number(obj.sumPrem)/unitnow).toFixed(dotnow)+"</td>";
troptions += "<td>"+obj.paiming+"</td>";
troptions += "</tr>";
});
在要排序的表頭添加onchange事件，以下為onchange事件：
//排序處理
function changepm(){
var sortType=$("#pm").val();
var $trList = $("#ta tbody > tr");//獲取現(xiàn)有tr對象
//冒泡排序
for (var i = 0; i < $trList.length - 1; i++) {
for (var j = 0; j < $trList.length - 1 - i; j++) {
var value1 = parseInt($trList[j].attributes["data-sort-field-ftime"].nodeValue);
var value2 = parseInt($trList[j + 1].attributes["data-sort-field-ftime"].nodeValue);
if (sortType === "asc" ? value1 > value2 : value1 < value2) {
var $temp = $trList[j];
$trList[j] = null;
$trList[j] = $trList[j + 1];
$trList[j + 1] = null;
$trList[j + 1] = $temp;
}
}
}
//返回排序后的tr集合
//將原來的tr清空，再將排序后的tr插入到table的dom中
console.log($trList);
$trList.appendTo($("#ta > tbody").empty());
}
以上就是jquery對table做排序操作的詳細內(nèi)容啦，希望對大家有所幫助，也希望大家繼續(xù)支持腳本之家~
相關文章
Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象,Map()方法詳解以及數(shù)組中查詢某值是否存在
今天小編就為大家分享一篇關于Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象|Map()方法詳解以及數(shù)組中查詢某值是否存在，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了jquery獲取當前元素索引值用法,實例分析了jQuery獲取當前元素索引在創(chuàng)建圖片輪播效果中的使用技巧,需要的朋友可以參考下2015-06-06
jQuery對底部導航進行跳轉(zhuǎn)并高亮顯示的實例代碼
這篇文章主要介紹了jQuery對底部導航進行跳轉(zhuǎn)并高亮顯示的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
jQuery 獲取遍歷獲取table中每一個tr中的第一個td的方法
下面小編就為大家?guī)硪黄猨Query 獲取遍歷獲取table中每一個tr中的第一個td的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jquery animate 動畫效果使用說明，需要的朋友可以參考下。2009-11-11
使用jQuery實現(xiàn)可拖動的浮動層的完整代碼，復制保存到html文件就可以體驗效果.光標移動到層上，按住鼠標就可以拖動層2013-05-05
jQuery實現(xiàn)左右兩個列表框的內(nèi)容相互移動功能示例
這篇文章主要介紹了jQuery實現(xiàn)左右兩個列表框的內(nèi)容相互移動功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
jQuery使用ajax傳遞json對象到服務端及contentType的用法示例
這篇文章主要介紹了jQuery使用ajax傳遞json對象到服務端及contentType的用法,結(jié)合實例形式分析了jQuery使用ajax傳遞json對象數(shù)據(jù)及服務器響應相關操作技巧,需要的朋友可以參考下2020-03-03
下面小編就為大家?guī)硪黄猈eb前端新人筆記之jquery入門心得(新手必看)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了jQuery根據(jù)表單name獲取值的方法,總結(jié)分析了jQuery獲取表單值的常用技巧,涉及jQuery選擇器的使用技巧,非常簡單實用,需要的朋友可以參考下2016-05-05