I am using version 1.10.7 of DataTables.
I have five data tables on a single web page that are independent. They all pull from fixed AJAX sources.
I have the data loading great. But there ends up being a "calculated" margin that makes the data columns not line up with the header columns.
One table ends up perfect. The others end up with left/right margins of: 26, 19.5, 13, and 6.5.
All five data tables are setup in functions which are called in the $(document).ready section.
All look very close to the following(no columns in code stub below)
function SetUpMyInvDataTable() {
var oTable = $('#MyInvDT').DataTable({
"serverSide": true,
"ajax": {
"type": "POST",
"url": '/Inv/MyDT',
"contentType": 'application/json; charset=utf-8',
'data': function (data) {
return data = JSON.stringify(data);
}
},
// "dom": 'frtiS',
"dom": 'C<"clear">lfrtip', //this display adds entries at top, allows show/hide columns at end
"scrollY": 500,
"scrollX": true,
"scrollCollapse": true,
"scroller": {
loadingIndicator: false
},
"processing": true,
"paging": true,
"deferRender": true,
"order": [0, "asc"],
"language": {
"emptyTable": "No Inventory To Display"
}, //end langauge
"pagingType": "full_numbers",
"stateSave": false,
"Paginate": true,
"jQueryUI": true
} //end initComplete
});
}// end setup
The four other functions use actionTable1 to 4 instead of oTable. And all have different identifiers than MyInvDT. And the url for each is also different.
Are the table variables like oTable supposed to be global?
Is there a method to squelch the odd width calculation?
The HTML looks like:
<div class="MyAction groupbox">
<h4 class="section_divide">My Items Being Requested</h4>
<div class="MyAction">The following items in your possession are being requested. Please Approve/Deny the requests.</div>
<table id="MyRequestedDT" class="table table-striped display" width="100%">
<thead>
<tr>
<th>Project</th>
<th>Is Part Of Config</th>
<th>Product Code</th>
<th>Serial</th>
<th>Description</th>
<th>Lot</th>
<th>Location</th>
<th>Requested By</th>
<th>More Info</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="MyAction groupbox">
<h4 class="section_divide">Items Being Reassigned To Me</h4>
<div class ="MyAction">The following items are being reassigned to you. Please Accept/Reject the requests.</div>
<table id="ReassignedToMeDT" class="table table-striped display" width="100%">
<thead>
<tr>
<th>Project</th>
<th>Is Part Of Config</th>
<th>Product Code</th>
<th>Serial</th>
<th>Description</th>
<th>Lot</th>
<th>Location</th>
<th>Reassigned By</th>
<th>More Info</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
Did I miss something in my table setup?
This issue is happening in Chrome(55) and Internet Explorer(11) under Windows 10 machine.
I've attached a truncated picture showing a good example of what is happening. In this example, the bottom table is good, the middle table got 6.5 margin, and the top table got 13 margin. But it doesn't always put the same margin to the same table.
