Example demonstration of jquery sorting operation on table

Recently, we need to sort the report array, and the front-end process is as follows:

First add custom properties to each line tr when the foreground page is loadingdata-sort-field-ftime, the property value is the value of the field to be sorted (My number is more convenient):

$.each(jsonarray, function(i, obj) {
     troptions += "<tr data-sort-field-ftime=\""++"\">";     
     troptions += "<td>"+(Number()/unitnow).toFixed(dotnow)+"</td>";
     troptions += "<td>"+(Number()/unitnow).toFixed(dotnow)+"</td>";
     troptions += "<td>"+(Number()/unitnow).toFixed(dotnow)+"</td>";
     troptions += "<td>"++"</td>";
     troptions += "</tr>";
   });

Add onchange event to the header of the table to be sorted, the following isonchangeevent:

//Sorting processing function changepm(){
  var sortType=$("#pm").val();
  var $trList = $("#ta tbody > tr");//Get an existing tr object //Bubbing sort  for (var i = 0; i &lt; $ - 1; i++) {
   for (var j = 0; j &lt; $ - 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 &gt; value2 : value1 &lt; value2) {
     var $temp = $trList[j];
     $trList[j] = null;
     $trList[j] = $trList[j + 1];
     $trList[j + 1] = null;
     $trList[j + 1] = $temp;
    }
   }
  }      
  //Return the sorted tr collection  //Empty the original tr and insert the sorted tr into the dom of the table  ($trList);
  $($("#ta &gt; tbody").empty());
 }

The above is the detailed content of jquery sorting operations on tables. I hope it will be helpful to everyone, and I hope everyone will continue to support me~