jQuery DataTables-initiation lente, table html "normale" affichée au début

J'ai fait une solution très simple qui fonctionne bien. Dans l'initialisation DataTable, j'ai utilisé la méthode show ():

$(document).ready(function() {
    $('#example').dataTable({
        "order": [[ 0, 'asc' ]]
    });
    $('#example').show();
} );

... et dans le tableau HTML, je mets le style display: none:

<table id="example" class="display" cellspacing="0" width="100%" style="display:none">

Bonne chance!

J'ai eu le même problème. Essayez ceci:

var dTable=$("#detailtable").dataTable({
        "bProcessing":true,
        "bPaginate":false,
        "sScrollY":"400px",
        "bRetrieve":true,
        "bFilter":true,
        "bJQueryUI":true,
        "bAutoWidth":false,
        "bInfo":true,
        "fnPreDrawCallback":function(){
            $("#details").hide();
            $("#loading").show();
            //alert("Pre Draw");
        },
        "fnDrawCallback":function(){
            $("#details").show();
            $("#loading").hide();
            //alert("Draw");
        },
        "fnInitComplete":function(){
            //alert("Complete");
        }

Basé sur la suggestion de @ hanzolo-voici mon commentaire comme réponse (et à quoi ressemble mon dataTable):

var stockableTable = $('#stockable').dataTable({
      "bLengthChange": false,
      "iDisplayLength": -1,
      "bSort": false,
      "bFilter": false,
      "bServerSide": false,
      "bProcessing": false,
      "sScrollY": "500px",
      "sScrollX": "95%",
      "bScrollCollapse": true,
      // The following reduces the page load time by reducing the reflows the browser is invoking
      "fnPreDrawCallback":function(){
          $("#loading").show();
      },
      "fnDrawCallback":function(){
      },
      "fnInitComplete":function(){
          $("#details").show();
          this.fnAdjustColumnSizing();
          $("#loading").hide();
      }
  });

Je pense que vous devriez probablement simplement charger des scripts dans le _Layout.cshtml, après tout, c'est pour ça. Les vues partielles sont vraiment destinées aux segments qui peuvent être réutilisés dans d'autres domaines ou, à tout le moins, au contenu HTML rendu.

Cela étant dit, une chose facile à faire serait de masquer la table jusqu'à ce qu'elle soit chargée ou même de la masquer et d'afficher un indicateur de progression.

Vous pouvez faire quelque chose comme:

// .loadTable() is some function that loads your table and returns a bool indicating it's finished
//  just remember to check this bool within the function itself as it will be called over and over until it returns true

while (!loadTable()) {

    // maybe show a progress bar

    if ($('#myTable').css('display') != 'none')) {
        $('#myTable').hide();    // if it isn't already hidden, hide it
    }  
}

// hide progress bar
$('#myTable').show();

UDPATE:

Si le plugin de table jQuery a un rappel" succès "ou" fini", il suffit de masquer la table lors du chargement de la page et de l'afficher quand le chargement est terminé.

$(document).ready(function () {
    $('#myTable').hide();

    // run plugin and .show() on success or finished 
});

Ma solution de travail est une astuce "sale" pour cacher la table sans utiliser "display: none". Le style ordinaire "display: none" provoque un problème d'initialisation pour les Tables de données jQuery.

Tout d'abord, placez votre table de données dans un wrapper div:

<div id="dataTableWrapper" style="width:100%" class="dataTableParentHidden">
...data table html as described in jQuery Data Table documentation...
</div>

En CSS:

.dataTableParentHidden {overflow:hidden;height:0px;width:100%;}

Cette solution masque la table de données sans utiliser "display: none".

Après l'initialisation de la table de données, vous devez supprimer la classe de wrapper pour révéler la table:

$('#yourDataTable').DataTable(...);
$('#dataTableWrapper').removeClass('dataTableParentHidden');

Je sais que c'est une question très ancienne, mais peut-être que je peux aider quelqu'un à l'avenir, comment savoir ... Donc, après de nombreuses heures, je trouve la seule solution qui fonctionne pour moi (table, il sera chargé après qu'il soit rendu complet):

      <html>
                <head>
                    <style>
                    .dn {
                         display: none;
                    }
                </style>
                </head>
                <body>
                        <div id="loadDiv" class="firstDivClass secondDivClass">Loading...<div>
                        <table id="myTable" class="dn firstTableClass secondTableClass">
                             <tr><td>Something Here</td></tr>
                        </table>
                </body>


            <script>
         $(document).ready(function(){
    showMeTheTabel();
    });        
    function shoMeTheTable() {
            var dTable = $('#myTable').dataTable({
                "aoColumnDefs": [
                   {bla, bla}
                ],
                "oLanguage": {
                    "bla" : "bla"
                },
                "fnPreDrawCallback":function(){
                },
                "fnDrawCallback":function(){
                    $("#loading").addClass('dn'); 
                    $('#tabel').removeClass('dn');
                },
                "fnInitComplete":function(){
                    console.log("Complete")           // optional and Done !!!
                }
            });
    }
    </script>
     </html>

Cela est dû au plugin ColVis. supprimez le " W " du sDOM et votre rendu de table volera (albiet withou dropdowns)

• ce qui suit est un nœud.exemple de guidon js. Cependant, vous pouvez rendre les données en utilisant n'importe quel framework web frontal que vous utilisez.
• Si vous utilisez bootstrap, vous pouvez masquer la table initialement en utilisant la classe masquée ou bien masquer les éléments manuellement.
• Ensuite, dans le rappel initComplete, vous pouvez utiliser jQuery pour supprimer la classe cachée pour afficher la table seulement une fois qu'elle a été complètement chargée.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">

<table id="stocktable" class="table hidden">
<thead>
  <tr>
    <th>Name</th>
    <th>Last Name</th>
    <th>Age</th>
    <th>Street Address</th>
    <th>State</th>
    <th>Country</th>
  </tr>
</thead>
<tbody>
  {{#each devices}}
    <tr id="{{id}}">
      <td>{{first_name}}</td>
      <td>{{last_name}}</td>
      <td>{{age}}</td>
      <td>{{street_address}}</td>
      <td>{{state}}</td>
      <td>{{country}}</td>
    </tr>
  {{/each}}
</tbody>
</table>

<script>
  $(document).ready(function() {
    $('#stocktable').DataTable({
      columns: [{
          person: 'first_name'
        }, {
          person: 'last_name'
        },
        {
          person: 'age'
        },
        {
          person: 'street_address'
        },
        {
          person: 'state'
        },
        {
          person: 'country'
        }
      ],
      initComplete: function() {
       // Unhide the table when it is fully populated.
       $("#stocktable").removeClass("hidden");
      }
    });
  });
</script>

Pour exemple:

Mon datatable sautait entre les messages à cause du filtre sur le dessus.

Solution Simple: Masquer la table avec display:none, puis utiliser jquery .fadeIn () avant DataTable () est appelé.