Misalignments in columns while paginating forward

Madhu12

I have misalignment between columns (having actual data) and columns header when paginate forward for the first time.

That is if I have 4 pages when I click 2, 3 4 I am having misalignment. But when I click the same pages again backwards (4, 3, 2, 1) this misalignment goes off. After I paginate backward once, paginating forward also works fine without misalignment.

Any clue what the issue is?

I initially had this misalignment on load of the table. I used oTable.fnDraw() with fnInitComplete which fixed the issue. How can I detect the paginate event so that I can do oTable.fnDraw() when a new page is clicked (I understand that this might have a slight impact of performance).

I am using DataTables 1.9.4

Thanks!

Madhu12

Is it possible to invoke some action while paginating?

Madhu12

Any help on this will be great!
Thanks!

Madhu12

I have added a test case here
http://live.datatables.net/ehobax/6/edit

Thanks for your time!
Madhu

allan

The test case doesn't actually do anything? Javascript errors?

One thing from the source, if you are going to hide columns, use bVisible rather than setting the width to 1px.

Madhu12

I am hiding each hidden column using a statement like below.
[code]$('td:nth-child(6),th:nth-child(6)').hide();[/code]

This is done using a function call from inside 'fnDrawCallback'.

Now I have set "sWidth" as null for hidden columns and have retained the above method of hiding. I was using bVisible earlier I think I removed it because of issues I had in accessing values of the hidden columns. Not sure though.

To my understanding the misalignment will be solved if I invoke oTable.fnDraw() after a new page is clicked. Is there a way to find when a pagination button is clicked so that I can call fnDraw() after this event is complete.

Thanks for your time!
Madhu

Madhu12

Sorry I did not realise that I need to put 10's of records in the test to make the pagination possible. I will could do it now as I am in an urgent situation.

To simply what I have mentioned in the very first post of this thread - when a page is viewed for the first time the columns header are not aligned with the rest of the rows. When the same page is viewed again the columns header are aligned properly - and this is no issues from second time onwards.

I am wondering what is that missed to invoke on the first visit.

allan

> $('td:nth-child(6),th:nth-child(6)').hide();

Use bVisible or fnSetColumnVis rather than using CSS to hide the columns, as I say.

> To simply what I have mentioned in the very first post of this thread - when a page is viewed for the first time the columns header are not aligned with the rest of the rows.

Is the table hidden when it is initialised? If so, that's the problem. Use fnAdjustColumnSizing to realign the table when it is made visible.

Allan

Madhu12

Thanks a lot Allan! Using CSS to hide the columns was the reason for this issue. Instead using bVisible property fixed the issue.

Since using bVisible made the hidden columns unavailable in the page's HTML, I made use of fnGetTds plugin to get the hidden column values.

I have given my code for accessing hidden column values for anyone who is new to fnGetTds.

I have check box in one of my columns - and - I am selecting all the checked rows.

[code]
$('#data-table-id tbody tr:has(:checked)').each( function () {
row = oTable.fnGetTds(this);
$($.parseHTML(row[n].innerHTML)).eq(0).text() // where 'n' is the column number
});
[/code]