DataTables ligne.ajouter à l'index spécifique

Je suis en remplacement de la ligne des articles comme ceci:

var $targetRow = $(entity.row),
    dataTable = $targetRow.closest('table.dataTable').DataTable();

dataTable.row($targetRow).remove();

dataTable.row.add({ foo: 1 }).draw();

J'logique dans l' rowCreated de rappel lié à la table, donc je suis à la recréation de la ligne d'en faire usage. Cela fonctionne très bien. Mais row.add ajoute toujours le régénéré ligne en dernier dans la liste. Est-il possible de l'insérer dans un index spécifique?

InformationsquelleAutor filur | 2015-06-08
  1. 13

    dataTables tient ses lignes dans un tableau indexé, et il n'existe pas de méthodes de l'API pour ajouter une nouvelle ligne à un index spécifique ou de modifier le index() d'une ligne.

    Que fait réellement le bon sens depuis un typique dataTable est toujours triés /a ordonné ou filtré sur les données, pas la statique de l'index. Et lorsque vous recevez des données d'un serveur, ou souhaitez transmettre des données à un serveur, vous n'utilisez jamais la statique client index() soit.

    Mais si vous pensez à ce sujet, vous pouvez aussi réorganiser les lignes et par l'insertion d'une ligne à un indice très facile par le code, simplement par la réorganisation des données. Lorsqu'une nouvelle ligne est ajoutée, échangez les données de la dernière ligne (la ligne insérée) à la dernière rangée, le swap de données à partir de la deuxième ligne à la troisième de la dernière rangée et ainsi de suite, jusqu'à ce que vous atteignez l'indice de l'endroit où vous souhaitez insérer la ligne.

    [0][1][2][3][4->][<-newRow]
[0][1][2][3->][<-newRow][4]
[0][1][2->][<-newRow][3][4]

    Exemple, l'insertion d'une nouvelle ligne à l'index où la souris est cliqué :

    $("#example").on('click', 'tbody tr', function() {
    var currentPage = table.page();

    //insert a test row
    count++;
    table.row.add([count, count, count, count, count]).draw();

    //move added row to desired index (here the row we clicked on)
    var index = table.row(this).index(),
        rowCount = table.data().length-1,
        insertedRow = table.row(rowCount).data(),
        tempRow;

    for (var i=rowCount;i>index;i--) {
        tempRow = table.row(i-1).data();
        table.row(i).data(tempRow);
        table.row(i-1).data(insertedRow);
    }     
    //refresh the current page
    table.page(currentPage).draw(false);
});

    démo -> http://jsfiddle.net/mLh08nyg/

    • Il a travaillé beaucoup 🙂
    • Nice! Un travail remarquable.
    InformationsquelleAutor davidkonrad
  2. 3

    Une autre façon est d'insérer la ligne, et ensuite passer à la ligne dans la ligne de DataTable tableau à une position que vous spécifiez avant de redessiner la Table:

    //Define the row to insert (using your method of choice)
var rowInsert = $('#table-id').find('tr:last');
//Get table reference - note: dataTable() not DataTable()
var table = $('#table-id').dataTable();
//Get api
var dt = table.api();
//Insert row (inserted as the last element in aiDisplayMaster array)
dt.row.add(rowInsert);
//Get the array holding the rows
var aiDisplayMaster = table.fnSettings()['aiDisplayMaster'];
//Remove the last element in the array
var moveRow = aiDisplayMaster.pop();
//EITHER add row to the beginning of the array (uncomment)
//aiDisplayMaster.unshift(moveRow);
//OR add row to a specific index (in this case to index 3)
var index = 3;
aiDisplayMaster.splice(index, 0, moveRow);
//Redraw Table
dt.draw(false);
    InformationsquelleAutor RickL