I have implemented a jquery datatable and noticed that there is a slow rendering issue when adding toolbar items to the top of the table container.
I attempted to improve the performance by using jQuery to append the items during the preInit event. However, this method did not significantly impact the render speed:
$("#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);
});
The table itself loads relatively quickly but the process of adding toolbar items remains sluggish.
Question:
How can I address the slow rendering issue when appending items to the datatable container?
Below is the markup for the datatable and the associated jQuery for appending toolbar items:
<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>