基于Bootstrap的标签页表格数据重复加载问题处理

    通过 data 属性启用标签页可以自动切换标签页内容，如果不按照选中的标签页激活状态加载数据，则需要在页面启动时把每个标签页的内容一并加载完成，同时请求多个接口数据会影响页面启动速度；可以通过Javascript来启用标签页，控制加载的数据显示。

如下图所示的页面效果：

效果图

初始加载页面时只加载标签页1的内容，通过js监听标签页的点击事件来加载数据，未切换的标签页不加载数据，同时，如果表格数据已加载，则不再重复请求接口数据，实现方式如下：

$('#myTab a').click(function (e) {

e.preventDefault()

$(this).tab('show');

    var curTab =$(this).attr('href');

    var id = curTab.substr(1);

    if (id =="tab1") {//加载第一个标签页内容

if (gridObj1==null) {

 initGrid1();

}

    }else if (id =="tab2") {

if (gridObj2 ==null) {//未初始化才加载数据

            initGrid2();

        }

}

})

当针对表格查询时，只搜索当前标签页表格数据，不搜索其他标签页的表格，实现方式如下：

function doQuery() {

var searchParames =$("#searchForm").serializeArray();

    if ($('#tab1').hasClass('active')) {//查询标签页1的表格数据

        gridObj1.search(searchParames);

    }else if ($('#tab2').hasClass('active')) {//查询标签页2的表格数据

        gridObj2.search(searchParames);

    }

}