it will bring up the deleted row when thead is clicked | Error

Question

I want to delete datatable row permanently

if I delete all the rows, i want datatable will display the default "No data available" text.

I already try some POST : But no luck

DataTables remove row button with answer :

$("#dataTables-example").on('click', '.btn-info', function () {
        $(this).parent().parent().remove();
    });

I cannot remove row with jQuery with answer :

$( 'tbody tr:last-child' ).remove();

But, when I delete all the rows, the text "No data available" does not appear. and when thead is clicked, it will bring up the deleted row.

========================

MY JSFiddle

jQuery delete row :

$(document).on('click', '.deleteRow', function() {
$(this).closest('tr').remove();
});

in dataTable func :

 "columns": [
        { "data": "id"},
        { "data": "name" },
        { "data": "subtype"},
        { "data": "approximate_count" },
        { "data": "time_created" },
        {data: null ,
        "sClass" : "center",
        "sDefaultContent" : '<button class="deleteRow">Delete</button> '
        },
        ],

Pratik Gadoya · Accepted Answer · 2017-11-27T05:22:12.547

2

For displaying default text, you can try

$('#example').DataTable({
    "language": {
        "emptyTable": "My Custom Message On Empty Table"
    },
    rowId: id
});

For deleting row use,

You need to remove data from backend as well using ajax. Than you can use below function.

$(document).on('click', '.deleteRow', function(e) {
    var id = $(this).parents('tr').attr('id');
    var rowid = document.getElementById(id);
    var Pos = table.fnGetPosition(rowid);
    table.fnDeleteRow(Pos);
});

Please check jsfiddle.

JSFIDDLE

edited Nov 27 '17 at 05:22

answered Nov 25 '17 at 10:21

Pratik Gadoya

1,420
1
16
27

Sorry, that's not what I mean. I want if I have deleted all the rows, the dataTable will bring up the "No data available" text. But in my jsfiddle displaying a blank table when all rows already deleted. – Calvin Ananda Nov 25 '17 at 10:25
can you help me how to input your deleting row code into jsfiddle?? – Calvin Ananda Nov 25 '17 at 10:27
@CalvinAnanda, why bother when @mrchidam have posted a correct answer? The above assumes you have an `id` attribute on the ``'s which you have not. – davidkonrad Nov 25 '17 at 12:46
[davidkonrad](https://stackoverflow.com/users/1407478/davidkonrad), @Patrik's answer was help me. – Calvin Ananda Nov 25 '17 at 12:49

score 1 · Answer 2 · answered Nov 25 '17 at 10:53

By deleting the element from the DOM, you are not actually deleting the data from the DataTable's memory. You have to use the DataTable's API methods to manipulate the table (add, edit, delete, etc).

Assign the return value of the DataTable() method to a variable. This is the reference to the DataTable object.

For example:

var table = $("myTable").DataTable({
    // DataTable options goes here
});

Now, to delete a particular row, use the row().remove() method in the onclick event handler of the remove button as shown below.

$(".removeButton").click(function () {
        table.row( $(this).parents('tr') ).remove().draw();
});

Here is the API reference for this method.

IMO the correct answer, here is OP's fiddle updated with the needed oneliner -> **https://jsfiddle.net/oawftt7z/3/** — davidkonrad, Nov 25 '17 at 12:49

score 0 · Answer 3 · answered Nov 25 '17 at 10:39

You should set plugin using DataTable(), not dataTable().

Then to get the relevant row to delete, you could use: myTable.row(':eq(' + $(this).closest('tr').index() + ')'). Maybe there is better way but i don't know enough Datatable plugin.

See jsFiddle.

And to get custom message, as explains in @PratikGadoya's answer, see jsFiddle.

it will bring up the deleted row when thead is clicked | Error

3 Answers3