js笔记 dataTable 中 ajax 请求从第二次开始触发请求事件，却不再发送请求的问题

原创于 2018-12-24 10:41:46 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dataTable

Front-end Technology 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种在点击事件触发时，如何销毁并重新初始化DataTable的方法。通过判断全局变量base_table是否存在，若存在则先销毁，再调用initBaseImpl()函数加载数据。此过程涉及数据请求配置，包括长度菜单、滚动条显示、Ajax数据源设置及按钮功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo如下（红色部分是解决方法）：
//请求触发事件
$('#imageAnaBtn').on('click', function () {

    // ...其它代码...

    //如果base_table对象已存在 则销毁；其中base_table是全局变量。
    if (base_table != undefined && base_table != "undefined" && base_table != null) {
        $("#base_table").dataTable().fnDestroy();
    }

    initBaseImpl();
});

//数据请求
function initBaseImpl() {
    base_table = dataTable.load({
        el: '#base_table',
        showIndex: true,
        scrollX: true,
        lengthMenu: [10, 20, 50, 100],
        ajax: {
            url: '/pushExtraction/getFrData',
            data: function (d) {
                d.params = $("#base_form").serializeObject();
            }
        },
        columns: [
            {data: null, defaultContent: 1, className: 'center'},
            {data: 'frmc', cut: {length: 40, repalce: '...'}},
            {data: 'tyxydm', cut: {length: 40, repalce: '...'}},
            {data: 'qybq', cut: {length: 40, repalce: '...'}},
            {data: 'bmpj', cut: {length: 40, repalce: '...'}},
        ],
        buttons: [
            {
                extend: 'excel',
                text: '<input type="button" value="导出" class="btn mr30">'
            },
            {
                extend: 'print',
                text: '<input type="button" value="打印" class="btn mr30">'
            }
        ]
    })
}