6

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.

1
  • t.row(pictures[$id].id).remove() .draw() is the right way to do it. Mar 31, 2017 at 5:58

3 Answers 3

15

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.

0
3
$('#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.

3
  • if I want to insert one row in datatable then?
    – nidhi
    May 21, 2020 at 3:21
  • I tried with append but when i delete the row appended row is not visible after remove another row.
    – nidhi
    May 21, 2020 at 3:22
  • 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() May 22, 2020 at 5:36
1
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.

1
  • Could you make jsfiddle with it?
    – Anton Krug
    May 6, 2021 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.