jquery對(duì)table做排序操作的實(shí)例演示

更新時(shí)間：2017年08月10日 09:40:23 作者：haochao_wu

這篇文章主要介紹了jquery對(duì)table做排序操作的實(shí)例演示,通過添加自定義屬性data-sort-field-ftime及表頭添加onchange事件詳細(xì)講解了操作過程,需要的朋友可以參考下

最近要對(duì)報(bào)表數(shù)組進(jìn)行排序，在前端處理如下：

首先在前臺(tái)頁面加載時(shí)對(duì)每行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對(duì)象
  //冒泡排序  
  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對(duì)table做排序操作的詳細(xì)內(nèi)容啦，希望對(duì)大家有所幫助，也希望大家繼續(xù)支持腳本之家~

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)表單輸入時(shí)提示文字滑動(dòng)向上效果
這篇文章主要介紹了jquery實(shí)現(xiàn)表單輸入時(shí)提示文字滑動(dòng)向上效果,涉及jquery鼠標(biāo)事件響應(yīng)及頁面元素樣式的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
基于jQuery的時(shí)間戳與日期間的轉(zhuǎn)化
這篇文章主要為大家詳細(xì)介紹了基于jQuery的時(shí)間戳與日期間的轉(zhuǎn)化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
使用CamanJS在Web頁面上處理圖像的技巧
CamanJs庫用于個(gè)人項(xiàng)目中進(jìn)行使用的圖形操作庫，這個(gè)庫是基于JavaScript的canvas操作庫，接下來，通過本篇文章給大家詳細(xì)介紹使用CamanJS在Web頁面上處理圖像的技巧，需要的朋友一起來學(xué)習(xí)下
2015-08-08
可輸入文字查找ajax下拉框控件 ComBox的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄奢斎胛淖植檎襛jax下拉框控件 ComBox的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
jQuery插件FusionCharts實(shí)現(xiàn)的2D餅狀圖效果【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的2D餅狀圖效果,結(jié)合完整實(shí)例形式分析了FusionCharts插件2D餅狀圖繪制相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
JQuery 獲得絕對(duì),相對(duì)位置的坐標(biāo)方法
獲取頁面某一元素的絕對(duì)X,Y坐標(biāo)，可以用offset()方法：（body屬性設(shè)置margin :0;padding:0;）
2010-02-02
jquery獲取元素值的方法(常見的表單元素)
獲取元素值的方法有很多，在本文將為大家詳細(xì)介紹下使用jquery是如何做到的，感興趣的朋友不要錯(cuò)過
2013-11-11
jQuery給元素添加樣式的方法詳解
這篇文章主要介紹了jQuery給元素添加樣式的方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery給元素添加樣式的各種常見操作技巧,需要的朋友可以參考下
2015-12-12
升級(jí)到j(luò)Query?3.6.1遇見的一些坑以及應(yīng)對(duì)辦法
Jquery低版本存在安全漏洞,所以需要升級(jí)版本,下面這篇文章主要給大家介紹了關(guān)于升級(jí)到j(luò)Query?3.6.1遇見的一些坑以及應(yīng)對(duì)辦法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06