web-dev-qa-db-fra.com

jQuery DataTables - Initiation lente, tableau HTML "normal" affiché au début

J'utilise le plug-in DataTable de jQuery, mais le chargement des scripts semble prendre un certain temps; ma page Web affiche toujours la table html ordinaire en premier et, une fois tous les scripts terminés, la table devient alors DataTable Je ne pense pas que ce genre d'apparence soit acceptable, j'espère donc pouvoir obtenir quelques conseils ici. Est-ce que je peux faire les scripts plus rapidement ou ne pas afficher le tableau brut à l'avance? En fait, j'appelle mon script à partir d'une vue partielle de _Scripts à ma balise head _Layout.cshtml

 @Html.Partial("_Scripts")

(UPDATE) J'ai essayé de cacher la table et de l'afficher après l'initialisation de la datatable. Cependant, je reçois une datatable sans l'en-tête de la table. Une idée pourquoi cela se passe?

$('#stocktable').hide();
// Initialize data table
    var myTable = $('#stocktable').dataTable({

        // Try styling
        "sScrollX": "100%",
        "sScrollXInner": "100%",
        "bScrollCollapse": true,

        // To use themeroller theme
        "bJQueryUI": true,
        // To use TableTool plugin
        "sDom": 'T<"clear">lfrtip',
        // Allow single row to be selected
        "oTableTools": {
            "sRowSelect": "single"
        },
        "fnInitComplete": function () {
            $('#stocktable').show();
        }
jqueryperformancedatatables
25
shennyL

[modifier pour ajouter: cette réponse plus ancienne fait référence à la précédente API DataTables. Les options jQueryUI sont obsolètes et les recommandations de remplacement se trouvent ici: https://datatables.net/manual/styling/jqueryui De plus, fnInitCallback (comme pour toutes les autres options) a perdu la notation hongroise et est maintenant initCallback]

La réponse originale suit:

Mon avertissement est que je ne suis pas familier avec les vues partielles _Scripts. Le conseil ci-dessous est donc ce que je voudrais donner à quelqu'un qui inclut et appelle JavaScript de manière «normale»:

  1. Style de la table HTML ordinaire afin qu'il partage la même apparence que la finale. Si vous avez activé l'interface utilisateur jQuery (bJQueryUI: true), cela signifie que les classes de l'interface utilisateur jQuery sont dans la table 'plaine' plutôt que d'attendre que DT les ajoute.

  2. Utilisez diverses techniques FOUC (flash de contenu non stylé) pour masquer le tableau jusqu'à ce qu'il soit prêt à être affiché. L'API DataTables dispose de rappels utiles que vous pouvez utiliser pour la partie "afficher maintenant", telle que fnInitCallback. La technique la plus élémentaire (mais préjudiciable à l'accessibilité) consiste à attribuer à la table le style suivant: none, et dans le rappel, utilisez $('#myTable').show() ou une variante. La recherche sur Internet devrait fournir d'excellentes solutions préservant l'accessibilité.

Autre que cela, c'est juste une question de tolérance (comme vous dites!) Pour "acceptable". Nous utilisons un traitement côté serveur (renvoyant beaucoup moins d'enregistrements), un chargeur de script pour accélérer le chargement du script (nous expérimentons avec head.js mais il y en a d'autres!) Et les versions réduites des scripts. Même avec cela, nous voyons parfois la table simple un moment avant qu’elle ne devienne un DT, mais étant donné que les utilisateurs d’Internet sont habitués à voir les pages être «construites» sous leurs yeux lorsque des éléments sont chargés, c’était un compromis acceptable. Pour vous, ce n'est peut-être pas le cas.

Bonne chance!

9
Greg Pettit

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

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

... et dans le tableau HTML, j'ai mis le style d'affichage: none:

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

Bonne chance!

30
Alexandre Crivellaro

J'ai eu le même problème. Essaye ça:

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");
        }
10
bmoran

Basé sur la suggestion de @hanzolo - voici mon commentaire sous forme de 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();
      }
  });
5
tamersalama

Ma solution de travail est une astuce "sale" pour masquer le tableau sans utiliser "display: none". Le style "display: none" classique pose un problème d'initialisation pour les tables de données jQuery.

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

<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 du wrapper pour afficher la table:

$('#yourDataTable').DataTable(...);
$('#dataTableWrapper').removeClass('dataTableParentHidden');
2
Sasvári Tamás

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

Cela étant dit, une chose facile à faire serait de cacher le tableau jusqu'à son chargement ou même de le cacher et d'afficher un indicateur de progression. 

Vous pourriez 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 "terminé", masquez simplement la table lors du chargement de la page et affichez-la une fois le chargement terminé.

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

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

Cela est dû au plugin ColVis. supprimez le "W" de la sDOM et le rendu de votre table s'envolera (sans menu déroulant)

0
Ross
  • Voici un exemple de barres de contrôle node.js. Cependant, vous pouvez restituer les données à l'aide de la structure Web frontale que vous utilisez. 
  • Si vous utilisez bootstrap, vous pouvez initialement masquer le tableau à l'aide de la classe masquée ou masquer les éléments manuellement.
  • Ensuite, dans le rappel initComplete, vous pouvez utiliser jQuery pour supprimer la classe masquée afin d'afficher la table uniquement une fois qu'elle est 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>

Par exemple:

0
Ryan

Je sais que la question est très ancienne, mais peut-être que je pourrai aider quelqu'un à l'avenir, comment savoir .... Donc après de nombreuses heures, je trouve la seule solution qui fonctionne pour moi (le tableau sera chargé une fois terminé):

      <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>
0
Leonard Lepadatu