执行ajax调用时丢失mCustomScrollbar效果

时间:2015-09-17 15:13:18

标签: javascript jquery html ajax mcustomscrollbar

我使用mCustomScrollbar替换div标签中的默认滚动条,其中包含我使用javascript绘制的表格以帮助我在执行ajax调用时重新加载它,这是我的HTML代码:

<!-- the div that will contain the table-->
<div id="countriesTable" class="customScroll" data-mcs-theme="dark">
</div>

这是函数的代码,用于加载表中的数据并将其绘制在div

function reloadTable(data, id) {
        var str = '<table class="table"><thead>' +                    
                '<tr><th> Column1 </th>' +
                '<th> Column2 </th>' +
                '<th> Column3 </th>' +
                '<th> Column4 </th></tr></thead><tbody>';
        for (var property in data) {
            if (data.hasOwnProperty(property)) {                    
                str += '<tr>'
                str += '<td>' + data[property][0] + '</td>' +
                '<td>' + data[property][1] + '</td>' +
                '<td>' + data[property][2] + '</td>' +
                '<td>' + data[property][3] + '</td></tr>';
            }
        }
        str += '</tbody></table>';
        $(id).html(str);
    }

当然,函数调用加载数据以及应用自定义滚动条效果的函数:

reloadTable(myData, '#countriesTable');
$(".customScroll").mCustomScrollbar();

当页面加载时,div成功获取自定义滚动条,但是当我执行ajax调用以将数据重新加载到我的表中时,我再次使用reloadTable函数绘制它时会丢失滚动条效果。 我试图回忆起ajax成功函数中的mCustomScrollbar但是徒劳无功。

1 个答案:

答案 0 :(得分:2)

我认为您需要删除当前的mCustomScrollbar:

$('.customScroll').mCustomScrollbar("destroy")
$('#countriesTable').html("")
reloadTable(myData, '#countriesTable');
$(".customScroll").mCustomScrollbar();