jQuery DataTables – Langsame Initiierung, “normale” HTML-Tabelle wird am Anfang angezeigt

Ich verwende das jQuery DataTable-Plugin, aber ich habe Bedenken, dass das Laden der Skripts einige Zeit zu dauern scheint, sodass meine Webseite immer zuerst die gewöhnliche HTML-Tabelle anzeigt, und nachdem alle Skripts ausgeführt wurden, wird die Tabelle dann zu DataTable. Ich denke nicht, dass diese Art von Aussehen akzeptabel ist, also hoffe ich, hier einige Ratschläge zu bekommen. ob ich die Skripte schneller machen kann oder nicht die einfache Tabelle vorne anzeigen kann? Übrigens rufe ich mein Skript aus einer _Scripts-Teilansicht an meinem _Layout.cshtml-Head-Tag auf

 @Html.Partial("_Scripts") 

(UPDATE) Ich habe versucht, die Tabelle auszublenden und nach der Initialisierung der Datentabelle anzuzeigen, aber ich bekomme eine Datentabelle ohne den Tabellenkopf. Irgendeine Idee, warum das passiert?

$('#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();
        }

Ich habe eine sehr einfache Lösung, die gut funktioniert. Bei der DataTable-Initialisierung habe ich die Methode show() verwendet:

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

… und in der HTML-Tabelle habe ich den Stil display:none eingefügt:

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

Viel Glück!

Ich hatte das gleiche Problem. Versuche dies:

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

[edit to add: This older answer refers to the previous DataTables API. The jQueryUI options are deprecated and recommendations for replacement are found here: https://datatables.net/manual/styling/jqueryui Also, fnInitCallback (as with all other options) dropped Hungarian notation and is now initCallback]

Ursprüngliche Antwort folgt:

Meine Einschränkung ist, dass ich mit _Scripts-Teilansichten nicht vertraut bin. Daher würde ich jemandem folgenden Ratschlag geben, der nur JavaScript auf die “normale” Weise einbezieht und aufruft:

1. Gestalten Sie die einfache HTML-Tabelle so, dass sie dasselbe Erscheinungsbild wie die endgültige aufweist. Wenn Sie die jQuery-Benutzeroberfläche aktiviert haben (bJQueryUI: true), bedeutet dies, dass die jQuery-UI-Klassen in der „einfachen“ Tabelle vorhanden sind, anstatt darauf zu warten, dass DT sie hinzufügt.

2. Verwenden Sie verschiedene FOUC-Techniken (Flash of Unstyled Content), um die Tabelle auszublenden, bis sie zum Rendern bereit ist. Die DataTables-API verfügt über nützliche Rückrufe, die Sie für den Teil “Jetzt anzeigen” verwenden können, z. B. fnInitCallback. Die grundlegendste (aber die Zugänglichkeit beeinträchtigende) Technik besteht darin, die Tabelle mit display:none zu formatieren und im Callback use zu verwenden $('#myTable').show() oder irgendeine Variation. Die Suche im Internet sollte einige großartige Lösungen bieten, die die Zugänglichkeit erhalten.

Ansonsten ist es wirklich nur eine Frage der (wie Sie sagen!) Toleranz für “akzeptabel”. Wir verwenden eine serverseitige Verarbeitung (die weitaus weniger Datensätze zurückgibt), einen Skriptlader für eine schnellere Skriptladezeit (wir experimentieren mit head.js, aber es gibt andere!) und die minimierten Versionen der Skripts. Trotzdem sehen wir manchmal für einen Moment die einfache Tabelle, bevor sie zu einem DT wird, aber da Internetnutzer daran gewöhnt sind, Seiten zu sehen, die vor ihren Augen „gebaut“ werden, während Elemente geladen werden, war dies ein akzeptabler Kompromiss. Für dich vielleicht nicht.

Viel Glück!

Basierend auf dem Vorschlag von @hanzolo – hier ist mein Kommentar als Antwort (und wie meine dataTable aussieht):

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();
      }
  });

Meine Arbeitslösung ist ein “schmutziger” Trick, um die Tabelle zu verstecken, ohne “display:none” zu verwenden. Der normale „display:none“-Stil verursacht Initialisierungsprobleme für jQuery-Datentabellen.

Platzieren Sie zunächst Ihre Datentabelle in einem Wrapper-Div:

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

Im CSS:

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

Diese Lösung blendet die Datentabelle aus, ohne “display:none” zu verwenden.

Nach der Initialisierung der Datentabelle müssen Sie die Klasse aus dem Wrapper entfernen, um die Tabelle anzuzeigen:

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

Ich denke, Sie sollten wahrscheinlich nur Skripte in die _Layout.cshtml laden, schließlich ist es das, wofür es da ist. Teilansichten sind wirklich für Segmente gedacht, die in anderen Bereichen wiederverwendet werden können, oder zumindest für gerenderten HTML-Inhalt.

Abgesehen davon wäre es eine einfache Sache, die Tabelle entweder auszublenden, bis sie fertig geladen ist, oder sie sogar auszublenden und eine Fortschrittsanzeige anzuzeigen.

Du könntest so etwas tun:

// .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();

AKTUALISIEREN:

Wenn das jQuery-Tabellen-Plug-in einen „Erfolg“- oder „Fertig“-Callback hat, blenden Sie einfach die Tabelle beim Laden der Seite aus und zeigen Sie sie an, wenn der Ladevorgang abgeschlossen ist.

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

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

Ich weiß, es ist eine sehr alte Frage, aber vielleicht kann ich in Zukunft jemandem helfen, woher weiß ich … Also finde ich nach vielen Stunden die einzige Lösung, die für mich funktioniert (Tabelle wird geladen, nachdem sie vollständig gerendert wurde):

      <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>