Datatable remove specific div from row during export to csv

ONLINECAST

3 min read

·

06-10-2024

11

0

Share

Exporting DataTables with Precision: Removing Unwanted Elements from CSV Output

DataTables is a powerful JavaScript library that brings interactivity and enhanced features to HTML tables. Often, however, we encounter situations where we need to export data to a CSV format, but specific elements within our table rows are not meant for inclusion. This could be due to formatting elements like icons, buttons, or even additional divs used for display purposes.

This article will guide you through the process of exporting DataTables data to CSV while elegantly excluding unwanted elements from your final output.

The Scenario: A Table with Extra Elements

Imagine a table where each row contains a product name, price, and a "view details" button housed within a <div> element. We want to export this table to a CSV file, but the "view details" button should be excluded.

<table id="products">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Price</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$100</td>
      <td>
        <div class="view-details">
          <button>View Details</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>Product B</td>
      <td>$250</td>
      <td>
        <div class="view-details">
          <button>View Details</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<script>
  $(document).ready(function() {
    $('#products').DataTable();
  });
</script>

When exporting this table to CSV, the <div> elements will be included in the output, creating messy data.

The Solution: Customizing the Export Process

We can achieve our goal by customizing the DataTables export process. The key is to manipulate the data before it's written to the CSV file. Here's how:

1. Utilize the DataTables API: DataTables offers a powerful API that allows us to customize almost every aspect of its functionality. The rows().data() method lets us retrieve the data from each row.

2. Targeted Manipulation: Loop through each row's data and remove the unwanted elements using jQuery's .find() and .remove() methods.

3. Create a Clean Data Array: Construct a new array containing only the data we want to export.

4. Export the Clean Data: Use a library like FileSaver.js or Blob.js to generate and download the CSV file from the prepared data array.

Here's an example of how to implement this solution:

$(document).ready(function() {
  $('#products').DataTable({
    dom: 'Bfrtip',
    buttons: [
      {
        extend: 'csvHtml5',
        exportOptions: {
          modifier: {
            selected: true
          }
        },
        title: "Products List",
        filename: "products_list",
        customize: function (csv) {
          var rows = $('#products').DataTable().rows().data();
          var cleanData = [];

          // Loop through each row's data
          $.each(rows, function(index, row) {
            // Remove the unwanted div element
            row[2].find('.view-details').remove(); 
            // Add the cleaned data to the new array
            cleanData.push(row);
          });

          // Replace the CSV content with the cleaned data
          csv = cleanData.map(function(row) {
            return row.join(",");
          }).join("\n");

          return csv;
        }
      }
    ]
  });
});

Understanding the Code

• We use DataTables' buttons option to add a "CSV" button.
• The customize function within the "CSV" button configuration lets us modify the CSV content before it's written.
• We loop through the rows, find the <div> with the class "view-details" in the third column, and remove it.
• Finally, we create a new array (cleanData) containing the modified data and use it to replace the original CSV content.

Conclusion

This approach provides a robust solution for controlling DataTables CSV export behavior. By customizing the export process and removing unwanted elements, you ensure a clean and accurate CSV file that meets your specific requirements.

Remember that this example focuses on removing a <div>, but the same principle can be applied to any HTML element that you want to exclude from your exported data.

For further exploration and advanced customization, refer to the official DataTables documentation for more in-depth information on the API and export options: https://datatables.net/