jQuery DataTables - Slow initiation, “Normal” html table shown in the beginning

后端未结

关注

 10  1298

I\'m using jQuery DataTable plugin, but I got a concern where the scripts loading seems to take some time, so my web page is always displaying the ordinary html table first, and

相关标签:

10条回答

北恋

2021-02-03 22:59

My datatable was jumping between posts because of the filter on top.

Simple solution: Hide the table with display:none, then use jquery .fadeIn() before DataTable() is called.

0 讨论(0)
发布评论:

提交评论
- 加载中...

Happy的楠姐

2021-02-03 23:02

I know it's very old question, but maybe I can help someone in future, how know ... So after many hours I find the only solution that work's for me (table it will be loaded after it is rendered complete):

      <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 讨论(0)

离开以前

2021-02-03 23:03
[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]

Original answer follows:

My caveat is that I am not familiar with _Scripts partial views, so the advice below is what I would give someone just including and calling JavaScript in the 'normal' ways:
1. Style the plain HTML table so that it shares the same appearance as the final. If you have jQuery UI enabled (bJQueryUI: true), this means having the jQuery UI classes in the 'plain' table rather than waiting for DT to add them.
2. Use various FOUC (flash of unstyled content) techniques to hide the table until it is ready to render. DataTables API has useful callbacks that you can use for the "show it now" part of things, such as fnInitCallback. The most basic (but accessibility-damaging) technique is to style the table with display:none, and in the callback, use $('#myTable').show() or some variation. Searching on the internet should provide some great solutions that preserve accessibility.
Other than that, it's really just a question of (as you say!) tolerance for "acceptable". We use server-side processing (returning far fewer records), a script loader for faster script loading time (we're experimenting with head.js but there are others!), and the minimized versions of the scripts. Even with this, we sometimes see the plain table for a moment before it becomes a DT, but since internet users are accustomed to seeing pages being 'built' before their eyes as elements are loaded, it was an acceptable tradeoff. For you, it might not be.

Good luck!
0 讨论(0)
发布评论:

提交评论
- 加载中...

Happy的楠姐

2021-02-03 23:03

Based on @hanzolo suggestion - here's my comment as an answer (and what my dataTable looks like):

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

0 讨论(0)

上一页 1 2