Manipulate DataTables Externally with DOM Elements

Posted on by Sam Galope
Manipulate DataTables Externally with DOM Elements
Manipulate DataTables Externally with DOM Elements

DataTables is a powerful jQuery plugin that transforms static HTML tables into dynamic, interactive interfaces capable of managing large datasets efficiently. By integrating external DOM elements—such as buttons, filters, and search functionalities—into your DataTables, you can create a more engaging user experience. This guide will demonstrate how to connect external controls, like dropdowns and checkboxes, to your DataTables, allowing users to filter and search data seamlessly.

In this guide, you’ll learn to enhance your DataTables by setting up event listeners that enable real-time updates based on user input. By the end, your DataTables will not only respond intelligently to user interactions but also facilitate a streamlined data management process that encourages deeper exploration and analysis.

Table of Contents

The Art of External DOM Elements

Imagine a DataTable that’s more than just a static display. You have dynamic form elements placed outside your table, and they hold the key to fine-tuning your data interactions.

Embrace External DOM Elements:

The use of external DOM elements in DataTables empowers you to create a dynamic user experience. These elements, whether they are select boxes, checkboxes, or text fields, extend your DataTables’ capabilities beyond the ordinary.

Use Cases:

The integration of external DOM elements is ideal when you want to provide users with advanced filtering options, custom searches, or enhanced data interactions. Let’s explore how to achieve this.

Incorporating External Select Boxes for Enhanced Filtering

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <label for="categorySelect">Filter by Category:</label>
    <select id="categorySelect">
        <option value="">All</option>
        <option value="Technology">Technology</option>
        <option value="Finance">Finance</option>
        <option value="Health">Health</option>
    </select>
    
    <table id="dataTable" class="display">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Category</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>30</td>
                <td>Technology</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <td>Finance</td>
            </tr>
            <!-- Add more data rows here -->
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            var table = $('#dataTable').DataTable();

            // Link select box to 'Category' column
            $('#categorySelect').on('change', function() {
                table.columns(2).search(this.value).draw();
            });
        });
    </script>
</body>
</html>

Expected Result:

Users can select a category from the dropdown, and the table will filter based on the chosen category. Choosing “All” will display all data.

Enhancing Data Selection with External Checkboxes

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.3.4/js/dataTables.select.min.js"></script>
</head>
<body>
    <table id "dataTable" class="display">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>30</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
            </tr>
            <!-- Add more data rows here -->
        </tbody>
    </table>

    <button id="selectAll">Select All</button>
    <button id="deselectAll">Deselect All</button>

    <script>
        $(document).ready(function() {
            var table = $('#dataTable').DataTable({
                select: true
            });

            $('#selectAll').on('click', function() {
                table.rows().select();
            });

            $('#deselectAll').on('click', function() {
                table.rows().deselect();
            });
        });
    </script>
</body>
</html>

Expected Result

Users can click “Select All” to select all rows or “Deselect All” to deselect all rows in the table.

Adding External Text Fields for Custom Search

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/searchbuilder/1.1.0/js/dataTables.searchBuilder.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.1.0/css/searchBuilder.dataTables.min.css">
</head>
<body>
    <input type="text" id="customSearch" placeholder="Custom Search">
    
    <table id="dataTable" class="display">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>30</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
            </tr>
            <!-- Add more data rows here -->
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            var table = $('#dataTable').DataTable({
                dom: 'lBfrtip',
                buttons: ['copy', 'excel', 'csv', 'pdf', 'print']
            });

            $('#customSearch').on('input', function() {
                table.search(this.value).draw();
            });
        });
    </script>
</body>
</html>

Expected Result

Users can enter search queries in the text field, and the table will filter based on the custom search criteria.

Conclusion

The power of external DOM elements in DataTables is a game-changer in data management. It allows you to extend your DataTables’ capabilities beyond the ordinary, providing a seamless and responsive user experience. By leveraging external form elements, you can fine-tune filtering, data selection, and custom searches, making your DataTables more dynamic and user-friendly.

As you explore DataTables and data management, remember that external DOM elements empower you to create data tables that are truly responsive to user input, enhancing the overall user experience.

Stay tuned for more DataTables tutorials and happy coding!

Related Posts

One thought on “Manipulate DataTables Externally with DOM Elements”

Leave a Reply

Your email address will not be published. Required fields are marked *