Comment supprimer la ligne actuelle avec le plugin jquery datatable ?

Question

J'ai une colonne avec des boutons dans un tableau. J'utilise le plugin jQuery datatable. Les boutons disent "Remove" et l'idée est que lorsque vous cliquez sur ce bouton, il supprime la ligne actuelle dans le tableau.

Quand j'appelle fnDeleteRow il semble que cela fonctionne la première fois, mais plus jamais pour cette ligne, donc il semble que cela ne supprime pas vraiment la ligne correctement.

Answer 1

Essayez ça :

var row = $(this).closest("tr").get(0);
oTable.fnDeleteRow(oTable.fnGetPosition(row));

Si cela ne fonctionne pas, vérifiez les points suivants exemple

Answer 2

Disons que vous avez attaché une fonction à appeler lorsque l'utilisateur clique sur le bouton. La fonction serait quelque chose comme ceci

function DeleteRow(event)
{
  //get the row of the cell that is clicked
  var $row = $(this).parents("tr").eq(0)
  //if you need the id you can get it as
  var rowid = $row.attr("id");
  //now you can call delete function on this row
  $row.delete(); 
}

Answer 3

Que dites-vous de ça ?

    // Delete Row
    $('.glyphicon-minus').on("click", function() {
        configTable.row($(this).closest("tr").get(0)).remove().draw();
    });

Answer 4

C'est comme ça que ça marche pour moi. Dans la fonction de préparation du document, j'affecte la version convertie du tableau HTML à une variable et, lorsqu'un bouton est cliqué, je passe en revue les parents et les enfants avec JQuery et j'envoie la ligne obtenue comme paramètre à la fonction fnDeleteRow() de la bibliothèque.

Voici les commentaires de la fonction de bibliothèque. Et un exemple qui est mentionné dans la bibliothèque.

/**
* Remove a row for the table
*  @param {mixed} target The index of the row from aoData to be deleted, or
*    the TR element you want to delete
*  @param {function|null} [callBack] Callback function
*  @param {bool} [redraw=true] Redraw the table or not
*  @returns {array} The row that was deleted
*  @dtopt API
*  @deprecated Since v1.10
*
*  @example
*    $(document).ready(function() {
*      var oTable = $('#example').dataTable();
*
*      // Immediately remove the first row
*      oTable.fnDeleteRow( 0 );
*    } );
*/

// And here's how it worked for me.
var oTable;
$("document").ready(function () {
    oTable = $("#myTable").dataTable();
});

//Remove/Delete button's click.
$("a[name='deleteColumn']").click(function () {
    var $row = $(this).parent().parent();
    oTable.fnDeleteRow($row);
});

Answer 5

De cette page :

$('#example tbody td').click( function () {
    /* Get the position of the current data from the node */
    var aPos = oTable.fnGetPosition( this );

    //...
} );