bootstrap tabs with one ajax populated table+editor per tab

advania

So I am messing around a little with tabs, trying to figure out a way to only load ajax when tab is active and get rid of data from non-active tabs.. obviously with support for the #href tags in url and some default view that loads directly.

This code works, but it loads all hidden tabs data.. and the code seems a bit redundant .. it's a hack from various locations with limited understanding of js.

I tried some serverside approaches including the limited caching.. but all i really want is to load all data for the table on the active tab.. and defer any other data. any help appreciated!

My JS:

`$(document).ready(function() {

$('#myTab a').click(function(e) {
      e.preventDefault();
        $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
      var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

//
// MVP VRFS - start

editor_vrfs = new $.fn.dataTable.Editor( {
    ajax: "backend_editor_vrfs.php",
    table: "#mvp_editor_vrfs",
    fields:
    [
        { label: "Description:", name: "Description" },
        { label: "VRF:", name: "VRF" },
        { label: "Customer_ID:", name: "Customer_ID" },
        { label: "VRF_ID:", name: "VRF_ID"  },
        { label: "Config_by:", name: "Config_by" },
        { label: "Date:", name: "Date", type: "datetime" },
        { label: "Additional_info:", name: "Additional_info" }
    ]
} );

var mvp_vrfs = $('#mvp_editor_vrfs').DataTable( {
    sDom: '<"#top-background" <"#top-left"f>B<"#top-center"><"#top-right"> <"clear"> ><"#middle"t><"#bottom-background" <"#bottom-right"p><"#bottom-left"l><"#bottom-center"i> <"clear">>',
    ajax: "backend_editor_vrfs.php",
    buttons:
    [
        { extend: "create", editor: editor_vrfs, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-plus\"></i> Create" },
        { extend: "edit", editor: editor_vrfs, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-pencil\"></i> Edit" },
        { extend: "remove", editor: editor_vrfs, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-trash\"></i> Delete" }
    ],
    columns:
    [
        { data: "Description" }, { data: "VRF" }, { data: "Customer_ID" }, { data: "VRF_ID" }, { data: "Config_by" }, { data: "Date" }, { data: "Additional_info" }
    ]
} );

$('#mvp_editor_vrfs').on( 'dblclick', 'tbody td', function (e) {
    editor_vrfs.inline( mvp_vrfs.cell(this).index(), { buttons: { label: '&gt;', fn: function () { this.submit(); } } } );
} );

// MVP VRFS - end
//
//
// MVP LEVELS - start

editor_levels = new $.fn.dataTable.Editor( {
    ajax: "backend_editor_levels.php",
    table: "#mvp_editor_levels",
    fields:
    [
        { label: "VRF_name:", name: "VRF_name" },
        { label: "Level:", name: "Level" }
    ]
} );

var mvp_levels = $('#mvp_editor_levels').DataTable( {
    sDom: '<"#top-background" <"#top-left"f>B<"#top-center"><"#top-right"> <"clear"> ><"#middle"t><"#bottom-background" <"#bottom-right"p><"#bottom-left"l><"#bottom-center"i> <"clear">>',
    ajax: "backend_editor_levels.php",
    columns: [
        { data: "VRF_name" }, { data: "Level" }
    ],
    oLanguage: {
        sSearch: '_INPUT_', sSearchPlaceholder: 'Enter search here..'
    },
    buttons: [
        { extend: "create", editor: editor_levels, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-plus\"></i> Create" },
        { extend: "edit", editor: editor_levels, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-pencil\"></i> Edit" },
        { extend: "remove", editor: editor_levels, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-trash\"></i> Delete" }
    ]
} );

$('#mvp_editor_levels').on( 'dblclick', 'tbody td', function (e) {
    editor_levels.inline( mvp_levels.cell(this).index(), { buttons: { label: '&gt;', fn: function () { this.submit(); } } } );
} );

// MVP LEVELS - end
//
`

ps. if anyone knows why sDom won't work via " $.extend( true, $.fn.dataTable.defaults, {" I'd love to know..