DataTable JQuery How to remove a row from a table based on an ID?

Question

I have a web application where you can drag and drop pictures into boxes. If you drop it in the one it will add the picture's information to the datatable, if you drop in the left it will remove the data from the datatable. I was wondering If there was a way I could remove the row based on the id?

$('#pictures')
    .dataTable({
        "columnDefs": [{
                "orderable": false,
                "targets": 1
            },
            {
                "orderable": false,
                "targets": 3
            }
        ]
    });
var t = $('#pictures')
    .DataTable();


$("#left")
    .droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            console.log("drop");
            $(this)
                .removeClass("border")
                .removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped)
                .detach()
                .css({
                    top: 0,
                    left: 0
                })
                .appendTo(droppedOn);

            var $id = $(this)
                .children()
                .last()
                .attr('id');
            var rowId = pictures[id].id;
            t.row(pictures[$id].id)
                .remove()
                .draw(false);
        }
    });

This obviously isn't the entire thing; however, I think this is enough to identify any problems.

Reeve

t.row(pictures[$id].id).remove() .draw() is the right way to do it. – Cordie

Answer 1

You can use DataTable's API to remove the corresponding row:

t.row("your selector here").remove().draw();

in row() you could use several kind of selectors. If you saved the row's id in a variable, simply use

t.row("#"+rowId).remove().draw();

Note that you have to call draw() after a remove, since datatables doesn't redraw itself after a remove due to performance reasons.

Photomicrograph

Answer 2

$('#pictures').DataTable().row("#YourRowId").remove().draw();

If the item you want to delete is the parent window;

window.parent.$('#pictures').DataTable().row("#YourRowId").remove().draw();

If you want to delete all the rows;

$('#pictures').DataTable().row().remove().draw();

You should pay attention to the JS version.

Turboelectric

if I want to insert one row in datatable then? – Brenza

I tried with append but when i delete the row appended row is not visible after remove another row. – Brenza

var table = $('#example').DataTable(); table.row.add( { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" } ).draw(); Source : datatables.net/reference/api/row.add() – Rode

Answer 3

var table1= $('#TableID').DataTable({
    "createdRow": function (row, data, dataIndex) {
         var rowID = "row_" + data[0];
         $(row).attr('id', rowID);
     }});   
var rowID = "#row_" + any format that follows as per your row ID;    table1.row(rowID).remove().draw();

This will work for everyone. Here, in "createdRow" callback of the DataTable constructor, you can define all the data based styling that you want on your DataTable. I Have defined a row ID to be assigned to each row based on the value of the first column.

Kirstiekirstin

Could you make jsfiddle with it? – Syrupy

Answer 4

If you want do delete the selected row, this works:

buttons: [
  {
     extend: 'selectedSingle',
     text: 'Delete Selected Row',
     action: function (e, dt, node, config) {
        dt.rows({ selected: true }).remove().draw();
     }
   }
],

I'm not sure what would happen if more than one row was selected, or if any of the rows were duplicates.

Dew