jquery - How to sort table rows using class names?

Question

Hi i have the bellow code i want to sort table rows based on the class name ..here each row contains two classes one is "sprint1" and second one is "cls*" ..i want to sort the rows bassed on the second class...thanks in advance

   <tr class="sprint1 cls5">

   <tr class="sprint1 cls4">

   <tr class="sprint1 cls3">

   <tr class="sprint1 cls1">

   <tr class="sprint1 cls2">

Answer 1

を使用Array.sortしてクラスを並べ替え、それに応じて行を並べ替えます。

http://jsfiddle.net/jamietre/eyr4N/

    var i, 
        table = $('table'),
        rows = $('tr'),
        classes = [];

    // build an array from the 2nd item in the class list on each row

    rows.each(function(i, e) {
        classes.push(e.className.split(' ')[1]);
    });

    // sort the array

    classes.sort();

    // reorganize the rows by adding each one again to the table, in the order of the
    // sorted class list. ("Adding" it with jquery append will move it to the end).

    for (i = 0; i < classes.length; i++) {
        table.append(table.find('tr.' + classes[i]));
    }

Answer 2

array名前に基づいて を作成し、要素classを置き換えることができます。tr

var arr = [];
$('tr[class*="cls"]').each(function(i, v){
    var ind = this.className.slice(-1)
    arr[ind-1] = this.outerHTML
})    
$('table').html(arr.join(""))   
// or $('table tbody').html(arr.join(""))       

フィドル

Answer 3

ソート方法を使用してください。

var x = $('tr'); // <-- get all tr 
x.sort(function(a,b) {
    // split class name at cls and get the number after to sort with
    return $(a).attr('class').split('cls')[1] - $(b).attr('class').split('cls')[1];
});
// remake the table with new sorted tr
$('table > tbody').html(x);

http://jsfiddle.net/UTXUY/1/

Answer 4

jQuery.dataTables を使用してみてください...これにより、ページネーションと並べ替えオプションが提供され、これが含まれます

   <link href="css/demo_page.css" rel="stylesheet" id="stylesheet"/>
      <link href="css/demo_table.css" rel="stylesheet" />
     <script  src="js/jquery.dataTables.js"></script>

テーブルを宣言します

      <table id="abc" class="display">
          ...
       </table>

jQuery 呼び出し:

        $('#abc').dataTable({

        "iDisplayLength": 5,

           });