web-dev-qa-db-fra.com

Données de la table de tri JQuery

Je me suis retrouvé coincé dans le tri des tables dans la table en utilisant jquery 

Ma démo violon

Comment puis-je l'appeler pour n'importe quelle table avec id dans mon projet?

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

Quelque chose comme ça

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

pourrait être appelé sur une table comme celle-ci

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

FIDDLE

41
adeneo

Je pense que vous manquez la dernière fonction "reset" pour trier le tableau. Le code desc ne fonctionnera pas car l'ordre doit être changé.

Code:

$('.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();
});

Démo: http://jsfiddle.net/7wwvL/

METTRE À JOUR

Plus généralement, votre fonction peut être:

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

Démo: http://jsfiddle.net/d7Kbx/

5
Irvin Dominin

Voici une version modifiée de la réponse d'Adeneo. Cela triera la table en fonction du texte de la colonne spécifiée au lieu de la première colonne uniquement. Ceci cherchera également le mot "Nom" dans la deuxième colonne et s'assurera que la ligne reste en haut (rangée d'en-tête).

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

Pour ce faire, utilisez jquery et bootstrap avec le filtre de recherche, appelez simplement jquery avec id. Par exemple, j'ai utilisé cet identifiant #exemple, vous pouvez l'utiliser comme identifiant de table et inclure le jquery et le jquery datatable.

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

Démo ici

1
M. Lak

Si des personnes se présentent ici à la recherche d'une fonction de tri de table, mais ne veulent pas utiliser jQuery, voici une solution équivalente utilisant du code natif pour le navigateur:

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

Voici une version modifiée de Tri de table avec jquery qui fonctionne pour moi en tant que FONCTION DE TRI DE ROW DE ASCENSION INTERNE INTERNE SIMPLE}

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>

0
efwjames

Si vous avez plus de 10 lignes, la fonction ne fonctionne plus correctement ..__ Ceci est une version mise à jour de @ 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();
});

La ligne de tableau ressemblera à ceci, en utilisant le nom de classe comme type: rendre chaque kolom triable par lui-même;

  <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