Search Builder extension of DataTables does not save values - datatables

Question

I am using the SearchBuilder extension to filter data.
Because I am also using sever-side processing, I force a search only when the user presses the enter key, like example.
But when I click button ">" to add new criteria, the previous value is empty.
Any suggestion for me?
Here my code:
I use search:{true} to force search only search only user press enter
$table = $(`#${_options.table.id}`).DataTable({
dom: 'Blfrtip',
search: {
return: true
},
"processing": true, // for show progress bar
"serverSide": true,
"filter": true,
"pageLength": 2,
"pagingType": "full_numbers",
"ajax": {
"url": _options.table.urls.load,
"type": "POST",
"datatype": "json"
},
"ordering": true,
"order": [[2,'asc']],
//"order": [[0, 'asc'], [1, 'asc']]
"columns":[
{
"data": null,
"orderable": false,
"searchable": false,
"className": "text-center",
render: function (data, type, row, meta) {
let html = `<div class="icheck-primary input-group" style="display:block;">
<input type="checkbox" id="example1_${meta.row}">
<label for="example1_${meta.row}"></label>
</div>`;
return html;
},
searchBuilderType: 'html'
},
{
"data": "id",
"name": "Mã số",
"autoWidth": true,
"visible": false,
"searchable": false
},
{
"data": "title",
"name": "Tên danh mục",
"autoWidth": true,
searchBuilderType: 'string'
},
{
"data": "created",
"name": "Ngày tạo",
"autoWidth": true,
render: function (data, type, row, meta) {
return new Date(data).toLocaleDateString("vi-VN");
}
},
{
"data": "modified",
"name": "Ngày chỉnh sữa",
"autoWidth": true,
render: function (data, type, row, meta) {
return new Date(data).toLocaleDateString("vi-VN");
}
},
{
"data": "active",
"name": "Hoạt động",
"autoWidth": true,
"className": "text-center",
"width": "10%",
render: function (data, type, row, meta) {
let html = `<div class="icheck-primary input-group" style="display:block;">
<input disabled type="checkbox" ${data ? 'checked' : ''} id="example1_active_${meta.row}" name="terms">
<label for="example1_active_${meta.row}"></label>
</div>`;
return html;
}
},
{
"orderable": false,
"width": "15%",
"className": "text-center",
"data": null,
"render": function (data, type, row, meta) {
return `<a class="btn btn-info btn-sm" onclick="Edit('${row.id}', '${row.title}');" href="#">Edit</a> <a href="#" class="btn btn-danger btn-sm" onclick="Delete('${row.id}', '${row.title}');" >Delete</a>`;
}
}
],
"createdRow": function (row, data, dataIndex) {
let checkbox = $(row).children('td').first().find('input[type="checkbox"]');
let headerCheckbox = $($table.column().header()).find('input[type=checkbox]');
headerCheckbox.prop('checked', false);
checkbox.on('change', { rowIndex: dataIndex }, function (e) {
let checked = $(this).prop('checked');
let headerCheckbox = $($table.column().header()).find('input[type=checkbox]');
let tableId = $table.table().node().id;
let deletebutton = $(`button[aria-controls = ${tableId}][name=delete]`);
let rowIdx = e.data.rowIndex;
if (checked) {
$table.rows(rowIdx).select();
$count++;
if ($count == $table.rows().count()) {
headerCheckbox.prop('checked', true);
}
deletebutton.attr('disabled', false);
}
else {
$table.rows(rowIdx).deselect();
$count--;
if ($count == 0) {
deletebutton.attr('disabled', true);
}
headerCheckbox.prop('checked', false);
}
});
},
"initComplete": function (settings, json) {
// Add custom button into table wrapper
$table.buttons().container().appendTo(`#${_options.table.id}_wrapper .col-md-6:eq(0)`);
//Select all bycheckbox header
let headerCheckbox = $($table.column().header()).find('input[type=checkbox]');
headerCheckbox.on('change', { settings: settings }, function (e) {
let checked = $(this).prop('checked');
for (let i = 0; i < $table.rows().count(); i++) {
$($table.rows(i).column().nodes()[i]).find('input[type="checkbox"]').prop('checked', checked);
}
let deletebutton = $(`button[aria-controls = ${_options.table.id}][name=delete]`).attr('disabled', !checked);
(checked) ? $table.rows().select() : $table.rows().deselect();
});
},
"responsive": true,
"lengthChange": false,
"autoWidth": false,
language: {
searchBuilder: {
button: {
0: 'Criteria',
1: 'Criteria (one selected)',
_: 'Criteria (%d)'
}
}
},
"buttons": [
{
text: `<i class="fas fa-plus"> New</i>`,
className: 'btn btn-primary form-group',
attr: {
'name': 'new',
'style': 'background: #007bff !important; border-color: #007bff !important'
},
action: function (e, dt, node, config) {
ajaxFormAction(_options.modal.selector, _options.modal.id, 'Create new category', '/Admin/Category/Create', true, function (e) {
$table.draw();
});
}
},
{
text: `<i class="fas fa-trash"> Delete</i>`,
className: 'btn btn-danger form-group',
attr: {
'name': 'delete',
"disabled": true
},
action: function (e, dt, node, config) {
let ids = [];
let rows = $table.rows({ selected: true }).every(function (rowIdx, tableLoop, rowLoop) {
ids.push(this.data().id);
});
ids = ids.join(',');
ajaxDelete(ids, null, _options.table.urls.delete, function (e) {
$table.draw();
});
}
},
{
text: 'Filter',
className: 'btn btn-default form-group',
extend: 'searchBuilder'
}
]
})
$('<input id="example1_column" type="text" class="form-control form-control-sm" placeholder="aaaa" />').insertBefore($("#example1_filter input"));
return $table