web-dev-qa-db-fra.com

Tri des lignes du tableau selon la colonne d'en-tête du tableau à l'aide de javascript ou jquery

J'ai quelque chose comme ça

  <table><thead>
  <tr>
     <th>S.L.</th>
     <th>name</th>
  </tr>
 </thead>
<tbody>
  <tr>
     <td>1</td>
     <td>Ronaldo</td>
  </tr>
  <tr>
     <td>2</td>
     <td>Messi</td>
  </tr>
  <tr>
     <td>3</td>
     <td>Ribery</td>
  </tr>
  <tr>
     <td>4</td>
     <td>Bale</td>
  </tr>
</tbody>
 </table>

Ce que je veux, c'est trier les <tr> de <tbody> lorsque vous cliquez sur th dans l'ordre croissant et décroissant alternativement selon le suivant th cliqué.

  1. donc si quelqu'un clique sur S.Lth puis il affiche les lignes du tableau en ordre décroissant puis croissant à chaque clic.
  2. Lorsque vous cliquez sur Nameth, les noms doivent apparaître dans l'ordre décroissant puis croissant sans changer leur _ S.L

voici violon

javascriptjqueryhtmlhtml-table
22
user3508453

Vous voudrez peut-être voir cette page:
http://blog.niklasottosson.com/?p=1914

Je suppose que vous pouvez faire quelque chose comme ça:

DÉMO: http://jsfiddle.net/g9eL6768/2/

HTML:

 <table id="mytable"><thead>
  <tr>
     <th id="sl">S.L.</th>
     <th id="nm">name</th>
  </tr>
   ....

JS:

//  sortTable(f,n)
//  f : 1 ascending order, -1 descending order
//  n : n-th child(<td>) of <tr>
function sortTable(f,n){
    var rows = $('#mytable tbody  tr').get();

    rows.sort(function(a, b) {

        var A = getVal(a);
        var B = getVal(b);

        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return 1*f;
        }
        return 0;
    });

    function getVal(Elm){
        var v = $(Elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseInt(v,10);
        }
        return v;
    }

    $.each(rows, function(index, row) {
        $('#mytable').children('tbody').append(row);
    });
}
var f_sl = 1; // flag to toggle the sorting order
var f_nm = 1; // flag to toggle the sorting order
$("#sl").click(function(){
    f_sl *= -1; // toggle the sorting order
    var n = $(this).prevAll().length;
    sortTable(f_sl,n);
});
$("#nm").click(function(){
    f_nm *= -1; // toggle the sorting order
    var n = $(this).prevAll().length;
    sortTable(f_nm,n);
});

J'espère que cela t'aides.

37
naota

Offrir un tri interactif gérant plusieurs colonnes n'est pas anodin.

À moins que vous ne vouliez écrire une bonne quantité de logique de gestion de code pour les clics sur plusieurs lignes, éditer et actualiser le contenu de la page, gérer les algorithmes de tri pour les grands tableaux… alors il vaut vraiment mieux adopter un plug-in.

tablesorter , (avec les mises à jour de Mottie) est mon préféré. C'est facile à démarrer et très personnalisable. Ajoutez simplement la classe tablesorter à la table que vous souhaitez trier, puis appelez le plug-in tablesorter dans un événement de chargement de document:

$(function(){
    $("#myTable").tablesorter();
});

Vous pouvez parcourir la documentation pour en savoir plus sur les fonctionnalités avancées.

8
ancestral

utiliser Javascript fonction sort () 

var $tbody = $('table tbody');
$tbody.find('tr').sort(function(a,b){ 
    var tda = $(a).find('td:eq(1)').text(); // can replace 1 with the column you want to sort on
    var tdb = $(b).find('td:eq(1)').text(); // this will sort on the second column
            // if a < b return 1
    return tda < tdb ? 1 
           // else if a > b return -1
           : tda > tdb ? -1 
           // else they are equal - return 0    
           : 0;           
}).appendTo($tbody);

Si vous voulez monter, il vous suffit d'inverser les> et <

Modifiez la logique en conséquence pour vous.

VIOLON

6
SharmaPattar

Je pense que cela pourrait vous aider:
Voici la démo JSFiddle :

Et voici le code:

var stIsIE = /*@cc_on!@*/ false;
sorttable = {
  init: function() {
    if (arguments.callee.done) return;
    arguments.callee.done = true;
    if (_timer) clearInterval(_timer);
    if (!document.createElement || !document.getElementsByTagName) return;
    sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
    forEach(document.getElementsByTagName('table'), function(table) {
      if (table.className.search(/\bsortable\b/) != -1) {
        sorttable.makeSortable(table);
      }
    });
  },
  makeSortable: function(table) {
    if (table.getElementsByTagName('thead').length == 0) {
      the = document.createElement('thead');
      the.appendChild(table.rows[0]);
      table.insertBefore(the, table.firstChild);
    }
    if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0];
    if (table.tHead.rows.length != 1) return;
    sortbottomrows = [];
    for (var i = 0; i < table.rows.length; i++) {
      if (table.rows[i].className.search(/\bsortbottom\b/) != -1) {
        sortbottomrows[sortbottomrows.length] = table.rows[i];
      }
    }
    if (sortbottomrows) {
      if (table.tFoot == null) {
        tfo = document.createElement('tfoot');
        table.appendChild(tfo);
      }
      for (var i = 0; i < sortbottomrows.length; i++) {
        tfo.appendChild(sortbottomrows[i]);
      }
      delete sortbottomrows;
    }
    headrow = table.tHead.rows[0].cells;
    for (var i = 0; i < headrow.length; i++) {
      if (!headrow[i].className.match(/\bsorttable_nosort\b/)) {
        mtch = headrow[i].className.match(/\bsorttable_([a-z0-9]+)\b/);
        if (mtch) {
          override = mtch[1];
        }
        if (mtch && typeof sorttable["sort_" + override] == 'function') {
          headrow[i].sorttable_sortfunction = sorttable["sort_" + override];
        } else {
          headrow[i].sorttable_sortfunction = sorttable.guessType(table, i);
        }
        headrow[i].sorttable_columnindex = i;
        headrow[i].sorttable_tbody = table.tBodies[0];
        dean_addEvent(headrow[i], "click", sorttable.innerSortFunction = function(e) {

          if (this.className.search(/\bsorttable_sorted\b/) != -1) {
            sorttable.reverse(this.sorttable_tbody);
            this.className = this.className.replace('sorttable_sorted',
              'sorttable_sorted_reverse');
            this.removeChild(document.getElementById('sorttable_sortfwdind'));
            sortrevind = document.createElement('span');
            sortrevind.id = "sorttable_sortrevind";
            sortrevind.innerHTML = stIsIE ? '&nbsp<font face="webdings">5</font>' : '&nbsp;&#x25B4;';
            this.appendChild(sortrevind);
            return;
          }
          if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
            sorttable.reverse(this.sorttable_tbody);
            this.className = this.className.replace('sorttable_sorted_reverse',
              'sorttable_sorted');
            this.removeChild(document.getElementById('sorttable_sortrevind'));
            sortfwdind = document.createElement('span');
            sortfwdind.id = "sorttable_sortfwdind";
            sortfwdind.innerHTML = stIsIE ? '&nbsp<font face="webdings">6</font>' : '&nbsp;&#x25BE;';
            this.appendChild(sortfwdind);
            return;
          }
          theadrow = this.parentNode;
          forEach(theadrow.childNodes, function(cell) {
            if (cell.nodeType == 1) {
              cell.className = cell.className.replace('sorttable_sorted_reverse', '');
              cell.className = cell.className.replace('sorttable_sorted', '');
            }
          });
          sortfwdind = document.getElementById('sorttable_sortfwdind');
          if (sortfwdind) {
            sortfwdind.parentNode.removeChild(sortfwdind);
          }
          sortrevind = document.getElementById('sorttable_sortrevind');
          if (sortrevind) {
            sortrevind.parentNode.removeChild(sortrevind);
          }

          this.className += ' sorttable_sorted';
          sortfwdind = document.createElement('span');
          sortfwdind.id = "sorttable_sortfwdind";
          sortfwdind.innerHTML = stIsIE ? '&nbsp<font face="webdings">6</font>' : '&nbsp;&#x25BE;';
          this.appendChild(sortfwdind);
          row_array = [];
          col = this.sorttable_columnindex;
          rows = this.sorttable_tbody.rows;
          for (var j = 0; j < rows.length; j++) {
            row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), rows[j]];
          }
          row_array.sort(this.sorttable_sortfunction);
          tb = this.sorttable_tbody;
          for (var j = 0; j < row_array.length; j++) {
            tb.appendChild(row_array[j][1]);
          }
          delete row_array;
        });
      }
    }
  },

  guessType: function(table, column) {
    sortfn = sorttable.sort_alpha;
    for (var i = 0; i < table.tBodies[0].rows.length; i++) {
      text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
      if (text != '') {
        if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) {
          return sorttable.sort_numeric;
        }
        possdate = text.match(sorttable.DATE_RE)
        if (possdate) {
          first = parseInt(possdate[1]);
          second = parseInt(possdate[2]);
          if (first > 12) {
            return sorttable.sort_ddmm;
          } else if (second > 12) {
            return sorttable.sort_mmdd;
          } else {
            sortfn = sorttable.sort_ddmm;
          }
        }
      }
    }
    return sortfn;
  },
  getInnerText: function(node) {
    if (!node) return "";
    hasInputs = (typeof node.getElementsByTagName == 'function') &&
      node.getElementsByTagName('input').length;
    if (node.getAttribute("sorttable_customkey") != null) {
      return node.getAttribute("sorttable_customkey");
    } else if (typeof node.textContent != 'undefined' && !hasInputs) {
      return node.textContent.replace(/^\s+|\s+$/g, '');
    } else if (typeof node.innerText != 'undefined' && !hasInputs) {
      return node.innerText.replace(/^\s+|\s+$/g, '');
    } else if (typeof node.text != 'undefined' && !hasInputs) {
      return node.text.replace(/^\s+|\s+$/g, '');
    } else {
      switch (node.nodeType) {
        case 3:
          if (node.nodeName.toLowerCase() == 'input') {
            return node.value.replace(/^\s+|\s+$/g, '');
          }
        case 4:
          return node.nodeValue.replace(/^\s+|\s+$/g, '');
          break;
        case 1:
        case 11:
          var innerText = '';
          for (var i = 0; i < node.childNodes.length; i++) {
            innerText += sorttable.getInnerText(node.childNodes[i]);
          }
          return innerText.replace(/^\s+|\s+$/g, '');
          break;
        default:
          return '';
      }
    }
  },
  reverse: function(tbody) {
    // reverse the rows in a tbody
    newrows = [];
    for (var i = 0; i < tbody.rows.length; i++) {
      newrows[newrows.length] = tbody.rows[i];
    }
    for (var i = newrows.length - 1; i >= 0; i--) {
      tbody.appendChild(newrows[i]);
    }
    delete newrows;
  },
  sort_numeric: function(a, b) {
    aa = parseFloat(a[0].replace(/[^0-9.-]/g, ''));
    if (isNaN(aa)) aa = 0;
    bb = parseFloat(b[0].replace(/[^0-9.-]/g, ''));
    if (isNaN(bb)) bb = 0;
    return aa - bb;
  },
  sort_alpha: function(a, b) {
    if (a[0] == b[0]) return 0;
    if (a[0] < b[0]) return -1;
    return 1;
  },
  sort_ddmm: function(a, b) {
    mtch = a[0].match(sorttable.DATE_RE);
    y = mtch[3];
    m = mtch[2];
    d = mtch[1];
    if (m.length == 1) m = '0' + m;
    if (d.length == 1) d = '0' + d;
    dt1 = y + m + d;
    mtch = b[0].match(sorttable.DATE_RE);
    y = mtch[3];
    m = mtch[2];
    d = mtch[1];
    if (m.length == 1) m = '0' + m;
    if (d.length == 1) d = '0' + d;
    dt2 = y + m + d;
    if (dt1 == dt2) return 0;
    if (dt1 < dt2) return -1;
    return 1;
  },
  sort_mmdd: function(a, b) {
    mtch = a[0].match(sorttable.DATE_RE);
    y = mtch[3];
    d = mtch[2];
    m = mtch[1];
    if (m.length == 1) m = '0' + m;
    if (d.length == 1) d = '0' + d;
    dt1 = y + m + d;
    mtch = b[0].match(sorttable.DATE_RE);
    y = mtch[3];
    d = mtch[2];
    m = mtch[1];
    if (m.length == 1) m = '0' + m;
    if (d.length == 1) d = '0' + d;
    dt2 = y + m + d;
    if (dt1 == dt2) return 0;
    if (dt1 < dt2) return -1;
    return 1;
  },
  shaker_sort: function(list, comp_func) {
    var b = 0;
    var t = list.length - 1;
    var swap = true;
    while (swap) {
      swap = false;
      for (var i = b; i < t; ++i) {
        if (comp_func(list[i], list[i + 1]) > 0) {
          var q = list[i];
          list[i] = list[i + 1];
          list[i + 1] = q;
          swap = true;
        }
      }
      t--;

      if (!swap) break;

      for (var i = t; i > b; --i) {
        if (comp_func(list[i], list[i - 1]) < 0) {
          var q = list[i];
          list[i] = list[i - 1];
          list[i - 1] = q;
          swap = true;
        }
      }
      b++;

    }
  }
}
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", sorttable.init, false);
}
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
    document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    var script = document.getElementById("__ie_onload");
    script.onreadystatechange = function() {
        if (this.readyState == "complete") {
            sorttable.init(); // call the onload handler
        }
    };
/*@end @*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      sorttable.init(); // call the onload handler
    }
  }, 10);
}
/* for other browsers */
window.onload = sorttable.init;

function dean_addEvent(element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else {
    if (!handler.$$guid) handler.$$guid = dean_addEvent.guid++;
    if (!element.events) element.events = {};
    var handlers = element.events[type];
    if (!handlers) {
      handlers = element.events[type] = {};
      if (element["on" + type]) {
        handlers[0] = element["on" + type];
      }
    }
    handlers[handler.$$guid] = handler;
    element["on" + type] = handleEvent;
  }
};
dean_addEvent.guid = 1;

function removeEvent(element, type, handler) {
  if (element.removeEventListener) {
    element.removeEventListener(type, handler, false);
  } else {
    if (element.events && element.events[type]) {
      delete element.events[type][handler.$$guid];
    }
  }
};

function handleEvent(event) {
  var returnValue = true;
  event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
  var handlers = this.events[event.type];
  for (var i in handlers) {
    this.$$handleEvent = handlers[i];
    if (this.$$handleEvent(event) === false) {
      returnValue = false;
    }
  }
  return returnValue;
};

function fixEvent(event) {
  event.preventDefault = fixEvent.preventDefault;
  event.stopPropagation = fixEvent.stopPropagation;
  return event;
};
fixEvent.preventDefault = function() {
  this.returnValue = false;
};
fixEvent.stopPropagation = function() {
  this.cancelBubble = true;
}
if (!Array.forEach) {
  Array.forEach = function(array, block, context) {
    for (var i = 0; i < array.length; i++) {
      block.call(context, array[i], i, array);
    }
  };
}
Function.prototype.forEach = function(object, block, context) {
  for (var key in object) {
    if (typeof this.prototype[key] == "undefined") {
      block.call(context, object[key], key, object);
    }
  }
};
String.forEach = function(string, block, context) {
  Array.forEach(string.split(""), function(chr, index) {
    block.call(context, chr, index, string);
  });
};
var forEach = function(object, block, context) {
  if (object) {
    var resolve = Object;
    if (object instanceof Function) {
      resolve = Function;
    } else if (object.forEach instanceof Function) {
      object.forEach(block, context);
      return;
    } else if (typeof object == "string") {
      resolve = String;
    } else if (typeof object.length == "number") {
      resolve = Array;
    }
    resolve.forEach(object, block, context);
  }
}
table.sortable thead {
  background-color: #eee;
  color: #666666;
  font-weight: bold;
  cursor: default;
}
<table class="sortable">
  <thead>
    <tr>
      <th>S.L.</th>
      <th>name</th>
      <th>Goal</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Ronaldo</td>
      <td>120</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Messi</td>
      <td>66</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Ribery</td>
      <td>10</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Bale</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

JS est utilisé ici sans aucun autre plugin JQuery.

5
Pradeep Kumar Prabaharan

Vous pouvez utiliser le plugin jQuery DataTables pour appliquer le tri des colonnes de la manière souhaitée.

Tri des colonnes à l'aide de DataTable

0
Bhushan Kawadkar
var TableIDvalue = "myTable";
var TableLastSortedColumn = -1;

function SortTable() {
  var sortColumn = parseInt(arguments[0]);
  var type = arguments.length > 1 ? arguments[1] : 'T';
  var dateformat = arguments.length > 2 ? arguments[2] : '';
  var table = document.getElementById(TableIDvalue);
  var tbody = table.getElementsByTagName("tbody")[0];
  var rows = tbody.getElementsByTagName("tr");

  var arrayOfRows = new Array();

  type = type.toUpperCase();

  dateformat = dateformat.toLowerCase();

  for (var i = 0, len = rows.length; i < len; i++) {
    arrayOfRows[i] = new Object;
    arrayOfRows[i].oldIndex = i;
    var celltext = rows[i].getElementsByTagName("td")[sortColumn].innerHTML.replace(/<[^>]*>/g, "");
    if (type == 'D') {
      arrayOfRows[i].value = GetDateSortingKey(dateformat, celltext);
    } else {
      var re = type == "N" ? /[^\.\-\+\d]/g : /[^a-zA-Z0-9]/g;
      arrayOfRows[i].value = celltext.replace(re, "").substr(0, 25).toLowerCase();
    }
  }

  if (sortColumn == TableLastSortedColumn) {
    arrayOfRows.reverse();
  } else {
    TableLastSortedColumn = sortColumn;
    switch (type) {
      case "N":
        arrayOfRows.sort(CompareRowOfNumbers);
        break;
      case "D":
        arrayOfRows.sort(CompareRowOfNumbers);
        break;
      default:
        arrayOfRows.sort(CompareRowOfText);
    }
  }
  var newTableBody = document.createElement("tbody");

  for (var i = 0, len = arrayOfRows.length; i < len; i++) {
    newTableBody.appendChild(rows[arrayOfRows[i].oldIndex].cloneNode(true));
  }
  table.replaceChild(newTableBody, tbody);
}

function CompareRowOfText(a, b) {
  var aval = a.value;
  var bval = b.value;
  return (aval == bval ? 0 : (aval > bval ? 1 : -1));
}

function deleteRow(i) {
  document.getElementById('myTable').deleteRow(i)
}
<table id="myTable" border="1">
  <thead>
    <tr>
      <th>
        <input type="button" onclick="javascript: SortTable(0, 'T');" value="SORT" /></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Shaa</td>
      <td>ABC</td>
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
    </tr>
    <tr>
      <td>cnubha</td>
      <td>XYZ</td>
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
    </tr>
    <tr>
      <td>Fine</td>
      <td>MNO</td>
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
    </tr>
    <tr>
      <td>Amit</td>
      <td>PQR</td>
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
    </tr>
    <tr>
      <td>Sultan</td>
      <td>FGH</td>
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>UST</td>
      <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
    </tr>

  </tbody>
</table>
0
Mayur Narula