Datatables

OverviewOfficial Website

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

CSS
<!--datatable css-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<!--datatable responsive css-->
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
Javascript
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!--datatable js-->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
Initjs (Custom js)
<script src="assets/js/pages/datatables.init.js"></script>
Examples
Title Javascript
Basic Datatables
document.addEventListener('DOMContentLoaded', function () {
    let table = new DataTable('#example',);
});

Scroll - Vertical
document.addEventListener('DOMContentLoaded', function () {
let table = new DataTable('#scroll-vertical', {
    "scrollY":        "210px",
    "scrollCollapse": true,
    "paging":         false
    });                                                          
});
Scroll - Horizontal
document.addEventListener('DOMContentLoaded', function () {
let table = new DataTable('#scroll-horizontal', {
    "scrollX": true
    });
});
Alternative Pagination
document.addEventListener('DOMContentLoaded', function () {
let table = new DataTable('#alternative-pagination', {
    "pagingType": "full_numbers"
    });
});
Add Rows
$(document).ready(function() {
var t = $('#add-rows').DataTable();
var counter = 1;

$('#addRow').on( 'click', function () {
    t.row.add( [
        counter +'.1',
        counter +'.2',
        counter +'.3',
        counter +'.4',
        counter +'.5',
        counter +'.6',
        counter +'.7',
        counter +'.8',
        counter +'.9',
        counter +'.10',
        counter +'.11',
        counter +'.12'
    ] ).draw( false );

    counter++;
} );

// Automatically add a first row of data
$('#addRow').click();
});
Fixed Header Datatables
document.addEventListener('DOMContentLoaded', function () {
let table = new DataTable('#fixed-header', {
    "fixedHeader": true
    });                                                          
});
Modal Data Datatables
document.addEventListener('DOMContentLoaded', function () {
let table = new DataTable('#model-datatables', {
    responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data[0]+' '+data[1];
                    }
                } ),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                    tableClass: 'table'
                } )
            }
        }
    });                                                          
}); 
Buttons Datatables
document.addEventListener('DOMContentLoaded', function () {
let table = new DataTable('#buttons-datatables', {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'print', 'pdf'
        ]
    });
});  
Ajax Datatables
document.addEventListener('DOMContentLoaded', function () {
let table = new DataTable('#ajax-datatables', {
        "ajax": 'assets/json/datatable.json'
    });
}); 
© Velzon.
Design & Develop by Themesbrand