Why table.row.add didn't work in my codes?

maywei

function getDetail(o, index) {
var tr = $(o).closest('tr');
var row = sumTable.row(tr);

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
    }
    else {
        var detail = $('<input type="button" value="Add" class="addRowButton"/><table class="subtable" cellpadding="5" cellspacing="0" border="0" style="border-style:none;width:100%"><thead><tr class="gridStyle"> <th></th> <th style="width:420px">开票时间</th> <th style="width:200px">公司</th><th style="width:239px">金额</th><th style="width:200px">税额</th><th><input type="checkbox" class="allCheck" /></th></tr></thead><tbody></tbody></table>');

        var keydate = row.data()[0];
        row.child(detail).show();
        var data = null;
        var tableData =$(detail[1]).DataTable({
            bProcessing: true,
            bServerSide: true,
            iDisplayLength: 5,
            searching: false,
            bLengthChange: false,
            sAjaxSource: "/Home/getPagingData?date=" + keydate,
            columnDefs:[{
                orderable:false,
                targets:[0,5]
            }],
            columns: [
             { data: "ID"},
             {
                 title: "开票时间", data: "InvoiceDate"                    
             },
             { title: "公司名称", data: "SellCompanyCode" },
             {
                 title: "金额",
                 data: "Amount", mRender: function (data, type, row) {
                     var t = "'gTotalAmount_" + index + "'";
                     return '<input type="text" onchange="sendAmountChangedToTotalSum(this,' + t + ')"      name="' + data + '" value="' + data + '"/>'

                 }
             },
             {
                 title: "税额",
                 data: "TaxAmount", mRender: function (data, type, row) {
                     var t = "'gTotalTaxAmount_" + index + "'";
                     return '<input type="text"  name="' + data + '" onchange="sendAmountChangedToTotalSum(this,' + t + ')" value="' + data + '"/>'

                 }
             },
               {
                   title: "<input type='checkbox' class='allCheck' />",
                   data: null,
                   defaultContent: "<input type='checkbox' name='check' />",

               }
            ]
        });
        //event bind
        $(detail[0]).on("click",function () {
         var newRow=   tableData.row.add({ "ID": "1", "InvoiceDate": "", "SellCompanyCode": "", "Amount": "0", "TaxAmount":"0" }).draw();
       //it doesn't work
        });
    }
}

maywei

Is it because I use service-side paging?

allan

Yes. row.add() is irrelevant with server-side processing enabled since you'd be adding data on the client-side, but the data store and model is on the server-side.

Allan