CODEWITHSUNDEEP
javascriptjquerydatatables
triplethreat77
triplethreat77

Reputation: 1296

Delete multiple selected DataTable rows with one click?

I am using an example from Datatables to delete rows from a table. This works fine, one by one but I need the ability to select and delete multiple rows. I commented the //.removeClass('row_selected'); so the user is visually able to select more than one row, but still the rows only delete one at a time. Ideas? https://datatables.net/release-datatables/examples/api/select_single_row.html

http://jsfiddle.net/BWCBX/22/

jQuery

var oTable;

$(document).ready(function() {
    /* Add a click handler to the rows - this could be used as a callback */
    $("#example tbody tr").click( function( e ) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        }
        else {
            oTable.$('tr.row_selected')//.removeClass('row_selected');
            $(this).addClass('row_selected');
        }
    });

    /* Add a click handler for the delete row */
    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        if ( anSelected.length !== 0 ) {
            oTable.fnDeleteRow( anSelected[0] );
        }
    } );

    /* Init the table */
    oTable = $('#example').dataTable( );
} );


/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
    return oTableLocal.$('tr.row_selected');
}*

Upvotes: 0

Views: 19881

Answers (3)

kasali
kasali

Reputation: 118

this worked for me :

var oTable = new DataTable(".dataTable", {
  paging: true,
  pageLength: 10,
  responsive: true,
  select: {
    style: "multi", // Enable multi-selection
    selector: "td:first-child", // Enable selection on the first column (checkbox)
  },
  language: {
    processing: true,
    search: "Rechercher :",
    lengthMenu: " _MENU_ éléments",
    info: " Total : _TOTAL_ ",
    infoEmpty: " 0 élément",
    infoFiltered: "(_MAX_ éléments au total)",
    infoPostFix: "",
    loadingRecords: "Chargement en cours...",
    zeroRecords: "Aucun élément à afficher",
    emptyTable: "Aucune donnée disponible dans le tableau",
    paginate: {
      first: "Premier",
      previous: "Précédent",
      next: "Suivant",
      last: "Dernier",
    },
    aria: {
      sortAscending: ": activer pour trier la colonne par ordre croissant",
      sortDescending: ": activer pour trier la colonne par ordre décroissant",
    },
  },
});

// Toggle the selected class on row click
oTable.on('click', 'tbody tr', function () {
    $(this).toggleClass('selected');
});

// Handle multiple selection and row removal
$('#delete-selected-btn').click(function () {
    var selectedRows = oTable.rows('.selected').data();

    if (selectedRows.length > 0) {
        // Remove selected rows
        oTable.rows('.selected').remove().draw(false);
    } else {
        alert('Please first make a selection from the list.');
    }
});

Upvotes: 0

Ganjar Setia
Ganjar Setia

Reputation: 31

Here my version, It will delete multiple row and update data info in the footer

$('#delete').click( function() {
    var anSelected = fnGetSelected( oTable );

    for (var i = 0; i < anSelected.length; i++) {
        oTable.fnDeleteRow(anSelected[i]);
    };
});

The Datatable have delete function row, but only 1 row. So I just looping it. The info will be updated too.

Showing 1 to 3 of 3 entries

here my code and demo

http://jsfiddle.net/BWCBX/95/

Upvotes: 3

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

This will delete multiple rows...

$('#delete').click( function() {
    var anSelected = fnGetSelected( oTable );
    $(anSelected).remove();
} );

This is preferable to using the in-built delete method in dataTables as it changed quite drastically at one point. Initially, it would retain row indexes between deletes, so you could delete row 1, then row 2, then row 3 etc.. It was then changed so that you could delete row 1, and row 2 would become row 1, so you'd have to delete row 1 again etc..

Using the above method just removes the rows from the table directly, which is much easier and will save you hassle if changing versions of dataTables at any time.

http://jsfiddle.net/BWCBX/23/

Upvotes: 8

Related Questions