oTable.row().remove() remove the rows but when add new records it also append old reocords too

mukeshsalaria01

Hi, I am using ajax hit to add rows to datatable using oTable.row().add([]); and removing the rows which are grouped using delete button the grouped row. When i click on grouped row it removes all the rows of that group. But when i again add same records or new records it add delete records too.

I have to append multiple records on button click so, bDestroy:"true" and oTable.clear() doesn't help me even oTable.clear() all the table. I don't want this because I only want to remove the one group and rows under that group.

allan

Can you link to a test page showing the issue please. I don't see any reason why row.add() would remove rows - it should do the exact opposite...

Allan

mukeshsalaria01

yes i know row.remove() remove the rows. and I also typed row.add() adding..

I have no link because i am getting data from server side so can't create a link, but here my code...

To Add rows to table

  
$('#resultTable').on('click', 'a.add', function (e) {
        var aData = t.rows($(this).closest('tr')).data();
        var sUser = { sUser: aData[0][2] };
        $.ajax({
            url: '@Url.Action("GetEmployeeTickets", "Ticket")',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST",
            data: JSON.stringify(sUser),
            success: function (response) {
                if (response.aaData.length > 0) {                  
                    if ($('#EmployeesTicketsDT td:contains(' + response.aaData[0][7] + ')').length) {
                        $('#alreadyExists').removeClass('hidden');
                        return false;
                    }
                    $.each(response.aaData, function (key, value) {
                        var TicketId = value[0];
                        var FullName = value[1];
                        var TicketName = value[2];
                        var ReferenceNo = value[3];
                        var StartDate = value[4];
                        var ExpiryDate = value[5];
                        var Status = value[6];
                        var UserId = value[7];

                        var rowNode = oDTable.row.add([
                          TicketId,
                           FullName,
                           ' ' + TicketName,
                          ReferenceNo,
                          StartDate,
                          ExpiryDate,
                          "" + Status + "",
                          UserId,
                        ]).draw().node();

                        if (Status == "Expired") {
                            $(rowNode).addClass('danger')
                            $(rowNode).find('td').eq(6).find('span:first').addClass('label label-danger');
                                                      $(rowNode).find('td').eq(2).find('input[type="checkbox"]').removeAttr('checked');
                            $(rowNode).find('td').eq(2).find('input[type="checkbox"]').addClass('expired');
                        }
                        else {
                            $(rowNode).find('td').eq(6).find('span:first').addClass('label label-success');
                        }
                    });
                }
                else {
                    $('#Error').removeClass('hidden');
                }
            }
        });
    });

To remove rows under a group and clicked group row code

 $('#EmployeesTicketsDT').on('click', 'tr.group button.del', function (e) {
        var confirm = window.confirm("This will remove usertickets from list, Do you want to proceed?");
        if (confirm) {
            $('#EmployeesTicketsDT').DataTable().row($(this).closest('tr').nextUntil('tr.group').remove())
            $('#EmployeesTicketsDT').DataTable().row($(this).closest('tr').remove())
        }
    });

allan

Scanning the code, it looks like it should work. I would need to be able to debug it at runtime to be able to offer any help.

One thing - you don't call draw() after the remove, which you should.

Allan

mukeshsalaria01

I tried this also, But in that case it first remove the rows and again add to the table. I test it by debug the code.

It only remove the Grouped row only where i put the delete button. Rest of the rows under that group automatically added again.

mukeshsalaria01

Hey Allan,

Please help me I have tried all the ways but didn't get any solution.

mukeshsalaria01

Hey done i used .empty() instead of .remove() and its works like charm....:)