通过 jquery 重新加载数据表，但所有数据显示在第 1 页（默认每页 10 个数据）

Posted 2023-05-09

【中文标题】通过 jquery 重新加载数据表，但所有数据显示在第 1 页（默认每页 10 个数据）

【英文标题】：Reload datatable by jquery but all data shown at page 1 (default 10 data every page)

【发布时间】：2018-07-01 20:06:23

【问题描述】：

我正在为我的代码使用数据表。我想在数据提交后重新加载表格。 但是在提交数据后，所有记录都绑定在第 1 页上。 我正在使用 codeigniter 和 jquery ajax

这是我的 jquery 代码

$('.myTable').dataTable();

//process data
$(document).on('submit','#frm_add_main_menu',function(e) 
    e.preventDefault();
    $('#msg').removeClass('alert alert-danger');
    $('.loading').show();
    $('.overlay').show();
    var formObj = $(this);
    var formData= new FormData(this);
    $.ajax(
        url: base_url+'admin/save_main_menu',
        type: 'POST',
        dataType: 'json',
        data: formData,
        contentType : false,
        cache       : false,
        processData : false,
        success:function (data) 
            console.log(data);
            if (!data.success)
                if (data.errors)
                    $('.loading').hide();
                    $('.overlay').hide();
                    $('#modal_error_msg').modal('show');
                    $('#msg').html(data.errors).addClass('alert alert-danger');
                
            
            else
                $('.loading').hide();
                $('.overlay').hide();
                $('#modal_add_menu').modal('hide');
                $('#modal_error_msg').modal('show');
                $('#msg').html(data.msg).addClass('alert alert-info');
                setTimeout(function()$( ".myTable" ).load( "55 .myTable" );, 100);
            
        //end function success
    );
);

提交数据后，我的表格正在重新加载，但所有数据视图都在第 1 页（默认仅显示 10 个数据）。

有人帮忙看看有什么问题吗？

之前谢谢。

对不起，我的英语不好。

【问题讨论】：

你没有重新加载dataTable，你只是在表格DOM元素中加载了一些东西。

你能给我正确的代码吗？我在这个datatables.net/reference/api/ajax.reload() 上关注了教程，但错误消息

【参考方案1】：

您可以使用.DataTable().ajax.reload()从源重新加载表数据

$('.myTable').dataTable();

//process data
$(document).on('submit','#frm_add_main_menu',function(e) 
    e.preventDefault();
    $('#msg').removeClass('alert alert-danger');
    $('.loading').show();
    $('.overlay').show();
    var formObj = $(this);
    var formData= new FormData(this);
    $.ajax(
        url: base_url+'admin/save_main_menu',
        type: 'POST',
        dataType: 'json',
        data: formData,
        contentType : false,
        cache       : false,
        processData : false,
        success:function (data) 
            console.log(data);
            if (!data.success)
                if (data.errors)
                    $('.loading').hide();
                    $('.overlay').hide();
                    $('#modal_error_msg').modal('show');
                    $('#msg').html(data.errors).addClass('alert alert-danger');
                
            
            else
                $('.loading').hide();
                $('.overlay').hide();
                $('#modal_add_menu').modal('hide');
                $('#modal_error_msg').modal('show');
                $('#msg').html(data.msg).addClass('alert alert-info');

                // reload the table
                $('.myTable').DataTable().ajax.reload();
            
        //end function success
    );
);

【讨论】：

你的意思是我把setTimeout(function()$( ".myTable" ).load( "55 .myTable" );, 100);放在后面吗？

@MardinoIsmail 将setTimeout(function()$( ".myTable" ).load( "55 .myTable" );, 100); 替换为$('.myTable').DataTable().ajax.reload();

在我实现上面的代码之前，我已经尝试过这段代码。我有这样的错误消息DataTables warning: table id=DataTables_Table_0 - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1，在我的开发人员工具上我得到TypeError: g is null

您的 API 是否正确发回 json？另见datatables.net/forums/discussion/38292/…