Error when select row after destroy Datatable for the second time

ndre_2787

Try to select multiple Row in table using datatable. After generate Datatable for the first time, error not showing when click certain row. But if regenerate the datatable, Its showing error

Cannot read properties of undefined (reading '_DTTT_selected')

I don't know whats the undefined thing that the error talks about

Currently my js looks like this

getTable function is click triggered manually, if getTable run for the second time, the error is shown

      function getTable(){
           $("#tblDisbursement").DataTable().clear();
        $("#tblDisbursement").DataTable().destroy();
        var a = generateDatatables();

    }
function generateDatatables() {
    $.ajax({
            type: "POST",
            url: "${local_server}/controller/gettableFilter",
            data: $("#formDDL").serialize(),
            async:true,
            beforeSend : function(){
            showLoadingProg(true,"load data");
            },
            success: function(e) {
                showLoadingProg(false);
                console.log("ini e");
               console.log(e);
               if(e.status!="Success"){
                   $.alert("Error/ Failed");
               }
               console.log("oini t");

               var n = [];
              var a = 0;
         $.each(e.data, function(e, t) {
               var c = new Object;
                $.each(t.loan, function(e, t) {
                   c.loan_acc_no = null != t.loan_acc_no ? t.loan_acc_no : "", c.loan_cif = null != t.loan_cif ? t.loan_cif : "", c.fullname = null != t.fullname ? t.fullname : "", c.loan_prd_code = null != t.loan_prd_code ? t.loan_prd_code : "", c.loan_disb_amount_needs = null != t.loan_disb_amount_needs ? t.loan_disb_amount_needs : "", c.ldi_req_date = null != t.ldi_req_date ? t.ldi_req_date : "", c.status = null != t.status ? t.status : ""
               }),  n[a] = c, a++
           })
           var e= $("#tblDisbursement").DataTable({
               data: n,
                order: [
                    [5, 'desc']
                ],
                lengthMenu: [
                    [10, 25, 50, 100, 200, 300, -1],
                    [10, 25, 50, 100, 200, 300, "All"]
                ],
                columns: [{
                    render: function(e, t, n) {
                        return '<input type="checkbox" class="cekbox" name="acc[]" value="' + n.loan_acc_no + '">'
                    },
                    orderable: !1
                }, {
                    data: "loan_acc_no"
                }, {
                    data: "fullname",

                }, {
                    data: "loan_prd_code",
                    render: function(e, t, n) {
                        var a = "";
                            return String(n.loan_prd_code).includes("A06") ? "KiniGajian" : "";
                    }
                }, {
                    data: "loan_disb_amount_needs",
                    //    className: "txtRigth",
                    render: function(e, t, n) {
                        return toRp(n.loan_disb_amount_needs)
                    }
                }, {
                    data: "ldi_req_date",
                    render: function(e, t, n) {
                        return null != e ? n.ldi_req_date.replace("T", " ") : ""
                    }
                }, {
                    data: "status"
                } /* {
                    render: function(e, t, n) {
                        var a = "";
                        var x = (n.cga_nik != "Public")?n.cga_nik:n.loan_cif;
                        // console.log(n.cga_filename);
                        return a = null != n.cga_filename ? "<a href=\"javascript:viewImage('"+ n.cst_cif +"','" + x + '\');"><span class="label label-success">Image</span></a>' : '<span class="label label-default">No Image</span>'
                    }
                },  */
                /*{
                    render: function(e, t, n) {
                        var a = '<button class="edit btn btn-xs btn-success" id="' + n.loan_acc_no + '" value="' + n.loan_acc_no + '" ><i class=" fa fa-edit"></i></button>';
                        return a += '<button class="view btn btn-xs btn-info" id="' + n.loan_acc_no + '" value="' + n.loan_acc_no + '" ><i class=" fa fa-eye"></i></button>'
                    },
                    orderable: !1
                }*/
                ]
            });

       var t = new $.fn.dataTable.TableTools(e, {
           sSwfPath: "",
           sRowSelector: "td:not(:last-child)",
           sRowSelect: "multi",
           fnRowSelected: function(e) {
               console.log(e);
               try {
                   $(e).find("input[type=checkbox]").get(0).checked = !0;
                   var t = -1;
                   $.each($(".cekbox"), function(e, n) {
                       t++
                   });
                   var n = 0;
                   $.each($(".cekbox:checked"), function(e, t) {
                       n++
                   }), t == n && 0 == document.getElementById("cek").checked && (document.getElementById("cek").checked = !0), 0 != n && $("#btn-dis-all").removeClass("disabled")
               } catch (a) {}
           },
           fnRowDeselected: function(e) {
               try {
                   console..log(e);
                   $(e).find("input[type=checkbox]").get(0).checked = !1;
                   var t = -1;
                   $.each($(".cekbox"), function(e, n) {
                       t++
                   });
                   var n = 0;
                   $.each($(".cekbox:checked"), function(e, t) {
                       n++
                   }), 0 == n && $("#btn-dis-all").addClass("disabled"), t == n && 1 == document.getElementById("cek").checked && (document.getElementById("cek").checked = !1)
               } catch (a) {}
           },
           sSelectedClass: "success"
       });
       $("#tblDisbursement > thead > tr > td input[type=checkbox]").eq(0).on("click", function() {
           var e = this.checked,
               n = 0;
           $.each($(".cekbox:checked"), function(e, t) {
               n++
           }), $(this).closest("table").find("tbody > tr").each(function() {
               var a = this;
               e ? (t.fnSelect(a), $("#btn-dis-all").removeClass("disabled")) : (t.fnDeselect(a), n >= 1 && $("#btn-dis-all").addClass("disabled"))
           })
       }), 
       $("#tblDisbursement").on("click", "tr td input[type=checkbox]", function() {
           var e = $(this).closest("tr").get(0),
               n = 0;

           $.each($(".cekbox:checked"), function(e, t) {
               n++
           });
           var a = -1;
           $.each($(".cekbox"), function(e, t) {
               a++
           }),  this.checked ? (t.fnSelect(e), n > 0 && $("#btn-dis-all").removeClass("disabled"), a == n && 0 == document.getElementById("cek").checked && (document.getElementById("cek").checked = !0)) : (t.fnDeselect(e), n > 0 && 1 == document.getElementById("cek").checked && 1 == n && (document.getElementById("cek").checked = !1, $("#btn-dis-all").addClass("disabled")))
       })

colin

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