web-dev-qa-db-ja.com

JQueryソートテーブルデータ

Jqueryを使用してテーブルのtdsを並べ替えるのに打たれました。

私のデモ フィドル

私のプロジェクトのIDを持つテーブルに対してどのように呼び出すことができますか？

var $sort = this;
var $table = $('#mytable');
var $rows = $('tbody > tr',$table);
$rows.sort(function(a, b) {
    var keyA = $('td:eq(0)',a).text();
    var keyB = $('td:eq(0)',b).text();
    if($($sort).hasClass('asc')) {
        return (keyA > keyB) ? 1 : 0;
    } else {
        return (keyA < keyB) ? 1 : 0;
    }
});
jquerysorting
25
Kurkula

このようなもの

function sortTable(table, order) {
    var asc   = order === 'asc',
        tbody = table.find('tbody');

    tbody.find('tr').sort(function(a, b) {
        if (asc) {
            return $('td:first', a).text().localeCompare($('td:first', b).text());
        } else {
            return $('td:first', b).text().localeCompare($('td:first', a).text());
        }
    }).appendTo(tbody);
}

このような任意のテーブルで呼び出すことができます

sortTable($('#mytable'),'asc');

[〜＃〜] fiddle [〜＃〜]

47
adeneo

テーブルをソートするための最終的な「リセット」機能がないと思います。順序を切り替える必要があるため、descコードは機能しません。

コード：

$('.sort').click(function (e) {
    var $sort = this;
    var $table = $('#mytable');
    var $rows = $('tbody > tr', $table);
    $rows.sort(function (a, b) {
        var keyA = $('td', a).text();
        var keyB = $('td', b).text();
        if ($($sort).hasClass('asc')) {
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA > keyB) ? 0 : 1;
        }
    });
    $.each($rows, function (index, row) {
        $table.append(row);
    });
    e.preventDefault();
});

デモ： http://jsfiddle.net/7wwvL/

更新

より一般的には、関数は次のようになります。

function sortTable($table,order){
    var $rows = $('tbody > tr', $table);
    $rows.sort(function (a, b) {
        var keyA = $('td', a).text();
        var keyB = $('td', b).text();
        if (order=='asc') {
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA > keyB) ? 0 : 1;
        }
    });
    $.each($rows, function (index, row) {
        $table.append(row);
    });
}

sortTable($('#mytable'),'asc')

デモ： http://jsfiddle.net/d7Kbx/

6
Irvin Dominin

これは、jqueryとbootstrapを使用して、idを使用してjqueryを呼び出すだけです。たとえば、このidを使用しました。 。

$(document).ready(function() {
$('#example').DataTable();
} );

ここでデモ

2
M. Lak

これは、Adeneoからの回答の修正版です。これにより、最初の列だけでなく、指定した列のテキストに基づいてテーブルが並べ替えられます。また、2番目の列で「名前」という単語を検索し、行が先頭（ヘッダー行）にあることを確認します。

function SortTable(table, order, nr) {
var asc = order === 'asc',
    tbody = table.find('tbody');

tbody.find('tr').sort(function (a, b) {
    if ($('td:nth-child('+ nr +')', a).text() == "Name") return $('td:nth-child('+ nr +')', a).text();
    else if (asc) {
        return $('td:nth-child('+ nr +')', a).text().localeCompare($('td:nth-child('+ nr +')', b).text());
    } else {
        return $('td:nth-child('+ nr +')', b).text().localeCompare($('td:nth-child('+ nr +')', a).text());
    }
}).appendTo(tbody);}
1
Nicolai Dutka

これは jquery によるテーブルソートの修正バージョンで、シンプル内部昇順行ソート機能として機能します

var $tbody = $('#mytable tbody');

$tbody.find('tr').sort(function(a, b) {
  var tda = $(a).attr('data-order'); // target order attribute
  var tdb = $(b).attr('data-order'); // target order attribute
  // 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);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr data-order="4">
      <td>d</td>
    </tr>
    <tr data-order="2">
      <td>b</td>
    </tr>
    <tr data-order="1">
      <td>a</td>
    </tr>
    <tr data-order="3">
      <td>c</td>
    </tr>
  </tbody>
1
efwjames

テーブルソート関数を探している人がここに表示されても、jQueryを使用してそれを実行したくない場合は、ブラウザネイティブコードを使用した同等のソリューションを次に示します。

function sortTable(table, order, selector) {
    selector = selector || 'th:first-child, td:first-child';
    var asc = order === 'asc';

    var tbody = table.querySelector('tbody') || table;
    var nodes = tbody.querySelectorAll('tr');
    var sortedNodes = Array.prototype.slice.apply(nodes);
    sortedNodes.sort(function (a, b) {
        var textA = a.querySelector(selector).textContent;
        var textB = b.querySelector(selector).textContent;
        if (asc) {
            var temp = textB;
            textB = textA;
            textA = temp;
        }
        return textA.localeCompare(textB);
    });
    tbody.textContent = '';
    for (var i = 0; i < sortedNodes.length; i++) {
        tbody.appendChild(sortedNodes[i]);
    }
}
0
Chris

10行を超える場合、関数は正しく機能しなくなります。これは、@ irvin-domininからの更新バージョンです

 $('.js_sortme').click(function (e) {
  var $sort = this;
  var $table = $('#floorplan-table-list');
  var $rows = $('tbody > tr', $table);
  var $type = $($sort).attr('data-type');
  if ($($sort).hasClass('asc')) {
    $('.js_sortme', $table).removeClass('desc');
    $('.js_sortme', $table).removeClass('asc');
    $('.js_sortme', $table).removeClass('active');
    $($sort).addClass('desc');
    $($sort).addClass('active');
  } else {
    $('.js_sortme', $table).removeClass('desc');
    $('.js_sortme', $table).removeClass('asc');
    $('.js_sortme', $table).removeClass('active');
    $($sort).addClass('asc');
    $($sort).addClass('active');
  }

  $rows.sort(function (a, b) {
    var keyA = parseInt($('td.'+$type+'', a).attr('data-position'));
    var keyB = parseInt($('td.'+$type+'', b).attr('data-position'));
    if ($($sort).hasClass('asc')) {
        var result = keyA - keyB;
        if (result !== 0) { return result; }
        // Fetch secondary keys
        keyA = parseInt( $('td.'+$type+'', a).attr('data-position') );
        keyB = parseInt( $('td.'+$type+'', b).attr('data-position') );
        return keyA - keyB;             
    } else {
        var result = keyB - keyA;
        if (result !== 0) { return result; }
        // Fetch secondary keys
        keyA = parseInt( $('td.'+$type+'', a).attr('data-position') );
        keyB = parseInt( $('td.'+$type+'', b).attr('data-position') );
        return keyB - keyA;             
    }
  });
  $.each($rows, function (index, row) {
    $table.append(row);
  });
  e.preventDefault();
});

クラス名をタイプとして使用すると、テーブル行は次のようになります。各kolomを独自にソート可能にします。

  <tr>
    <td class="A" data-position="1">a-value-1</td>
    <td class="B" data-position="3">b-value-3</td>
  </tr>
  <tr>
    <td class="A" data-position="2">a-value-2</td>
    <td class="B" data-position="2">b-value-2</td>
  </tr>
  <tr>
    <td class="A" data-position="3">a-value-3</td>
    <td class="B" data-position="1">b-value-1</td>
  </tr>
0
J Haagsman