Search code examples
tabulator

Tabulator 4.5 get data from api but do not render the table with data


In a modal context , Tabulator get data from api but do not render the table.

If I put a sleep of 500 milliseconds before return json from the api, the data show up.

<div class="form-group">
 <div id="tablePersonnages"></div>
</div>

<script type="text/javascript">

var table = new Tabulator("#tablePersonnages",({
    pagination: "local",
    paginationSize: 10,
    history: true,
    ajaxURL: '@Url.Action("ObtenirPersonnages", "FicheHistorique")',
    ajaxParams: { idFiche: '@Model' },
    ajaxConfig: "POST",
    layout: "fitColumns",       
    locale: true,
    langs: {
        "fr-fr": {

            "ajax": {
                "loading": "Chargement", //ajax loader text
                "error": "Erreur" //ajax error text
            },

            "pagination": {
                "first": "Début", //text for the first page button
                "first_title": "Première page", //tooltip text for the first page button
                "last": "Fin",
                "last_title": "Dernière page",
                "prev": "Préc",
                "prev_title": "Page précédente",
                "next": "Suiv",
                "next_title": "Page suivante"
            }
        }
    },
    columns: [ //Define Table Columns

        { title: "Id", field: "Id", visible: false },
        { title: "Nom", field: "Nom", headerFilter: "input", headerFilterPlaceholder: " " },
        { title: "Prenom", field: "Prenom", headerFilter: "input", headerFilterPlaceholder: " " },
        { title: "Fonction", field: "Fonction", headerFilter: "input", headerFilterPlaceholder: " " },
        { title: "Naissance", field: "Naissance" },
        { title: "Deces", field: "Deces" },
        { formatter: link, width: 10 }
    ]

}));

Table not loaded with data


Solution

  • On Modal Open Event

    Call table.redraw(true) If still doesn't work put the redraw in a setTimeout()