AJAX请求成功后如何创建服务端渲染的jQuery DataTables？

你现在的核心问题是把手动AJAX请求和DataTables服务端模式的自动AJAX请求混在一起了——服务端模式的DataTables会自己负责向后端发送请求、获取数据并渲染表格，不需要你手动先发起一遍AJAX请求。下面给你两种可行的解决方案，优先推荐第一种（更符合DataTables的设计逻辑）：

方案一：让DataTables接管AJAX请求，点击按钮时传递筛选参数 #

这种方式是服务端模式DataTables的标准用法，它会自动处理分页、排序、筛选的参数传递，你只需要绑定筛选按钮的事件来触发表格刷新即可。

$(document).ready(function() {
    var urlajax = "<?= $this->url->get($this->router->getControllerName() . '/ajaxbynip')?>";
    
    // 初始化服务端模式的DataTables
    var tabel = $('#ats-dt-basic-datatbles').DataTable({
        stateSave: true,
        processing: true,
        serverSide: true, // 保持服务端模式开启
        ordering: true,
        order: [[0, 'asc']],
        iDisplayLength: 50,
        ajax: {
            url: urlajax,
            type: "GET", // 和你原来的请求类型保持一致
            data: function(d) {
                // 合并DataTables自带的分页/排序参数与你的筛选表单参数
                return $.extend({}, d, $('#form-filter').serializeArray());
            }
        },
        deferRender: true,
        lengthMenu: [[5, 10, 50], [5, 10, 50]],
        columns: [
            { data: "no" },
            { data: "name" },
            { data: "PERAN" },
            { data: "action" },
        ],
    });

    // 绑定筛选按钮点击事件
    $("#btn-filter").click(function(e) {
        e.preventDefault(); // 阻止表单默认提交（如果按钮是表单提交类型）
        // 触发DataTables重新加载数据，此时会带上最新的筛选参数
        tabel.draw();
    });
});

关键说明： #

• ajax.data选项使用函数返回参数，这样每次DataTables发起请求时，都会自动带上最新的表单筛选数据，同时保留DataTables自身需要的分页、排序参数（比如draw、start、length等）。
• 点击筛选按钮时调用tabel.draw()，会触发DataTables重新发送AJAX请求，后端处理后返回符合格式的数据，表格就会自动更新渲染。

方案二：手动AJAX获取数据后，用非服务端模式渲染表格（不推荐） #

如果你坚持要先手动获取数据再渲染表格，需要关闭DataTables的服务端模式，直接用返回的数据填充表格：

var urlajax = "<?= $this->url->get($this->router->getControllerName() . '/ajaxbynip')?>";
$("#btn-filter").click(function(){
    var data = $('#form-filter').serialize();
    $.ajax({
        url:urlajax,
        type:"get",
        data:data,
        success:function(response){
            console.log(response);
            
            // 先销毁已存在的DataTables实例（避免重复初始化报错）
            if ($.fn.DataTable.isDataTable('#ats-dt-basic-datatbles')) {
                $('#ats-dt-basic-datatbles').DataTable().destroy();
            }
            
            // 用非服务端模式初始化表格，直接传入返回的数据
            var tabel = $('#ats-dt-basic-datatbles').DataTable({
                stateSave: true,
                processing: true,
                ordering: true,
                order: [[0, 'asc']],
                iDisplayLength: 50,
                data: response.data, // 直接使用后端返回的data数组
                deferRender: true,
                lengthMenu: [[5, 10, 50], [5, 10, 50]],
                columns: [
                    { data: "no" },
                    { data: "name" },
                    { data: "PERAN" },
                    { data: "action" },
                ],
            });
        }
    });
});

注意： #

这种方式会丢失服务端模式的分页、排序、搜索自动处理能力，所有分页逻辑需要你自己实现，因此只适合数据量很小的场景。

内容的提问来源于stack exchange，提问作者Newbie 123