Try to create multiple selection table with DataTable. But the problem is, if the table is recreated multiple times. It shows error Cannot read properties of undefined (reading '_DTTT_selected') when select row table . But it's working properly on the first table generate
Here's my JS code
Error is shown when selecting row after run getTable function for the second time
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")))
})
}