Smart & Easy way to JavaScript DataTables export data

What is the smart and easy method to export datatable all data or selected rows or selected columns as excel, csv, pdf, print or copy? This post is explaining how to export all data or selected data with fast and attractive UI designs.

First of all you must have a basic knowledge of using the datatable. Follow this javascrpt datatable API to know more.

Export all data

Make sure you have added required datatable files. I’m using the below css files. You can add only required files.

<link href="/assets/libs/datatables/css/buttons.bootstrap4.min.css" rel="stylesheet" />    <!-- Required -->
<link href="/assets/libs/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="/assets/libs/datatables/css/responsive.bootstrap4.min.css" rel="stylesheet" />
<link href="/assets/libs/datatables/css/select.bootstrap4.min.css" rel="stylesheet" />

Javascript files

<script src="/assets/libs/datatables/js/jquery.dataTables.min.js"></script>
<script src="/assets/libs/datatables/js/dataTables.bootstrap4.min.js"></script>
<script src="/assets/libs/datatables/js/dataTables.responsive.min.js"></script>
<script src="/assets/libs/datatables/js/responsive.bootstrap4.min.js"></script>

<script src="/assets/libs/datatables/js/dataTables.buttons.min.js"></script>
<script src="/assets/libs/datatables/js/buttons.bootstrap4.min.js"></script>
<script src="/assets/libs/datatables/js/buttons.html5.min.js"></script>
<script src="/assets/libs/datatables/js/buttons.flash.min.js"></script>
<script src="/assets/libs/datatables/js/buttons.print.min.js"></script>

<script src="/assets/libs/datatables/js/dataTables.select.min.js"></script>

<script src="/assets/libs/datatables/js/pdfmake.min.js"></script>
<script src="/assets/libs/datatables/js/vfs_fonts.js"></script>

What is the common UI and function to export data?

Follow this link for the demo.

$('#example-table-id').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
});

Okay. Now let’s see how to export all data in smart way.

$('.dt-dataTables-data').dataTable({
                    paging: true,
                    lengthChange: true,
                    searching: true,
                    ordering: true,
                    info: true,
                    autoWidth: false,
                    pageLength: 10,
                    order: [[1, "asc"]],
                    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    responsive: true, 
                    dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start datatable-search'l><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end datatable-btns'fB>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'i><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'p>>",
                    buttons: [
                        {
                            extend: 'collection',
                            text: 'Export',
                            buttons: [
                                {
                                    extend: 'copy',
                                    title: function () {
                                        var printTitle = 'List of Employees';
                                        return printTitle
                                    },
                                    exportOptions: {
                                        columns: [1, 2, 3, 4, 5, 6] // put the coloumn index you want to export. starting from 0 index
                                    }
                                },
                                {
                                    extend: 'csv',
                                    title: function () {
                                        var printTitle = 'List of Employees';
                                        return printTitle
                                    },
                                    exportOptions: {
                                        columns: [1, 2, 3, 4, 5, 6]
                                    }
                                },
                                {
                                    extend: 'excel',
                                    title: function () {
                                        var printTitle = 'List of Employees';
                                        return printTitle
                                    },
                                    exportOptions: {
                                        columns: [1, 2, 3, 4, 5, 6]
                                    }
                                },
                                {
                                    extend: 'pdf',
                                    title: function () {
                                        var printTitle = 'List of Employees';
                                        return printTitle
                                    },
                                    exportOptions: {
                                        columns: [1, 2, 3, 4, 5, 6]
                                    },
                                },
                                {
                                    extend: 'print',
                                    title: function () {
                                        var printTitle = 'List of Employees';
                                        return printTitle
                                    },
                                    exportOptions: {
                                        columns: [1, 2, 3, 4, 5, 6]
                                    },
                                    customize: function (win) {
                                        $(win.document.body).addClass('white-bg'); 
                                        $(win.document.body).find('h1').css('font-size', '15pt');
                                        $(win.document.body).find('h1').css('text-align', 'center');
                                        $(win.document.body).find('table').addClass('compact').css('font-size', 'inherit');
                                    }
                                }
                            ]
                        }
                    ],

        });

Explanation

dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start datatable-search'l><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end datatable-btns'fB>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'i><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'p>>",

This dom attribute is showing the export button and other top toolbar items as in the above. You can customize this as you wish. Refer this link.

How to export selected rows?

You must include the select.js as below.

<script src='https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js'></script>   

Just use the below code as the parameter to select rows. Select rows by clicking with shift key.

           select: true,

Demo

Download Full Source Code