CODEWITHSUNDEEP
javascriptjquerydatatables
L. Ouellet
L. Ouellet

Reputation: 133

Datatables does not activate

I am using JavaScript to load a file into a div. Which contains a table that I want to activate as DataTable

panel.js:

document.getElementById('navBtnApps').addEventListener('click', loadApps);

function loadApps(){
    $('#mainCTN').load("/src/view/apps.php");
    $('#tblApps').DataTable();
};

apps.php:

    <div class="container pt-4">
        <div class="col-12 border-bottom mb-5 pl-0">
            <h3 class="display-4">
                Your Apps
                <button type="button" class="btn btn-success ml-2" data-toggle="modal" data-target="#new">
                    <i class="fas fa-plus mr-1"></i>
                    New
                </button>
            </h3>
        </div>
        <table id="tblApps" class="table table-striped">
            <thead>
                <tr>
                    <th>Application</th>
                    <th style="width:250px;">Action</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach(scandir(dirname(__FILE__,3) . '/apps/') as $app){ ?>
                    <?php if(("$app" != "..") and ("$app" != ".") and ("$app" != ".htaccess")){ ?>
                        <tr>
                            <td><?=$app?></td>
                            <td>
                                <form method="post">
                                    <a href="?p=apps&name=<?=$app?>" class="btn btn-sm btn-primary">
                                        <i class="fas fa-eye mr-1"></i>
                                        Details
                                    </a>
                                    <button type="submit" name="DeleteApp" value="<?=$app?>" class="btn btn-sm btn-danger">
                                        <i class="fas fa-trash-alt mr-1"></i>
                                        Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    <?php } ?>
                <?php } ?>
            </tbody>
        </table>
    </div>

When I press the navBtnApps button in my index very quickly, I can see that datatables is being activated. But as soon as the page stops loading, datatables gets deactivated. Any ideas why?

Upvotes: 0

Views: 62

Answers (2)

gaetanoM
gaetanoM

Reputation: 42044

jUqery.load() Load data from the server and place the returned HTML into the matched elements.

The data loaded will be available only after they are loaded, hence you need to run datatable in the callback.

Change :

function loadApps(){
   $('#mainCTN').load("/src/view/apps.php");
   $('#tblApps').DataTable();
};

To:

function loadApps(){
    $('#mainCTN').load("http://localhost:63342/StackOverflow/1.html", ftion() {
        $('#tblApps').DataTable();
    });
};

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

With your code:

$('#mainCTN').load("/src/view/apps.php");
$('#tblApps').DataTable();

$().load is asynchronous, so your #tblApps doesn't exist when you immediately (before it's finished loading) call .DataTable() on it.

Add the call into the $.load callback:

$('#mainCTN').load("/src/view/apps.php", function() {
    $('#tblApps').DataTable();
});

Upvotes: 1

Related Questions