Le tri des lignes de la table selon le tableau d'en-tête de colonne à l'aide de javascript ou jquery

Que vous aimeriez voir cette page:

http://blog.niklasottosson.com/?p=1914

Je suppose que vous pouvez aller quelque chose comme ceci:

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);
});

Espère que cette aide.

l'utilisation de Javascript sort() fonction

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 ascendant vous avez juste à renverser la > et <

Changer la logique en conséquence pour vous.

VIOLON

JS:

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)
}

HTML:

<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>