Laravel中Server-side Datatable-Ajax数据无法显示的问题

我在Laravel项目里用Server-side模式的Datatable-Ajax展示数据库数据，直接访问接口能正常返回JSON，但数据就是渲染不到表格里。

问题细节 #

• 接口返回的JSON包含数据数组，但表格始终显示无数据状态
• 已尝试销毁重建Datatable、手动清空tbody，问题依旧

我的Ajax脚本 #

function getData(first_reload) {
        var id = <?= $customer->id ?>;

        /** Remove */

        if ($.fn.DataTable.isDataTable('#datatable-ajax')) {
            $('#datatable-ajax').DataTable().destroy();
        }

        $('#datatable-ajax tbody').empty();


        $('#datatable-ajax tfoot th').each(function(index, value) {
            var title = $(this).text();
            if (index != 0) // id and action
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        var table = $('#datatable-ajax').DataTable({
            processing: true,
            serverSide: true,
            ajax: `{{ url('/') }}/customer/show-datatable/${id}`,
            order: [
                [3, "desc"]
            ], //or asc 
            columns: [{
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'no_resi',
                    name: 'no_resi'
                },
                {
                    data: 'total_fee',
                    name: 'total_fee'
                },
                {
                    data: 'date',
                    name: 'date'
                },

                {
                    data: 'bayar',
                    render: function(data, type, row) {

                        var paid = false;

                        $.each(row.statuses, function(key, val) {

                            if (val.id == 5)
                                paid = true;
                        });

                        if (paid) {
                            return '<span class="text-success">Sudah</span>';
                        } else {
                            return '<span class="text-danger">Belum</span>';
                            // <a href="#" class="btn btn-sm btn-clean btn-icon updatebayar_view"><i class="la la-check"></i></a>
                        }

                    }
                },
                {
                    data: 'sampai',
                    render: function(data, type, row) {

                        var paid = false;

                        $.each(row.statuses, function(key, val) {

                            if (val.id == 4)
                                paid = true;
                        });

                        if (paid) {
                            return '<span class="text-success">Sudah</span>';
                        } else {
                            return '<span class="text-danger">Belum</span>';
                            // <a href="#" class="btn btn-sm btn-clean btn-icon updateambil_view"><i class="la la-check"></i></a>
                        }

                    }
                },
                {
                    data: 'ambil',
                    render: function(data, type, row) {

                        var paid = false;

                        $.each(row.statuses, function(key, val) {

                            if (val.id == 7)
                                paid = true;
                        });

                        if (paid) {
                            return '<span class="text-success">Sudah</span>';
                        } else {
                            return '<span class="text-danger">Belum</span>';
                            // <a href="#" class="btn btn-sm btn-clean btn-icon updateambil_view"><i class="la la-check"></i></a>
                        }

                    }
                },
            ],
            fixedHeader: true,
            scrollX: true,
            initComplete: function() {
                // Apply the search
                this.api().columns().every(function() {
                    var that = this;
                    $('input', this.footer()).on('keyup change clear', function() {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });
                });
            }
        });


    }

解决方案 #

• 修正列数据绑定：bayar、sampai、ambil这三列是通过render函数从row.statuses计算得到的，返回的JSON中并没有这三个字段，需把这三列的data属性设为null，避免Datatable找不到对应数据：

  {
      data: null, // 改为null
      render: function(data, type, row) {
          // 原有逻辑不变
      }
  }
  

• 检查服务端返回格式：确保接口返回的JSON严格符合Datatable服务端要求，必须包含以下字段：
  • draw：与请求中的draw参数一致
  • recordsTotal：总记录数
  • recordsFiltered：过滤后的记录数
  • data：实际数据数组
• 优化表格销毁逻辑：销毁表格时添加参数避免DOM结构被破坏：

  if ($.fn.DataTable.isDataTable('#datatable-ajax')) {
      $('#datatable-ajax').DataTable().destroy({ destroy: true, remove: false });
  }
  

• 移除手动清空tbody操作：Datatable会自动处理tbody内容，手动清空可能导致渲染异常，删除$('#datatable-ajax tbody').empty();这一行。

内容的提问来源于stack exchange，提问作者firmansyah diana