DatatablesOfficial 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
<!-- DataTables -->
<link href="{% static 'libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css' %}" rel="stylesheet" type="text/css" />

<!-- Responsive datatable examples -->
<link href="{% static 'libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css' %}" rel="stylesheet" type="text/css" />
JavaScript
<!-- DataTables JS-->
<!-- Required datatable js -->
<script src="{% static 'libs/datatables.net/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
<!-- Buttons examples -->
<script src="{% static 'libs/datatables.net-buttons/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js' %}"></script>
<script src="{% static 'libs/jszip/dist/jszip.min.js' %}"></script>
<script src="{% static 'libs/pdfmake/build/pdfmake.min.js' %}"></script>
<script src="{% static 'libs/pdfmake/build/vfs_fonts.js' %}"></script>
<script src="{% static 'libs/datatables.net-buttons/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'libs/datatables.net-buttons/js/buttons.print.min.js' %}"></script>
<script src="{% static 'libs/datatables.net-buttons/js/buttons.colVis.min.js' %}"></script>

<!-- Responsive examples -->
<script src="{% static 'libs/datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js' %}"></script>
Initjs (Custom js)
<!-- datatables js -->
<script src="{% static 'js/pages/datatables.init.js' %}"></script>
Add Package
yarn add datatables --save
Remove Package
yarn remove datatables or you can remove package by removing specific package from package.json
Examples:
Title HTML
Datatable 
$(document).ready(function() {
    $('#datatable').DataTable();

    //Buttons examples
    var table = $('#datatable-buttons').DataTable({
        lengthChange: false,
        buttons: ['copy', 'excel', 'pdf', 'colvis']
    });

    table.buttons().container()
        .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');

    $(".dataTables_length select").addClass('form-select form-select-sm');
});
© Skote.