Fail when try to delete data using DataTable

Fail when try to delete data using DataTable

criastoscriastos Posts: 1Questions: 1Answers: 0
edited July 2020 in Free community support

I have the following.

1. LoadInformation using DataTables

 $('#tblctacte').DataTable().destroy();
        listatable = $('#tblctacte').DataTable({
              "data": ResponseResult.ListData,
              "columns": [
                    { data: "Id_CtaCte"},
                    { data: "Agencia"},
                    { data: "Documento" },
                    .....more fields......
                    {
                        data: null,
                        className: "center",
                        defaultContent: "<button type='button' class='editar btn btn-primary'><i class='fa fa-pencil-square-o'></i></i></button> <button type='button' class='delete btn btn-danger' data-toggle='modal' data-target='#modalEliminar'><i class='fa fa-trash-o'></i></button>"
                    }
              ],
              rowId: function(a) {
                return 'id_' + a.Id_CtaCte;
              },
              "columnDefs": [
                  {
                      targets: 0,
                      checkboxes: {
                          selectRow: true
                      }
                  },
                  {
                      targets: 5,
                      "render": function (data) {
                          var Total = new oNumero(data);
                          return '<div class="row_data" edit_type="click" col_name="Imp_Total"/>' + Total.formato(2, true)
                      },
                  },
                  ....more....
            ],
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
            },
            'order': [[1, 'asc']]
        });
    };

****2. When I clicked in button "Delete", a function is executed****

       var data_eliminar = function (tbody, table) {
        $(tbody).on("click", "button.eliminar", function () {

            var mdata = table.row($(this).parents("tr")).data();
    
            if (mdata.Est_Cancelacion == "P") {
                if (confirm("¿Esta seguro de eliminar el ID " + mdata.Id_CtaCte + " ?")) {
              
                       //Process to delete

                       if (ResponseResult.Status == "OK") {
                           $('#mensajeError').html('<b>' + ResponseResult.Message + '</b>');    
                       };
                } else {
                    return false;
                }
            } else {
                return false;
            }
        });
    }

The function executes well. After that call function Listar() and load table with data.

When I try to delete another row again, it throws Error:
"Unable to get property 'Est_Cancelacion' of undefined or null reference"

I don't know if I am doing something wrong, I don't find the error,

Please help me.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,599
    edited July 2020

    You're trying to remove it under the hood of DataTables. The best way to remove it would be to use row().remove().

    If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

This discussion has been closed.