jquery - 在数据表中添加行可以工作，但编辑行或内联编辑不起作用

Question

我正在使用数据表并添加动态行，它正在工作，但我也想编辑行，但无法编辑代码。

var t= $('#example').DataTable({ 
         //dom: "Bfrtip",
        //ajax: "../php/staff.php",
        'fnCreatedRow': function (nRow, aData, iDataIndex) {
        $(nRow).attr('id', 'row_' + aData[0]); // or whatever you choose to set as the id
        }

$('#add_company').click(function(e){
    if(result)
    {

        t.row.add( [
            counter,
            $("#payment_company ").val(),
            $("#payment_date").val(),
            $("#payment_type").val(),
            $("#payment_amount").val()

        ] ).draw( true );

    //$('#amount_form').trigger("reset");
        counter++;
    }

编辑代码如下

editor = new $.fn.dataTable.Editor( {
        //ajax: "../php/staff.php",
        table: "#example"
    } );

$('#example').on( 'click', 'tbody td:not()', function (e) {
        editor.inline( this );
    } );

Answer 1

使用此代码

var t= $('#example').DataTable({ 
         //dom: "Bfrtip",
        //ajax: "../php/staff.php",
        /*'fnCreatedRow': function (nRow, aData, iDataIndex) {
        $(nRow).attr('id', 'row_' +iDataIndex); // or whatever you choose to set as the id
        },*/
         columns: [
            { data: "s_no" },
            { data: "payment_company" },
            { data: "payment_date" },
            { data: "payment_type" },
            { data: "payment_amount"}
        ]
    });

$('#add_company').click(function(e){
    if(result)
    {
        t.rows.add( [{ "DT_RowId": "row_"+counter,
                     "s_no":counter,
        "payment_company":  $("#payment_company ").val(),
        "payment_date":   $("#payment_date").val(),
        "payment_type":  $("#payment_type").val(),
        "payment_amount":$("#payment_amount").val() }
     ] ).draw(false);

    //$('#amount_form').trigger("reset");
        counter++;
    }

还可以更改您的内联编辑代码

  editor = new $.fn.dataTable.Editor( {
        //ajax: "../php/staff.php",
        table: "#example",
       fields: [ {
                label: "S.No:",
                name: "s_no"
            }, {
                label: "Payment Company:",
                name: "payment_company"
            }, {
                label: "Payment Date:",
                name: "payment_date"
            }, {
                label: "Payment Type:",
                name: "payment_type"
            }, {
                label: "Payment Amount:",
                name: "payment_amount"
            }
        ]
    } );
    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not()', function (e) {
        editor.inline( this );
    } );