datatables.js不会仅重新加载显示

Question

来自Metronic v5.05主题的Javascript。

我有一个页面，我打印了一个数据表，它显示正常。

我已经使用了用于显示表格的整个javascript代码 但是对我来说重要的是，表格会重新加载新数据，如果有的话。

我想我知道如何在不使用datables.js的情况下构建这个，但这个人 我正在建立这个项目坚持我必须使用它，所以我必须。

我有这段代码可以让它在我的页面上运行。

    //== Class definition
var Dashboard = function() {
//== Hændelser hentes
    var datatableIncidents = function() {
        if ($('#LOGMSGS').length === 0) {
            return;
        }

        var datatable = $('.m_datatable').mDatatable({
 layout: {
        theme: 'default',
        class: 'm-datatable--brand',
        scroll: false,
        height: null,
        footer: false,
        header: true,
        height: 400,
        smoothScroll: {
            scrollbarShown: true
        },

        spinner: {
            overlayColor: '#000000',
            opacity: 0,
            type: 'loader',
            state: 'brand',
            message: true
        },

        icons: {
            sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
            pagination: {
                next: 'la la-angle-right',
                prev: 'la la-angle-left',
                first: 'la la-angle-double-left',
                last: 'la la-angle-double-right',
                more: 'la la-ellipsis-h'
            },
            rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
        }
    },

    sortable: false,

    pagination: true,

    search: {
      // search delay in milliseconds
      delay: 400,
      // input text for search
      input: $('#generalSearch'),
    },
            data: {
                type: 'remote',
                source: {
                    read: {
                        url: 'http://beredskabsweb.dk/Template/alert-log-json.php'
                    }
                },
                pageSize: 20,
                saveState: {
                    cookie: true,
                    webstorage: true
                },
            },

            layout: {
                theme: 'default',
                class: '',
                scroll: false,
                footer: false
            },

            sortable: true,

            filterable: true,

            pagination: true,

            columns: [
            {
                field: "alertMessageTime",
                title: "Tid",
                width: 100,
                filterable: true,
                template: function(row) {
                    return '<time>'+row.alertMessageTime+'</time>';
                },
            },
            {
                field: "alertMessageText",
                title: "Text",
                filterable: true,
                template: function(row) {
                    return row.alertMessageText;
                },
            },
            {
                field: "alertMessageAuthor",
                title: "Forfatter",
                 width: 240,
                filterable: true,
                template: function(row) {
                    return '<a href="member.php?id='+row.alertMessageAuthor+'">'+row.MemberUsername+'</a>';
                },
            },
            ]
        });
    }


    return {
        //== Init demos
        init: function() {

            // datatables
            datatableIncidents();
            setInterval( function () { datatableIncidents();},4000);
        }
    };
}();

//== Class initialization on page load
jQuery(document).ready(function() {
    Dashboard.init();
    setInterval(Dashboard,2000);
});

如你所见，我试图将此代码放在底部以便重新加载，但事实并非如此。

setInterval(Dashboard,2000)

Answer 1

你可以使用metronic的reload api。你可以在这里看到文档

http://keenthemes.com/metronic/documentation.html#sec14-5

首先，您应该从类中导出数据表变量，以便将其用于其他用途，例如添加函数以重新加载表格等。我在下面添加了一行：

    return {
        datatable: function() {
            return datatable;
        }
    };

之后，您还应该创建函数，通过我们之前导出的变量重新加载表，并使用metronic的reload api。

    reload: function {
        demo().datatable().reload();
    }

完整代码：

    //== Class definition
var Dashboard = function() {
//== Hændelser hentes
    var datatableIncidents = function() {
        if ($('#LOGMSGS').length === 0) {
            return;
        }

        var datatable = $('.m_datatable').mDatatable({
 layout: {
        theme: 'default',
        class: 'm-datatable--brand',
        scroll: false,
        height: null,
        footer: false,
        header: true,
        height: 400,
        smoothScroll: {
            scrollbarShown: true
        },

        spinner: {
            overlayColor: '#000000',
            opacity: 0,
            type: 'loader',
            state: 'brand',
            message: true
        },

        icons: {
            sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
            pagination: {
                next: 'la la-angle-right',
                prev: 'la la-angle-left',
                first: 'la la-angle-double-left',
                last: 'la la-angle-double-right',
                more: 'la la-ellipsis-h'
            },
            rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
        }
    },

    sortable: false,

    pagination: true,

    search: {
      // search delay in milliseconds
      delay: 400,
      // input text for search
      input: $('#generalSearch'),
    },
            data: {
                type: 'remote',
                source: {
                    read: {
                        url: 'http://beredskabsweb.dk/Template/alert-log-json.php'
                    }
                },
                pageSize: 20,
                saveState: {
                    cookie: true,
                    webstorage: true
                },
            },

            layout: {
                theme: 'default',
                class: '',
                scroll: false,
                footer: false
            },

            sortable: true,

            filterable: true,

            pagination: true,

            columns: [
            {
                field: "alertMessageTime",
                title: "Tid",
                width: 100,
                filterable: true,
                template: function(row) {
                    return '<time>'+row.alertMessageTime+'</time>';
                },
            },
            {
                field: "alertMessageText",
                title: "Text",
                filterable: true,
                template: function(row) {
                    return row.alertMessageText;
                },
            },
            {
                field: "alertMessageAuthor",
                title: "Forfatter",
                 width: 240,
                filterable: true,
                template: function(row) {
                    return '<a href="member.php?id='+row.alertMessageAuthor+'">'+row.MemberUsername+'</a>';
                },
            },
            ]
        });

        return {
            datatable: function() {
                return datatable;
            }
        };

    }


    return {
        //== Init demos
        init: function() {

            // datatables
            datatableIncidents();
            setInterval( function () { datatableIncidents();},4000);
        },
        reload: function {
            demo().datatable().reload();
        }
    };
}();

//== Class initialization on page load
jQuery(document).ready(function() {
    Dashboard.init();
    setInterval(Dashboard.reload(),2000);
});