CODEWITHSUNDEEP
javascriptjquerydatatables
User1899289003
User1899289003

Reputation: 872

Datatable exporting values after being deleted

I have a table and I want to export the data using jQuery Datatables export buttons, the problem is that I want to clear specific values in specific columns (at the HTML table on browser there is no problem) the problem is when I try to export the data. Datatables is creating file with data that I supposedly erase.

Here is my code:

$("#TableId").DataTable({
  dom: '<"top"Bf>rt<"bottom"lip><"clear">',
  buttons: [
    "copy", //'csv', 'excel', 'pdf', 'print'
    {
      extend: "excel",
      title: "Report",
      footer: true
    },
    {
      extend: "pdf",
      title: "Report",
      footer: true
    },
    {
      extend: "print",
      title: "Report",
      footer: true
    }
  ],
  aLengthMenu: [[2, 3, 5, 1, -1], [2, 3, 5, 1, "All"]],
  bDestroy: true,
  iDisplayLength: -1,
  fnDrawCallback: clearDateValues
});

function clearDateValues() {
  $("#TableId tbody .clearthis").each(function() {
    $(this).text("");
  });
}

Here is the Codepen with my code

What I'm doing wrong? Maybe is the updateTable called on frDrawCallback?

Upvotes: 0

Views: 654

Answers (2)

samabcde
samabcde

Reputation: 8114

  1. Since the data in the table will be exported to excel, we should use DataTable data() method to clear the data on fnDrawCallback.

  2. To preserve ordering, an invisible column is added to store the value for sorting, and the visible column(Exit Data) will sort using the data in invisible column.

The above changes is applied in this code pen. However, the table looks strange if we sort on Route Exit.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171689

Clear the elements before initializing the plugin.

The plugin stores the data internally so clearing the text in the html after it initializes doesn't remove it from the internal data cache. It is that internal data that will get exported, not the visible html text

If the text is empty to start with then the internal cache will be the same as what is displayed

$("#TableId tbody .clearthis").empty();

$("#TableId").DataTable({......})

You could also remove the rows completely , something like:

$("#TableId tbody tr").has('.clearthis').remove()

Upvotes: 0

Related Questions