在引导数据表中创建一个新行

Question

对我来说，正在创建新行，但有些值是错误的。

我的 jQuery DataTables 列表：

 $.ajax({
    url: '@Url.Action("LoadEventChargesByUtility", "Vendor")',
    contentType: "application/json; charset=utf-8",
    datatype: "json",
    data: "{'stayiD':'" + stayi + "','datetime':'" + datetime + "','Groupid':'" + Groupid + "'}",
    type: "POST", // 'GET' or 'POST' ('GET' is the default)
    success: function (data) {
        data = JSON.parse(data);

        if (data != "No Items") {

            $('#tblevent').dataTable({
                "sPaginationType": "full_numbers",
                "aaData": data,
                "bAutoWidth": false,
                "bDeferRender": true,
                "destroy": true,
                "aoColumns": [


                    { "mData": "SERVICETEXT", 'sTitle': 'Service Name' },
                    { "mData": "ITEMNAME", 'sTitle': 'Item Name' },
                    { "mData": "USGDATE", 'sTitle': 'Usage Date', 'bSortable': false, 'bSearchable': false, 'mRender': function (data, type, full) {
                        return moment(data).format('DD/MM/YYYY');
                        }
                    },
                    //{
                    // "mData": "INSDATE", 'sTitle': 'Insert Date', 'bSortable': false, 'bSearchable': false, 'mRender': function (data, type, full) {
                    //         return moment(data).format('ll');
                    //     }
                    //},

                    { "mData": "QUANTITY", 'sTitle': 'Quantity' },
                    { "mData": "UNITTEXT", 'sTitle': 'Unit' },
                    { "mData": "RATE", 'sTitle': 'RATE' },
                    { "mData": "AMOUNT", 'sTitle': 'AMOUNT' },
                    { "mData": "SID", 'sTitle': 'Edit', 'bSortable': false, 'bSearchable': false, 'mRender': function (data, type, full) {
                        //return ' <div class="hidden-sm hidden-xs action-buttons"><a class="green" href="#"><i class="ace-icon fa fa-pencil bigger-130" onclick="return GetServicecharge(\'' + data + '\');"></i></a></div>';
                        return ' <div class="hidden-sm hidden-xs action-buttons"><a class="green" href="#"><i class="ace-icon fa fa-pencil bigger-130" onclick="return EditEventDetails(this);"></i></a></div>';
                       }
                    }
                ]
            });

            $('#EventDeatils').modal();
            }
            else {

                $('#tblevent >thead').remove();
                $('#tblevent >tbody').remove();
                var tr = '<tr><td>No Records</td></tr>';
                $('#tblevent >tbody').remove();
                $('#tblevent').append(tr);
            }

    },
    error: function (xhr, status, error) {
        var err = eval("(" + xhr.responseText + ")");
        alert(err.Message);
    }
});

在该使用日期USGDATE 和上次编辑SID 无法正常工作。创建新行时显示默认值。

我的新行添加如下：

var t = $('#tblevent').DataTable();

t.row.add({
    "SERVICETEXT": "<td >service</td>",
    "ITEMNAME": "<td>item</td>",
    "USGDATE": "<td>date</td>",
    "QUANTITY": "<td><input type=\"text\" class=\"txtDtEdit\" style=\"width: 52px;\" value=\"\" /></td>",
    "UNITTEXT": "<td><select id=\"ddlupdateunit\" style=\"width: 73px;\" ></select></td>",
    "RATE": "<td><input type=\"text\" class=\"txtDtEdit\" style=\"width: 52px;\" value=\"\" /></td>",
    "AMOUNT": "<td><input type=\"text\" class=\"txtDtEdit\" style=\"width: 52px;\" value=\"\" /></td>",
    "SID": "<td style=\"width:80px\"><div class=\"hidden-sm hidden-xs action-buttons\"><a class=\"green\" href=\"#\"><i class=\"ace-icon fa fa-check bigger-120\"  onclick=\"return updateRowData(this);\"></i></a></div></td>"
}).draw().node();

在最后一个SID 中需要出现详细信息，但它似乎是错误的。如果我触发这个函数，新行会添加到中间，而这个新行需要添加到顶部。

我的html：

<table id="tblevent" class="table table-condensed table-hover table-striped table-bordered">
</table>

三个细节需要改变：

1. 使用日期栏
2. 最后一个SID需要更改

Answer 1

您应该添加实际数据而不是 <td></td> 元素。例如，

var t = $('#tblevent').DataTable();

t.row.add({
    "SERVICETEXT": "Service Name",
    "ITEMNAME": "Item name",
    "USGDATE": "1995-12-25",
    "QUANTITY": "1",
    "UNITTEXT": "2",
    "RATE": "3",
    "AMOUNT": "4",
    "SID": "5"
}).draw();

要呈现单元格内容并在单元格中显示<input> 元素，请对这些列使用mRender 回调，类似于对SID 列使用它的方式。