Issue with Responsive DataTables And Bootstrap Tabs

Question

I want to use Datatables and Responsive extension inside Bootstrap Tabs. I have this working separately.

$(document).ready(function() {
    $(\'#example\').D         


        

Answer 1

I tried the answers above but none worked. I was using JQuery Steps Wizard as tabs. I had to use $('#datatable').css("width", '100%') as well for it to work.

wizard.steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            enableFinishButton: false,
            enablePagination: false,
            enableAllSteps: true,
            titleTemplate: "#title#",
            cssClass: "tabcontrol",
            onStepChanged: function (event, currentIndex, priorIndex) {

                if (currentIndex == 2) {
                    $('#datatable').css("width", '100%')
                    $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
                }
            }
        })

My Datatable is on the 3rd tab hence the check on the currentIndex.