提交表单后如何使用JavaScript / jQuery在DataTable中显示数据

Question

我是JavaScript和jQuery的新手。我有主意，但不知道如何申请。我使用表单向导。单击提交按钮后，对如何在数据表（位于表单向导下方）中显示数据（从某处获取）有任何想法吗？如下图所示。请分享您的想法或解决方案。

更新：目前我已经在一行中有2个数据表，但是如何隐藏该表，直到用户提交向导，然后该表才会出现？

这是我的HTML代码：

<div class="row" id="dataTable">
...
</div>

这是我的脚本：

<script>
    if ( $.fn.DataTable.isDataTable('.dataTable') ) {
        $('.dataTable').DataTable().clear().destroy().empty();
        $('.dataTable').append(newHtmlTable).DataTable();
    }
    $(".tab-wizard").steps({
        headerTag: "h5",
        bodyTag: "section",
        transitionEffect: "fade",
        titleTemplate: '<span class="step">#index#</span> #title#',
        labels: {
            finish: "Submit"
        },
        onStepChanged: function (event, currentIndex, priorIndex) {
            $('.steps .current').prevAll().addClass('disabled');
        },
        onFinished: function (event, currentIndex) {
            // $('#success-modal').modal('show'); 
            $('.dataTable').append(htmlTable).DataTable();
        }
    });
</script>

Answer 1

我假设您已经将数据存储为表格，并且可以使用jQuery简单追加到块中并初始化DataTable：

$('.dataTable').append(htmlTable).DataTable();

如果您已经初始化它并想要销毁DataTable实例，清除它，追加新数据并重新初始化，则可以考虑以下内容：

if ( $.fn.DataTable.isDataTable('.dataTable') ) {
    $('.dataTable').DataTable().clear().destroy().empty();
    $('.dataTable').append(newHtmlTable).DataTable();
}