Javascript Datatable custom export button in the cell

Reading Time: < 1 minute

Let’s say we have the data table along with the export option. But you want to export selected row, but that should be implemented on selected row button. This post explains how to export selected row data without clicking on export button on the data table.

Call to libraries

//CSS libraries to include

lib/datatables/datatables.min.css
lib/datatables/Select-1.7.0/css/select.dataTables.min.css
lib/datatables/Buttons-2.4.2/css/buttons.dataTables.min.css



//JS libraries to include

libs/datatables/datatables.min.js
libs/buttons/1.3.1/js/dataTables.buttons.min.js
libs/jszip/3.1.3/jszip.min.js
libs/pdfmake/0.1.53/vfs_fonts.js
libss/buttons/1.3.1/js/buttons.html5.min.js
libss/buttons/js/buttons.print.min.js

 

Table implementation

<table class="wpsh-ic-all-orders dataTable" id="wpsh-ic-all-orders">
    <thead>
        <tr>
            <th>Campaign Name</th>
            <th>Processing Status </th>
            <th>Crawl Status </th>
            <th>Report </th>
        </tr>
    </thead>
    <tbody>

    <tr>  
        
        <td>Smithwebstore</td>
        
        <td>Processing Completed</td>
        
        <td>Crawled</td>
        <td><div class="wpsh-ic-order-status">Pending</div></td>
    </tr>
    <tr>  
        
        <td>Smithwebstore.com</td>
        
        <td>Processing Completed</td>
        
        <td>Crawled</td>
        <td><div class="wpsh-ic-order-status wpsh-ic-order-download"><a class="wpsh-ic-btn wpsh-ic-download-report-btn">Download</a></div></td>
    </tr>
    <tr>  
        
        <td>Mass links</td>
        
        <td>Processing Completed</td>
        
        <td>Crawled</td>
        <td><div class="wpsh-ic-order-status wpsh-ic-order-download"><a class="wpsh-ic-btn wpsh-ic-download-report-btn">Download</a></div></td>
    </tr> 
    <tr>  
        
        <td>Chatgpt</td>
        
        <td>Processing Completed</td>
        
        <td>Crawled</td>
        <td><div class="wpsh-ic-order-status wpsh-ic-order-download"><a class="wpsh-ic-btn wpsh-ic-download-report-btn">Download</a></div></td>
    </tr>
    </tbody> 
</table>

 

Data table implementation

var jTable = $('#wpsh-ic-all-orders').DataTable({
        dom: 'Bfrtip',
        paging: true,
        lengthChange: true,
        searching: true,
        ordering: true,
        info: true,
        autoWidth: false,
        iDisplayLength: 25,
        pageLength: 25,
        columnDefs: [
            { width: 100},
        ],
        order: [[0, "desc"]],
        lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],			
        buttons: [ 						
            {
                extend: 'excel',
                text:       'Export selected as Excel',
                title: function () {
                    var printTitle = 'List of campaigns';
                    return printTitle
                },
                exportOptions: {
                    columns: [2,5,4],
                    modifier: {
                        selected: true
                    }
                }
            }
        ],
        responsive: true,
});
        
$('#wpsh-ic-all-orders tbody').on('click', '.wpsh-ic-download-report-btn', function() {
    var row = jTable.row($(this).closest('tr'));

    // Toggle row selection
    row.select();

    // Trigger Excel export on selected row
    jTable.button('.buttons-excel').trigger();
});