添加新行数据表 JQuery：为第 2 行第 1 列请求未知参数“PainSite”

Question

我正在尝试使用 row.add() 在此数据表中添加新行。但后来我得到这个错误：

DataTables 警告：表 id=tblPainAssessChart - 请求第 2 行第 1 列的未知参数“PainSite”。

这是数据表的初始化：

      gblPainChartTable = $('#tblPainAssessChart').DataTable({
            responsive: true,
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            language: { search: "",
                searchPlaceholder: "Search",
                sLengthMenu: "_MENU_items"

            },
            processing: true,
            serverSide: true,
            ajax: '{!! route('getAjaxPainAssessChartData', ['id' =>  $T_Patient->id]) !!}',
            columns: [
                {
                    render: function(data, type, row, meta) {
                        data = moment(row.Date, 'YYYY-MM-DD').format('DD/MMM/YYYY');
                       return data;
                    }
                },
                { data: 'PainSite', name:'PainSite'},
                { data: 'TypeofPain', name: 'TypeofPain'},
                { data: 'PainDegree', name: 'PainDegree'},
                {
                    render: function(data, type, row, meta) {
                       
                        data = ''
                        // + '<a onclick="editPA(' + meta.row + ')" class="blue-text btn-edit" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Edit"><i class="fas fa-stop action-icon-img"></i></a>'
                        // + '<a onclick="removePA(' + meta.row + ')" class="red-text btn-remove" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Remove"><i class="fa fa-times action-icon-img"></i></a>'
                        // +'';
                        
                        return data;
                    }
                }
            ],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "columnDefs": [
                {
                    "targets": 0, // Date
                    "className": "text-center"
                },
                {
                    "targets": 1, // PainSites
                    "className": "text-center",
                    "orderable": false
                },
                {
                    "targets": 2, // Type of Pain
                    "className": "text-center",
                    "orderable": false
                },
                {
                    "targets": 3, // PainDegree
                    "className": "text-center",
                    "orderable": false
                },
                {
                    "targets": 4, // Action 
                    "className": "text-center",
                    "orderable": false
                },
            ]
        });

这是向数据表添加新行的函数。

function addPA(){

     var DatePA = $("#Date").val();
     var PainSite = $("#PainSite").val();
     var TypeofPain = $("#TypeofPain").val();
     var PainDegree = $("#PainDegree").val();
     var DatePAF = moment(DatePA).format("DD-MMM-YYYY"); 
           
      gblPainChartTable.row.add( [
            DatePAF, 
            PainSite,
            TypeofPain,
            PainDegree, 
           '<a onclick="editPA(' + lastPANo + ')" class="blue-text btn-edit" data-toggle="tooltip" data-placement="bottom" title="Edit"><i class="fas fa-pencil-alt action-icon-img"></i></a>' +
           '<a onclick="removePA(' + lastPANo + ')" class="red-text btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="fas fa-trash action-icon-img"></i></a>'

       ]).draw();
}

我错过了什么？

编辑：

现在没有显示错误，但仍然没有将新行添加到表中

Answer 1

您正在使用 ajax，所以如果您在 columns 中定义了这些列：

{
    render: function(data, type, row, meta) {
        data = moment(row.Date, 'YYYY-MM-DD').format('DD/MMM/YYYY');
       return data;
    }
},
{ data: 'PainSite', name:'PainSite'},
{ data: 'TypeofPain', name: 'TypeofPain'},
{ data: 'PainDegree', name: 'PainDegree'},
{
    render: function(data, type, row, meta) {
       
        data = ''
        // + '<a onclick="editPA(' + meta.row + ')" class="blue-text btn-edit" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Edit"><i class="fas fa-stop action-icon-img"></i></a>'
        // + '<a onclick="removePA(' + meta.row + ')" class="red-text btn-remove" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Remove"><i class="fa fa-times action-icon-img"></i></a>'
        // +'';
        
        return data;
    }
}

您必须在 add 或 update 方法中传递一个与 columns 中使用的字段相同的对象，如下所示：

gblPainChartTable.rows.add([{
    "Date": DateValue,
    "PainSite": PainSiteValue,
    "TypeofPain": TypeofPainValue,
    "PainDegree": PainDegreeValue
}]).draw()

编辑 1：

然后，您可以根据需要对带有新行的表格进行排序。 默认情况下，行添加在最后一个位置（我认为），如果你想在其他位置，你必须做类似的事情：

gblPainChartTable.order([0, 'asc'], [3, "asc"]).draw()

编辑 2：

见this，serverSide...：

如果要添加新行，则必须在数据源处添加 （在服务器端处理的情况下，即在服务器端 - 通常是一个数据库表）

上面的代码适用于没有serverSide 的表格，但我看到你有它。

解决方案是将数据添加到数据库（或 ajax 源），然后类似于：

gblPainChartTable.clear();
gblPainChartTable.draw();
gblPainChartTable.ajax.reload();

还有一件事...你确定要使用serverSide吗？