[New] Defer initial loading of data tables

This commit is contained in:
Robert von Burg 2016-04-06 17:43:05 +02:00
parent 2a0d7c93ab
commit 6162cb148f
3 changed files with 13 additions and 7 deletions

View File

@ -298,6 +298,7 @@ strolch.fn.initDataTable = function (queryData, columns) {
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'All']],
processing: true,
searching: false,
deferLoading: 0,
serverSide: true,
ajax: function (data, callback, settings) {

View File

@ -22,12 +22,15 @@ strolch.parts.model.init = function (domParent) {
strolch.parts.model.registerHandlers = function () {
$('#part-model').find('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var tableSel = $(e.target).attr('href');
$(tableSel).find('table').DataTable().draw();
});
console.log('Registered handlers');
};
strolch.parts.model.show = function () {
$('#part-model').show();
};

View File

@ -4,14 +4,15 @@
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#resources" role="tab">Resources</a>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#model-resourcesTab" role="tab">Resources</a>
</li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#model-ordersTab" role="tab">Orders</a>
</li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#orders" role="tab">Orders</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="resources" role="tabpanel">
<div class="tab-pane" id="model-resourcesTab" role="tabpanel">
<div class="row">
<div class="col-sm-12">
<form>
@ -26,7 +27,8 @@
</div>
<div class="row">
<div class="col-sm-12">
<table id="modelResourceTable" class="table table-striped table-bordered hover" cellspacing="0"
<table id="modelResourceTable" class="table table-striped table-bordered hover"
cellspacing="0"
width="100%">
<caption>The resources for the current user's realm</caption>
@ -35,7 +37,7 @@
</div>
</div>
</div>
<div class="tab-pane" id="orders" role="tabpanel">
<div class="tab-pane" id="model-ordersTab" role="tabpanel">
<div class="row">
<table id="modelOrderTable" class="table table-striped">