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="{% static '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' }); });`