datable 9.x resetting filter
const apiUrl = 'http://localhost:8080/dashboard/fetch_user';
const element = document.querySelector('#kt_remote_table');
const dataTableOptions = {
apiEndpoint: apiUrl,
requestMethod:"POST",
pageSize: 5,
setPageSize:5,
pageSizes:[2,5, 10, 20, 30, 50],
pageMore: true,
paging: true,
pageMoreLimit:3,
pagination: {
number: {
/**
* CSS classes to be added to the pagination button
*/
class: 'btn',
/**
* Text to be displayed in the pagination button
*/
text: '{page}',
},
previous: {
/**
* CSS classes to be added to the previous pagination button
*/
class: 'btn',
/**
* Text to be displayed in the previous pagination button
*/
text: `
<i class="ki-outline ki-black-left">
</i>
`,
},
next: {
/**
* CSS classes to be added to the next pagination button
*/
class: 'btn',
/**
* Text to be displayed in the next pagination button
*/
text: `
<i class="ki-outline ki-black-right">
</i>
`,
},
more: {
/**
* CSS classes to be added to the pagination more button
*/
class: 'btn',
/**
* Text to be displayed in the pagination more button
*/
text: '...',
}
},
columns: {
user_id: {
title: 'Id',
// render: (item) => {
// return `
// <span class="badge badge-dot size-2 ${item}">
// </span>
// `;
// },
// createdCell(cell) {
// cell.classList.add('text-center');
// },
},
user_fullname: {
title: 'Fullname',
},
user_email: {
title: 'Email',
},
user_type: {
title: 'Type',
},
user_status: {
title: 'Status',
},
user_options:{
title: '',
render: (item) => {
return `<button type="button" name="edit" class="btn btn-warning btn-sm edit" data-id="${item}">Edit</button>
<button type="button" name="delete" class="btn btn-danger btn-sm delete" data-id="${item}">Delete</button>
`;
},
}
},
};
const dataTable = new KTDataTable(element, dataTableOptions);
dataTable.setFilter({
column: "id",
type: "text",
value: "x value",
}).redraw();
this was hard coded
remove the filter completely how do i do it ?
also how do i change my page result size i intially wanted it to be 2 but now i want it to be 5 i tried all the settings including data-datatable-page-size="5"
doesnt seem to work...
Replies (1)
Hi BizDev Apurva
Sorry for the delay. To completely remove the filter that you've applied, you have a few options:
Option 1: Set the filter value to an empty string
dataTable.setFilter({
column: "id",
type: "text",
value: "", // Empty string removes the filtering effect
}).redraw();Option 2: Clear all filters by setting an empty array
// Clear all filters
dataTable._config._state.filters = [];
// Redraw the table
dataTable.redraw();To change the page size after the datatable has been initialized, you should use the setPageSize method:
// Change page size to 5
dataTable.setPageSize(5);Thanks
