Do something after jQuery DataTables have successfully loaded

Here is a simple method to do something after the jQuery DataTables has been successfully loaded. Just add your step inside “initComplete” function.

CODE

<!DOCTYPE html>
<html>
<head>
<title>Callback function every time new datatable is loaded</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
</head>
<body>

    <div id="myTableWrapper">
        <table id="myTable">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
                <tr>
                    <td>Row 2 Data 1</td>
                    <td>Row 2 Data 2</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        $(document).ready( function () {
            $('#myTable').DataTable({
                "initComplete": function( settings, json ) {
                $("#myTableWrapper").append('<h2>Datatable Successfully Loaded</h2>');
                }
            });
        });
    </script>

</body>
</html>

Do something after jQuery DataTables have successfully loaded

CODE

DEMO