Detaillierte Erläuterung der jQuery-Implementierung der Tabellen-Front-End-Sortierfunktion

In diesem Artikel wird hauptsächlich die von jQuery implementierte Tabellen-Front-End-Sortierfunktion vorgestellt, die sich auf die Betriebsfähigkeiten von jQuery im Zusammenhang mit dem Abrufen, Durchlaufen und Ereignisverhalten von Tabellenelementen bezieht. Ich hoffe, dass sie allen helfen kann.

Das Beispiel in diesem Artikel beschreibt die von jQuery implementierte Tabellen-Frontend-Sortierfunktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Tabellen-Frontend-Sortierung nach Spalte

Hängt von jQuery ab (in diesem Beispiel wird jQuery-1.8.2 verwendet)

1. Initialisierungsmethode

(function($){
  //插件
  $.extend($,{
    //命名空间
    sortTable:{
      sort:function(tableId,Idx){
        var table = document.getElementById(tableId);
        var tbody = table.tBodies[0];
        var tr = tbody.rows;
        var trValue = new Array();
        for (var i=0; i<tr.length; i++ ) {
          trValue[i] = tr[i]; //将表格中各行的信息存储在新建的数组中
        }
        if (tbody.sortCol == Idx) {
          trValue.reverse(); //如果该列已经进行排序过了，则直接对其反序排列
        } else {
          trValue.sort(function(tr1, tr2){
            var value1 = tr1.cells[Idx].innerText; //列
            var value2 = tr2.cells[Idx].innerText; //第二列
            value1 = value1.replace("%",""); //把有%的取消掉
            value1=value1.trim(); //去空格
            console.log(typeof(value1));
            if(isNaN(value1)){
              var index1 = value1.indexOf("分");
              var index2 = value2.indexOf("分");
              if(index1>0){
                var num1 =value1.substring(0,index1);
                var num2 =value1.substring(index1+1,value1.length-1);
                var num3 =value2.substring(0,index2);
                var num4 =value2.substring(index2+1,value2.length-1);
                if(parseFloat(num1)>parseFloat(num3)){
                  return 1;
                }
                if(parseFloat(num1)<parseFloat(num3)){
                  return -1;
                }
                if(parseFloat(num1)==parseFloat(num3)){
                  return parseFloat(num2)-parseFloat(num4)
                }
              }else{
                var a = tr1.cells[Idx].textContent;
                var b= tr2.cells[Idx].textContent;
                return a.localeCompare(b);
              }
            }else{
              return parseFloat(value1)-parseFloat(value2);
            }
          });
        }
        var fragment = document.createDocumentFragment(); //新建一个代码片段，用于保存排序后的结果
        //var index = 0;
        var arrtotal =new Array();
        for (var i=0; i<trValue.length; i++ ) {
          var c = trValue[i].cells[0].innerHTML;
          //console.log(c);
          if(c.trim().indexOf("汇总")!=-1){//汇总行总是排在表格最上面
          // index = i;
            arrtotal.push(i);
            }else{
          fragment.appendChild(trValue[i]);
         }
        }
        if(arrtotal.length>0){
          for(var k=arrtotal.length; k<0; k-- ){
             tbody.appendChild(trValue[arrtotal[k]]);
          }
        }
        //tbody.appendChild(trValue[index]);
        tbody.appendChild(fragment); //将排序的结果替换掉之前的值
        tbody.sortCol = Idx;
      }
    }
  });
})(jQuery);

2. Seitenfunktionen

function desc_change(id,str){
   $("#desc_1").html("日期");
   $("#desc_2").html("ID");
   $("#desc_3").html("类别");
   $("#"+id).html(str);
}
function desc(id,str){
  var htmlstr =$("#"+id).text().trim();
  var c =str;
  if(htmlstr==str){
    c=str+'↓';
    $("#"+id).html(c);
  }else if(htmlstr==str+'↓'){
    c=str+'↑'
    $("#"+id).html(c);
  }else if(htmlstr==str+'↑'){
    c=str+'↓'
    $("#"+id).html(c);
  }
  desc_change(id,c)
}

3.DOM-Struktur

<table id="tableSort">
    <thead>
    <tr>
        <th onclick="$.sortTable.sort(&#39;tableSort&#39;,0);desc(&#39;desc_1&#39;,&#39;日期&#39;)" ><a id="desc_1" >日期</a></th>
        <th onclick="$.sortTable.sort(&#39;tableSort&#39;,1);desc(&#39;desc_2&#39;,&#39;软件ID&#39;)" ><a id="desc_2" >ID</a></th>
      <th onclick="$.sortTable.sort(&#39;tableSort&#39;,2);desc(&#39;desc_x&#39;,&#39;渠道ID&#39;)" ><a id="desc_3" >类别</a></th>
    </tr>
    </thead>
    <tbody>
     <tr>
        <td>201870601</td>
        <td>汇总</td>
        <td>新闻</td>
     </tr>
    </tbody>
</table>

Verwandte Empfehlungen:

jquery implementiert Tabellenpaginierung ohne Aktualisierung

Code zur Implementierung dynamischer Addition und Statistiken auf Tabellendatenbasis auf jQuery_jquery

Verwenden Sie JQuery, um den Code zum Ändern der Farbe von Tabellenzeilen und zum Hervorheben der aktuellen row_jquery

zu realisieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der jQuery-Implementierung der Tabellen-Front-End-Sortierfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!