dynamic ajax + bootstrap3 tabs [working example]

advania

Hi guys,

This is a working example using tabbed bootstrap3 with datatables editor. It loads a hardcoded ('vrfs') default tab if no hashtag (from the a.href on the tabs) is detected in URL. It won't init ajax calls unless tab is active and it won't recall ajax call unless you refresh.

So if you open only one tab of 10, you only load ajax for that tab.. and as you keep clicking you load each tab one-by-one.. this is tested with two tabs in chrome. Create/Edit and Delete works fine on the tables.

Additional support is mark.js (to highlight searches) and double-click to inline edit boxes tied to .inline as recommended by Allan and others.

Most of this code is copied from others so thought it only right to share the final product.

Enjoy.

<script type="text/javascript">

    $.extend( true, $.fn.dataTable.defaults, {
        mark:true,
        autoWidth: false,
        lengthChange: true,
        oLanguage: {
            sSearch: '_INPUT_',
            sSearchPlaceholder: 'Enter search here..'
        },
        select: true,
        "lengthMenu": [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
        "pageLength": 25
    });

    function init_table(active_tab,tabdata) {
        var editor_table = new $.fn.dataTable.Editor( {
            ajax: "backend_editor_"+active_tab+".php",
            table: "#mvp_editor_"+active_tab,
            fields: tabdata['fields_'+active_tab]
        } );

        var mvp_table = $('#mvp_editor_'+active_tab).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_'+active_tab+'.php',
            columns: tabdata['columns_'+active_tab],
            oLanguage: {
                sSearch: '_INPUT_', sSearchPlaceholder: 'Enter search here..'
            },
            buttons: [
                { extend: "create", editor: editor_table, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-plus\"></i> Create" },
                { extend: "edit", editor: editor_table, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-pencil\"></i> Edit" },
                { extend: "remove", editor: editor_table, className: "btn btn-default btn-sm ", text: "<i class=\"icon glyphicon glyphicon-trash\"></i> Delete" }
            ]
        } );
        // Action double click to edit on tables, targets the data tables variable.
        $('#mvp_editor_'+active_tab).on( 'dblclick', 'tbody td', function (e) {
            editor_table.inline( mvp_table.cell(this).index(), { buttons: { label: '&gt;', fn: function () { this.submit(); } } } );
        } );
    }

  $(document).ready(function() {

    var tabdata =  {
        "fields_vrfs": [
            { 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" }
        ],
        "columns_vrfs": [
            { data: "Description" },{ data: "VRF" },{ data: "Customer_ID" },{ data: "VRF_ID" },{ data: "Config_by" },{ data: "Date" },
            { data: "Additional_info" }
        ],
        "fields_levels": [
            { label: "VRF_name:", name: "VRF_name" },{ label: "Level:", name: "Level" }
        ],
        "columns_levels": [
            { data: "VRF_name" },{ data: "Level" },
        ]
    };

    // If tab is clicked, show the tab, init the datatable and hide rest.
    $('#mvpTab a').click(function(e) {
        e.preventDefault(); $(this).tab('show');
        var active_tab = $(this).attr("href").substr(1);
        if ( ! $.fn.DataTable.isDataTable( '#mvp_editor_'+active_tab ) ) {
            init_table(active_tab,tabdata);
        }
    });

    // 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 active_tab = window.location.hash.substr(1);
    // If no hash is set in url, set default to vrfs tab.
    if(active_tab==""){ var active_tab = "vrfs"}
    // Show the active tab.
    $('#mvpTab a[href="#' + active_tab + '"]').tab('show');
    // Init the active table on load.
    init_table(active_tab,tabdata);

  });

    </script>

I would love to get some example on 'audit logging' for the editor, i saw some ideas/examples but no-one seems to have shared a working example.

advania

Here is the HTML.

 <div class="well well-lg">
                  <ul class="nav nav-tabs"  id="mvpTab" style="padding-bottom:1px;margin-top:0px;">
                        <li class="active"><a href="#vrfs" data-toggle="tab" role="tab">VRFs</a></li>
                        <li class=""><a href="#levels" data-toggle="tab" role="tab">Levels</a></li>
                    </ul>

                    <div class="tab-content">
                        <div id="vrfs" class="tab-pane fade in active" role="tabpanel">
                            <table id="mvp_editor_vrfs" class="table dt-responsive" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>Description</th>
                                        <th>VRF</th>
                                        <th>Customer_ID</th>
                                        <th>VRF_ID</th>
                                        <th>Config_by</th>
                                        <th>Date</th>
                                        <th>Additional_info</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div id="levels" class="tab-pane fade in" role="tabpanel">
                            <table id="mvp_editor_levels" class="table dt-responsive" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>VRF_name</th>
                                        <th>Level</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
              </div>
          
            </div>