Datatable initialization issue with partial view inside bootstrap nav-tabs

mayurib25

Hello,

I am using jquery DataTable styles for tables in my .Net MVC application. its working fine in a normal page. It applies all styles like pagination, sort icons, search box etc. but it is giving issue in a popup. When I am trying to apply the same style for tables inside partial view loaded inside bootstrap tabs it doesn;t work.. or sometimes it applies the style but next time it gets disappeared.
I have four tabs(bootstrap tabs) in my MVC view and each tab loads a different partial view to display list of items in tabular format. I am reinitializing the tables as DAtatable in all the tabs/partial views on Tab change event but its not working. When it loads the partial view on the selected tab, table does not show pagination, sort and search features. this is making the user difficult to sort the table or search any item. I also tried adding the initialization code in tab bs-shown event and partial view bs-shown event but nothing is worked. However it works for the first/default visible tab as it gets loaded on main view load. But when I switch tabs it doesn't work.

Please suggest how to fix it? how can I handle it. I want the DataTable inside partial view to be initialized every time on tab change

Thanks in advance

kthorngren

Are you getting errors in the browser's console? This is normally the issue if the Datatables functionality isn't working.

Please post a link to your page or a test case replicating the issue so we can take a look to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mayurib25

This is my tabs code

<

div id="tabs" class="non-printable">

• New
• Picking
• Issued

New List

Received Orders

Issued Orders

And I am loading the list through partial view inside a div in respective tabs ex: dvNewOrders will get _NewOrders partial view rendered when New tab(tab1) is selected.
It is rendering the partial view properly with data but it is not initializing datatable in tabs when switched. Only it loadsit properly on page load when default tab is visible

Please suggest.

Thanks

colin

As Kevin said, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin