Datatable column width not set when revisit the page
Datatable column width not set when revisit the page
vjsam
Posts: 10Questions: 2Answers: 0
hi,
I have the below datatable
this.repPartGridSettings = {
dataSource: this.partDetail.RepairPartsList,
sScrollY: "380px",
bPaginate: false,
rowTemplate: 'repPartGrid',
columns: [
//{ 'name': 'IsSelected' },
{ 'name': 'WReturn' },
{ 'name': 'Callout' },
{ 'name': 'MaterialNumber' },
{ 'name': 'Quantity' },
{ 'name': 'Description', 'sWidth': '20%' },
{ 'name': 'ValidFrom' },
{ 'name': 'ValidTo' },
{ 'name': 'StockItem' },
{ 'name': 'Section' },
{ 'name': 'WiringDiagram' }
]
};
<div id="divrepairPartGrid" class="col-md-12">
<table id="repairPartGrid" class="display" style="min-width: 100%" data-bind="dataTable: repPartGridSettings">
<thead>
<tr>
@*<th class="hide">
</th>*@
<th>
Warranty Return
</th>
<th>
Callout
</th>
<th>
Part #
</th>
<th>
Qty
</th>
<th>
Description
</th>
<th>
Download
</th>
<th>
Valid From
</th>
<th>
Valid To
</th>
<th id="ShowHeaderSection" data-bind="visible: $root.ShowSection">
Section
</th>
<th>
Stock Item
</th>
</tr>
</thead>
</table>
</div>
The grid column width are setting fine on the intial grid load when i come back to the page using the back button , the width of the datatable column are zero. When i press the developer tools f12 it gets the width correctly. Not sure how to fix it. I have used the below code after the datatable load to repaint the column width, but it didnt work. Any help is appreciated.
function resizeDataTable(dataTableid) {
$("#" + dataTableid).removeClass('kiketable-colsizable'); // Remove kike column class
var oTable = $("#" + dataTableid).dataTable();
$(oTable).css({ width: $(oTable).parent().width() }); // Perform datatable functions
$("#" + dataTableid).addClass('kiketable-colsizable'); // Add kike column class
oTable.fnAdjustColumnSizing();
// $(oTable).css({ width: $(oTable).parent().width() });
}
self.partService.getRepairParts(partNumber, sectionCallOut).then(function (responseMessage) {
if (responseMessage.Data != null || responseMessage.Data != undefined) {
if (sectionCallOut != 'TL' || responseMessage.Data.Drawing == null)
ko.mapping.fromJS(responseMessage.Data.PartsList, {}, self.partDetail.RepairPartsList);
resizeDataTable("repairPartGrid");
Thanks
vjsam
This discussion has been closed.
Replies
Maybe
columns.adjust()will resize your table when you go back to the page.Kevin
Thanks for your reply . The columns didnt exist when i tried the below line
var oTable = $("#" + dataTableid).dataTable();
oTable.columns.bAutoWidth = false;
What version of Datatables are you using?
If 1.10.x then you will probably want to use the newer form of the parameter names. This page has the 1.9 to 1.10 naming convention mapping.
https://datatables.net/upgrade/1.10-convert
Also you will want to read this section. You will want to use
var oTable = $("#" + dataTableid).DataTable();with 1.10.https://datatables.net/manual/installation#Initialising-DataTables
You can't set the parameters this way. They need to be set when you initialize the Datatable. Also
autoWidthis typically not used and probably won't help your situation.I'm unclear if you are still having issues.
Kevin
hi Kevin,
Am using the datatable version 1.10.0-beta.3.dev .
Still am not able to get the column width assigned to the header. Is there a way to trigger the sort functionallity after the rows got assigned to datatable since when i sort the table header width are getting assigned correctly.
Tried the below code to trigger the sorting but the sorting didnt got triggered.
var oTable = $("#" + dataTableid).DataTable();
$('#warranty').click();
oTable.on('click', 'th', function () {
var info = oTable.fnSettings().aaSorting;
var idx = info[0][0];
alert(idx);
});
I have atatched the two screenshot of the grid with the one with header width not calculated and the second one the grid header aligns itself the column width on clicking the header column for sorting.
Thanks
vj
Are you able to provide a link to the page with the issue or build a test case showing the issue?
Kevin
Its an intranet application .Thats the problem. Am not sure how can i give out a test case with the working example. The problem occurs when i click the browser back button and comes back to the same page where grid displays the data. basically am hitting the service again and rebuild the grid again.
Thanks
Vj
Maybe I missed it but did you try
columns.adjust()?Kevin
You very certainly want to update. 1.10.15 is the current release and has evolved a lot since the 1.10 betas.
Allan
Kevin & Allan,
Tried table.columns.adjust().draw(); but it didn't work . Downloaded the 1.10.15 version but it throws script error when i included that in the project. The script error are from the below file when i tried using 1.10.15 version of jquery.dataTables.js file.
/**
* A KnockoutJs binding handler for the html tables javascript library DataTables.
*
* File: knockout.bindings.dataTables.js
* Author: Lucas Martin
* License: Creative Commons Attribution 3.0 Unported License. http://creativecommons.org/licenses/by/3.0/
*
* Copyright 2011, All Rights Reserved, Cognitive Shift http://www.cogshift.com
*
* For more information about KnockoutJs or DataTables, see http://www.knockoutjs.com and http://www.datatables.com for details.
*/
Kevin & Allan,
The issue got fixed.I have to set the selectedtab to make the datatable header work. Finally it works
Thanks for all your help