Unable to reaload datatable

tristevenpinto123

if you see above i have 4 tabs Z , A , C , L
when i click on the tab a ajax call is made on the datatable using the below code

tblMain12.columns.adjust().draw(false);

and the above issue happens can some one please help

kthorngren

This example shows how to use columns.adjust() with Bootstrap tabs. If this doesn't help then please provide a link to your page or a test case replicating the issue. This way we can see what you are doing so we can offer suggestions.
https://datatables.net/manual/tech-notes/10

Kevin

tristevenpinto123

@kthorngren
Hi thanks for the quick response

every time i click the tab a ajax call is made apart from that i am trying to show and hide columns based on condition which causes the header and footer to re-calculate all these things are happening at the time of tab click

tblMain12.columns([2, 3, 4]).visible(!chkactual, !chkactual);
tblMain12.columns.adjust().draw(false);

kthorngren

Ok. Please post a running test case so we can see what you are doing. 2 lines of code is not enough to understand and help.

Kevin

tristevenpinto123

@kthorngren

Thanks a lot below is the code that i have written but when i move from one tab to another some times all the header are aligned as shown in the image when i move fast from one tab to another the issue shown in image occurs

https://jsfiddle.net/tristevenpinto/6ht0ofe3/70/

kthorngren

Looks like you are using the default datatables.js and datatables.css styling files. You should include the Datatatbles Bootstrap 3 styling files to match the Bootstrap 3 framework you are using. More info here. You can use the download builder to get the proper datatables and fixedColumns files. This should fix the alignment issue.

Kevin

tristevenpinto123

@kthorngren
thanks a lot for the response
sorry a little bit of change in the code

https://jsfiddle.net/tristevenpinto/6ht0ofe3/71/

this is what is happening

kthorngren

What did you change?

Doesn't look like you changed the. JS and CSS files like I suggested.

Kevin

tristevenpinto123

@kthorngren
Sorry made the change but still the issue

https://jsfiddle.net/tristevenpinto/6ht0ofe3/73/

if you click on hide A and move from one tab to another the problem is visible

tristevenpinto123

kthorngren

You don't have all the correct files. You didn't get the fixedheader styling files for BS3 and left the datatables.css which needs to be removed.. I updated your test case with both the datatables and fixecolumns files from the download builder.
https://jsfiddle.net/b5jo0w62/

Additionally I updated the table tag with the Bootstrap styling classes as shown in this example.

Lastly you are calling ShowHide() too quickly. It needs to be called after getting the Ajax response. Ajax is an async process so you need to wait until its complete before manipulating column visibility and using columns.adjust()1. Use hhe-event xhrevent to callShowHide()`. I updated the Menu2 and Menu 3 tabs with this. Looks like these two tabs are now working properly. You will need to do the same to the other tabs.

Kevin

tristevenpinto123

@kthorngren Thanks a lot
i have done the above changes but i observed one thing it seems it is going in a loop since the draw makes a ajax call which in turn again calls xhr.dt which in turn calls the showhide()

kthorngren

Yes, you are right. You have serverside processing enabled. Are you really in need of using server side processing? The responses you are getting in the example don't follow the SSP protocol described here. Maybe its just in the example.

In any case the init event is a better choice.

https://jsfiddle.net/5uethmpn/

You will notice in this example I used a setTimeout for Menu 2 but not Menu 3. Menu 2 works where 3 doesn't.

Then I remembered the example I initially posted. The best option is to the shown.bs.tab event shown in the example:
https://jsfiddle.net/hqo3nLec/

I believe that is the only place ShowHide() is now called in the example. May not have removed all instances though

Kevin

tristevenpinto123

@kthorngren Thanks a lot Kevin the second example worked like a charm .
Really appreciate it

tristevenpinto123

@kthorngren i am facing one issue in the above code except for the first tab the ajax call i made twice on click of tab

kthorngren

Thats due to tbl1.columns.adjust().draw(false); using draw() which is fetching the data from the server.

Kevin

tristevenpinto123

@kthorngren so how can i stop ajax call when i am trying to initialize datatable

kthorngren

See if deferLoading will do what you want.

Kevin

tristevenpinto123

@kthorngren well deferloading wont work for me but is there a way i can stop ajax call at the time i am trying to create the datatable

kthorngren

deferloading wont work for me but is there a way i can stop ajax call at the time i am trying to create the datatable

That is what deferLoading does. See this example:
http://live.datatables.net/litigoco/1/edit

So in your case when tbl1.columns.adjust().draw(false) is executed then it will cause the initial ajax load to take place the first time the tab is open.

Kevin

tristevenpinto123

@kthorngren thanks for the reply Kevin

Jus one more question when i am trying to have the first column as fixed it is still making 2 calls even after using deferloading

kthorngren

I guess that FixedColumns causes a table draw to take place. Does the extra Ajax call cause problems for you? Unless there is some issue I wouldn't worry about it.

Kevin

tristevenpinto123

yes it take a lot of load time