CODEWITHSUNDEEP
datatables
Strywyr
Strywyr

Reputation: 250

How to display "No data available" in datatable after deleting rows

I have datatable with action onclick delete function that deleting the row. How can i display "no data available" in case i delete all the row?

Here's my code.

        {
            "data": "Action",
            render: (data, type, row) => {
                return `<div class="actionIcon"><a id="viewExamination" onclick="individualDetails('${row["NAME"]}', '${row["BIRTHDAY"]}', '${row["Phone Number"]}')" data-toggle="modal" data-target="#asdffdsddd" data-backdrop="false" data-keyboard="false"><i class="fa-solid fa-outdent"></i></a><a id="delThisData" onclick="deleteDetailsNewHired()"><i class="fas fa-trash-alt"></i> </a> </div>`;
            }
        }

   function deleteDetailsNewHired() {
       $("#delThisData").closest('tr').remove();
   }

Upvotes: 1

Views: 568

Answers (1)

andrewJames
andrewJames

Reputation: 21919

There is a difference between the data stored inside the DataTables object and the data you can see displayed in the web page. If you only delete a <tr> from the HTML, you have not deleted that row from the underlying DataTable.

See the DataTables API function row().remove().

Note the use of the draw() function as well, to re-draw the table data so you actually see the resuts of the remove() operation reflected in the HTML.

After that, you can take a look at the language.emptyTable option (which you set once as part of the table definition) if you want to use a custom message. By default, the message you see is:

No data available in table

But it can be anything you want.

This is a similar overall issue as noted here. It is important to understand the difference between the data stored in your DataTable and the data which happens to be rendered on the currently visible web page.

Upvotes: 1

Related Questions