datatable-customizer

hemant-chandra
js Styles
datatable-customizer JS library on npm Download datatable-customizer JS library

A custom datatable initializer with additional features for filtering, exporting, and more.

Version 1.0.3 License MIT
datatable-customizer has no homepage
datatable-customizer JS library on GitHub
datatable-customizer JS library on npm
Download datatable-customizer JS library
Keywords
datatablecustomfilterexportpagination

Custom DataTable Package

This package provides a customizable DataTable implementation with additional features like filtering, exporting, pagination, and search functionality. It is built on top of the popular DataTables jQuery plugin.

Features

  • Custom filtering logic
  • Export options (CSV, Excel, PDF, Copy, Print)
  • Pagination control
  • Search functionality with state saving
  • Dynamic length menu
  • Custom draw callbacks

Installation

  1. Install Root Dependency

    <script src="https://www.unpkg.com/datatable-customizer@1.0.1/index.js"></script>
    
  2. Install Dependencies:

    Make sure you have jQuery and DataTables installed in your project. You can include them via CDN:

    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>
    
     <!-- SumoSelect CSS and JS -->
    <link rel="stylesheet" href="https://www.unpkg.com/datatable-customizer@1.0.1/assets/sumoselect.css">
    <script src="https://www.unpkg.com/datatable-customizer@1.0.1/assets/jquery.sumoselect.min.js"></script>
    <script src="https://www.unpkg.com/datatable-customizer@1.0.1/assets/jquery.sumoselect.js"></script>
    
  3. Include Your Script:

    Add your custom JavaScript file to your HTML:

    <script src="https://www.unpkg.com/datatable-customizer@1.0.1/index.js"></script>
    

Usage

  1. Initialize DataTable:

    You can initialize the DataTable by calling the datatable function with the necessary options:

    $(document).ready(function () {
        datatable({
            tableId: "yourTableId",  // The ID of your table element
            url: "/your-endpoint",    // URL for server-side data processing
            dataLength: '[data-length]',  // Selector for length menu element
            dataSearch: '[data-search]',  // Selector for search input element
            dataFilter: '[data-filter]',  // Selector for filter elements
            dataExport: '[data-export]',  // Selector for export buttons
            dataShowEntries: '[data-show-entries]',  // Selector for showing entries
            dataPagination: '[data-pagination]',  // Selector for pagination container
            dataStateSave: false,  // Save state (optional)
            drawCallback: function(settings) {
                console.log('DataTable Drawn');
                $('[data-bs-toggle="popover"]').popover('dispose');
                $('[data-bs-toggle="popover"]').popover({
                    trigger: 'hover'
                });
            }
        });
    });
    
  2. HTML Structure:

    Ensure your HTML structure includes the necessary elements:

    <table id="yourTableId" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <!-- Add more columns as needed -->
            </tr>
        </thead>
        <tbody>
            <!-- Table data will be loaded via AJAX -->
        </tbody>
    </table>
    
    <!-- Elements for length, search, filter, export, show entries, and pagination -->
    <select data-length>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="-1">All</option>
    </select>
    <input type="text" data-search placeholder="Search here...">
    <!-- Add filter elements as needed -->
    <button data-export="pdf">Export PDF</button>
    <button data-export="csv">Export CSV</button>
    <div data-show-entries></div>
    <ul data-pagination></ul>
    
  3. Customizing Draw Callback:

    If you need to customize the table's behavior after each draw, modify the drawCallback function passed to the datatable function:

    drawCallback: function(settings) {
        console.log('Table redrawn with settings:', settings);
        // Add custom actions here
    }
    

License

This project is licensed under the MIT License.