ScrollX and width of headers problem
ScrollX and width of headers problem
jvcunha
Posts: 81Questions: 10Answers: 1
in creating the datatable when scrolly use the column headers have different column widths. Everything is messy.
if you click any column to change the order, it fixes the headers.
example: http://i.stack.imgur.com/2kwqP.png
var table = $ ( '[id $ = myTable]'). DataTable ({
sDom: '< "H" LTFR> t < "F" ip>',
order: [[1, 'desc']],
lengthMenu [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
pagingType 'full_numbers'
displayLength 5,
searchHighlight: true,
jQueryUI: true,
bDeferRender: true,
ajax: msg.d // JSON file
bDestroy: true,
bAutoWidth: false,
sScrollX: true,
sScrollXInner: "110%"
columnDefs: [
{Targets: 2, type: 'date'},
{Targets: 41, Sclass "right"},
{Targets: 42, Sclass "right"},
{Targets: 43, Sclass "right"},
{Targets: 44, Sclass "right"},
{Targets: 45, Sclass "right"},
{Targets: 46, Sclass "right"},
{Targets: 47, Sclass "right"},
{Targets: 48, Sclass "right"},
{Targets: 49, Sclass "right"},
{Targets: 50, Sclass "right"},
{Targets: 51, Sclass "right"},
{Targets: 52, Sclass "right"},
{Targets: 53, Sclass "right"},
{Targets: 54, Sclass "right"},
{Targets: 55, Sclass "right"},
{Targets: 56, Sclass "right"},
{Targets: 57, Sclass "right"},
{Targets: 58, Sclass "right"},
{Targets: 59, Sclass "right"},
{Targets: 60, Sclass "right"},
{Targets: 61, Sclass "right"},
{Targets: 62, Sclass "right"},
{Targets: 63, Sclass "right"},
{Targets: 65, Sclass "right"},
{Targets: 66, Sclass "right"},
{Targets: 78, Sclass "right"},
{Targets: 79, Sclass "right"},
{Targets: 80, Sclass "right"},
{Targets: 81, Sclass "right"},
{Targets: 82, Sclass "right"},
{Type: 'date' targets: 84, mRender: function (data) {return formatDate (data); }}
{Targets: 88 Sclass "right"},
{Targets: 89 Sclass "right"}
]
language: dataTableLanguagePTBR,
tableTools: {
sSwfPath '/copy_csv_xls_pdf.swf'
aButtons: [
{
sExtends: "xls"
sButtonText: "Excel"
sFileName: "Control.xls"
sToolTip: "Save data in Excel spreadsheet"
}
]
destroy: true
}
});
This discussion has been closed.
Replies
You need to use the
columns.adjust()method to address this. There is an example available for use with Bootstrap tabs. If you aren't using Bootstrap tabs, you need to update the code to use whatever method you are using to show the tables.Without a link to a test case showing that, or even the code for it, it is impossible to say exactly how it should be fixed.
Allan
Hi Allan, thank you for return but unfortunately it did not work. I use the scroll X and datatable is not within bootstrap tabs.
In addition the width of the headers become smaller than the data columns when roll to the right, the front header at times and only the dice are rolled
I would need a link to a page showing the issue to be able to offer any help.
Allan
Hi Allan, I am sending the link in private
Thanks for the link.
When the table is visible open your browser's console and enter:
You will be able to see that the columns are correctly sized to fit.
I don't actually see where you are calling
columns.adjust()at all on that page, but you need to call that method when the table is visible in the DOM. Calling it before it is visible will not work.Allan
Thanks Allan, resolved!
I had put in InitComplete table.columns.adjust (), so no success, therefore had taken.
I placed as indicated and now resolved.
Thank you for help and once again, congratulations
Good to hear - thanks for posting back.
Allan