Lazy loading table in bootstrap tabs?

shishi666

Hello,
I would love to use several tables in bootstrap tab, but I would also like to load only the table that is present in the tab I clicked and reload each time the same tab becomes active again.
I tried to do this on several events tabs: the click, when displayed ....
But I can not reload my table and destroy the table of the previous active tab.
Do you have any tips on how best to implement what I'm trying to do?
thanks in advance

shishi666

Sorry for the double message masi if you want to see my code I can provide it maybe it will help you understand my request.
thanks in advance

colin

Hi @shishi666 ,

This thread here might help. There's an example of a BS event, shown.bs.tab, which I imagine you could also use to initialise the table when it's shown,

Cheers,

Colin

shishi666

thanks for your answer

I read this post before asking my question is that I do not know the number of tabs there will be on the page. Here is my code:

<ul class="nav nav-tabs " id="onglets-principaux" role="tablist">
    <li class="nav-item active">
        <a class="nav-link " id="onglet-competences" data-toggle="tab" href="#competences" role="tab" aria-controls="competences" aria-selected="" data-entite="personne" data-langue="fr">Compétences / projets</a>
    </li>
</ul>
<div class="tab-content ml-4" id="sous-formulaires-principaux">
    <div class="tab-pane fade show active" id="competences" role="tabpanel" aria-labelledby="competences">
        <ul class="nav nav-tabs my-2 ml-4" id="sous-onglets-competences" role="tablist">
            <li class="nav-item active">
                <a class="nav-link " id="onglet-competences0__0competences" data-table="competences0__0competences0__00" data-toggle="tab" href="#competences0__0competences" role="tab" aria-controls="competences0__0competences" aria-selected="" data-entite="personne" data-langue="fr">Compétences</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " id="onglet-competences0__0projets" data-table="competences0__0projets0__01" data-toggle="tab" href="#competences0__0projets" role="tab" aria-controls="competences0__0projets" aria-selected="" data-entite="personne" data-langue="fr">Projets</a>
            </li>
        </ul>
        <div class="tab-content ml-4" id="sous-formulaires-competences">
            <div class="tab-pane fade my-2 show active" id="competences0__0competences" role="tabpanel" aria-labelledby="competences0__0competences">
                <table id="competences0__0competences0__00" class="table table-striped table-bordered dt-responsive nowrap mt-2" style="width: 100">
                    <thead>
                        <tr>
                            <th data-visible="0" >acomp_per_id</th>
                            <th data-visible="0" >acomp_comp_id</th>
                            <th data-visible="0" >acomp_per_id</th>
                            <th data-visible="0" >acomp_comp_id</th>
                            <th data-visible="1" >Identifiant de la compétence</th>
                            <th data-visible="1" >Libellé de la compétence</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="tab-pane fade my-2 " id="competences0__0projets" role="tabpanel" aria-labelledby="competences0__0projets">
                <table id="competences0__0projets0__01" class="table table-striped table-bordered dt-responsive nowrap mt-2" style="width: 100">
                    <thead>
                        <tr>
                            <th data-visible="0" >acomp_per_id</th>
                            <th data-visible="0" >acomp_comp_id</th>
                            <th data-visible="0" >acomp_per_id</th>
                            <th data-visible="0" >acomp_comp_id</th>
                            <th data-visible="0" >acomp_comp_id</th>
                            <th data-visible="1" >Libellé de la compétence</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

And JS :

$(".tabs").click(function(e) {
        var tableId = $(this).data("table");
        initialiseTable(tableId);
    });
    function initialiseTable(tableId) {

        if ($.fn.dataTable.isDataTable($('#' + tableId)) == false) {
            $('#' + tableId).DataTable( {
                data:[
                        [
                            "Tiger Nixon",
                            "System Architect",
                            "Edinburgh",
                            "5421",
                            "2011/04/25",
                            "$320,800"
                          ],

                          [
                            "Rhona Davidson",
                            "Integration Specialist",
                            "Tokyo",
                            "6200",
                            "2010/10/14",
                            "$327,900"
                          ]
                        ],
                scrollY:        200,
                scrollCollapse: true,
                paging:         false
            });

            $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
        }
    }

thanks in advance

colin

Hi @shishi666 ,

There's a lot going on there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin