jquery - 如何解决附加到容器的缓慢渲染？

Question

我设置了一个 jquery datatable将工具栏项附加到表格容器的顶部时呈现速度较慢。

我尝试的是获取容器的类，然后在 preInit event 期间使用 jQuery 将其附加到该类上.但这似乎不是一种有效的渲染方法:

       $("#escalation").one("preInit.dt", function (evtObj, settings) {

            var $newbtncontainer = $("<div class='dt-buttons'></div>");
            $("#escalation_wrapper").prepend($newbtncontainer);
            $("a.buttons-colvis").appendTo($newbtncontainer);
            $("#tblDateRange").appendTo($newbtncontainer);
        });

我的表格本身加载速度不错，但添加工具栏元素非常慢。

问题:

如何解决附加到数据表容器时渲染缓慢的问题？

这是数据表标记和附加工具栏项的 jQuery:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.24/daterangepicker.min.css" />

            <div class="table-responsive max-width-table" id="datatable-wrapper">
                <style>
                    #escalation tr > *:nth-child(1) {
                        display: none;
                    }
                </style>

                <div class="form-group form-inline pull-left" id="colFilter"></div>

                <div class="form-group form-inline pull-right" id="tblDateRange">
                    <label id="dateRangeLbl" class="date-range-label">
                        <span class="glyphicon glyphicon-calendar"></span>
                        <input class="input-sm top-buffer pull-right date-range-input" id="dateRangeInput" type="text" name="daterange" value="01/01/2016 - 12/25/2016" />
                    </label>
                </div>

                <div class="btn-group pull-right">

                    <button id="scrollXLeft-btn"><span class="glyphicon glyphicon-arrow-left"></span> </button>
                    <button id="scrollXRight-btn"><span class="glyphicon glyphicon-arrow-right"></span> </button>

                </div>



                <table id="escalation" class="table table-striped table-bordered" cellspacing="0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Fruit</th>
                        </tr>
                    </thead>
                    <tbody>
                       <tr>
                          <td>1</td>
                          <td>Apple</td>      
                       </tr>
                    </tbody>
                </table>

    </div>





<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>



<script>


    //Once the Document DOM is ready..
    $(document).ready(function () {

        $("#scrollXRight-btn").click(function () {

            var leftPos = $('div.dataTables_scrollBody').scrollLeft();
            $("div.dataTables_scrollBody").animate({ scrollLeft: leftPos + 800 }, 800);

        });

        $("#scrollXLeft-btn").click(function () {

            var leftPos = $('div.dataTables_scrollBody').scrollLeft();
            $("div.dataTables_scrollBody").animate({ scrollLeft: leftPos - 800 }, 800);

        });


        $("#escalation").one("preInit.dt", function (evtObj, settings) {

            var $newbtncontainer = $("<div class='dt-buttons'></div>");
            $("#escalation_wrapper").prepend($newbtncontainer);
            $("a.buttons-colvis").appendTo($newbtncontainer);
            $("#tblDateRange").appendTo($newbtncontainer);
        });


        var historyTable = $('#escalation').DataTable({
            "order": [[1, "desc"]],
            colReorder: true,
            scrollY: 1000,
            scrollX: "100%",

        });



    });



</script>

Answer 1

  $("#escalation").one("preInit.dt", function (evtObj, settings) {

        var $newbtncontainer = $("<div class='dt-buttons'></div>");
        $("#escalation_wrapper").prepend($newbtncontainer);
        $("a.buttons-colvis").appendTo($newbtncontainer);
        $("#tblDateRange").appendTo($newbtncontainer);
    });($newbtncontainer);

应该是

 $("#escalation").one("preInit.dt", function (evtObj, settings) {


        $("#escalation_wrapper").prepend( "<div class='dt-buttons'></div>"  );
        $("a.buttons-colvis").appendTo("<div class='dt-buttons'></div>");
        $("#tblDateRange").appendTo("<div class='dt-buttons'></div>" );
    });

你这样做的方式是添加额外的处理，因为

 var $newbtncontainer = $("<div class='dt-buttons'></div>");

本身会创建一个完整的 dom 对象，然后将整个 dom 对象附加和添加到其他控件。我也使用 preInt.dt 来附加内容，没有性能问题。