4

嗨,我正在使用fnDeleteRow函数从表中删除该行,但问题是它仅第一次删除正确的行,然后开始删除下一行,而不是我按下删除按钮的行。

这是我的代码

$(document).ready(function() {
        $(document).delegate('.but', 'click', function() { 

            var id = this.id; //getting the ID of the pressed button
            var name = this.name; //getting the name of the pressed button

            /****AJAX Function*********/
            $.post('/products/delete', {id:id}, function(data) {
                if(data == 1){ //In case if data is deleted

                    var oTable = $('#table_id').dataTable(); // JQuery dataTable function to delete the row from the table
                    oTable.fnDeleteRow( parseInt(name, 10) );// JQuery dataTable function to delete the row from the table
                  //  oTable.fnDraw(true);



               }
                else
                    alert(data);
            });
        });
    });

this.name 给出与按下的按钮关联的行的行号,因为我不知道有任何方法可以从 dataTable 动态计算 rowIndex。

当我在服务器端计算行号并将该数字与按钮相关联时,因此当我删除行数据表时,它会在客户端重新排列其 rowIndex,而服务器对此一无所知。

解决此问题的任何帮助。

4

3 回答 3

9

试试这个:

$(document).ready(function() {
        $(document).delegate('.but', 'click', function() { 

            var id = this.id; //getting the ID of the pressed button
            var row = $(this).closest("tr").get(0);

            /****AJAX Function*********/
            $.post('/products/delete', {id:id}, function(data) {
                if(data == 1){ //In case if data is deleted

                    var oTable = $('#table_id').dataTable(); // JQuery dataTable function to delete the row from the table
                    oTable.fnDeleteRow(oTable.fnGetPosition(row));// JQuery dataTable function to delete the row from the table
                  //  oTable.fnDraw(true);
               }
                else
                    alert(data);
            });
        });
    });
于 2013-10-02T11:27:27.883 回答
4
// Delete Row from dataTable - START //
    $('body').on('click', 'i.DeleteRow', function() {
          DeletedRow = $(this).parents('tr');
    });

    $('body').on('click', '.btnYES', function(){
        console.log('DeletedRow:', DeletedRow);
        $('#unitsTableDisplay').DataTable().row(DeletedRow).remove().draw();
    })
    // Delete Row from dataTable - END //
于 2017-07-25T14:21:08.143 回答
0
$(document).ready(function () {
    $('#add-new-button').on('click',function(){
        var rData = [
            test1,
            test1,
            '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
            '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
        ];
         $('#dataTable').DataTable().row.add(rData).draw(false);
    });

   $('#dataTable').on('click', '.update', function () {
        var pageParamTable = $('#dataTable').DataTable();
        var tableRow = pageParamTable.row($(this).parents('tr'));
        var rData = [
            test1,
            test1,
            '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
            '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
        ];
        pageParamTable
                .row( tableRow )
                .data(rData)
                .draw();
    });
    $('#dataTable').on('click', '.delete', function () {
       var pageParamTable = $('#dataTable').DataTable();
        var tableRow = pageParamTable.row($(this).parents('tr'));
        pageParamTable.row( tableRow ).remove().draw();
    });
});

在此代码中,您可以从适用于我们的项目的 DataTable 中找到删除、添加和更新行

于 2017-12-09T23:21:45.260 回答