I am currently using the DataTable API and jQuery to create a table by fetching rows from the server. However, I encounter an issue when I click a button to load additional rows and append them to the end of the table. The problem arises when I try to hide certain columns: the initial rows lose the hidden columns, but the ones loaded later are not affected by the filters. How can I resolve this issue? Upon further investigation, I discovered that the filtering function retrieves all rows, not just the initial ones.
var data = $(this).dataTable().toArray();
if ($this.prop("checked") === false) {
data.forEach(function (element) {
$(element).DataTable().columns().column(column).visible(false);
});
} else {
data.forEach(function (element) {
$(element).DataTable().columns().column(column).visible(true);
});
}
Adding the remaining rows
var tbody = $("#tbody-" + $this.attr("data-parent-id"));
var dt = tbody.parents(".bizon-datatable").DataTable();
$(result).filter("tr").each(function (i, v) {
dt.row.add($(v));
});
tbody.append(result);