When attempting to sort or filter data received via AJAX nothing happens except of getting a new request to the server. Even if try to trigger events such as: .trigger("update", [resort])
or .trigger("sorton", ...)
. If I use it without ajax it works perfectly.
$(function () {
if (Modernizr.touch) {
// make table cell focusable
var $focus_highlight = $('.focus-highlight');
if ($focus_highlight.length) {
$focus_highlight
.find('td, th')
.attr('tabindex', '1')
.on('touchstart', function () {
$(this).focus();
});
}
}
// list view
altair_issues.list_view();
});
altair_issues = {
list_view: function () {
var $ts_issues = $("#ts_issues");
// define pager options
var pagerOptions = {
// target the pager markup - see the HTML block below
container: $(".ts_pager"),
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: true,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// go to page selector - select dropdown that sets the current page
cssGoto: '.ts_gotoPage',
processAjaxOnInit: false,
updateArrows: false,
ajaxUrl: $ts_issues.data('ajax') + "?page={page}&size={size}",
ajaxObject: {
type: 'POST',
data: getFormFilterData(),
dataType: 'json',
beforeSend: function (xhr, settings) {
taskListPreloader('open');
let QueryDataForSearch = $.param($('#tasks-filter-form').serializeArray());
// Второй вариант - '&TasksFilterForm%5BbShowFilters_%5D=' + 2 это игнорирования куки вообще!
let targetProject = ((new URL(window.location.href)).searchParams).get('target-project');
(targetProject === null) ? settings.data = QueryDataForSearch : settings.data = QueryDataForSearch += '&TasksFilterForm%5BbShowFilters_%5D=' + 2;
}
},
ajaxProcessing: function (data, table, xhr) {
taskListPreloader('close');
if (data.status) {
let result = {
total: data.pager.total ?? 0
};
$.tablesorter.storage($('table'), 'tablesorter-pager', '');
console.log(data.html.tasks);
$(".tasks-list-table").html(data.html.tasks).trigger("update").tablesorterPager(pagerOptions);
if (data.description.length) {
bottomToast(data.description, "danger");
}
updatePagination(result.total);
return result;
} else {
bottomToast(data.description, "danger");
}
},
ajaxError: function (config, xhr, settings, exception) {
console.log("Ajax Error:");
console.log("Config:", config);
console.log("XHR:", xhr);
console.log("Settings:", settings);
console.log("Exception:", exception);
taskListPreloader('close');
}
};
// Initialize tablesorter
var ts_users = $ts_issues
.tablesorter({
theme: 'altair',
widthFixed: true,
widgets: ['zebra', 'filter'],
})
As I sad I tried to trigger different events(not only from ajaxProcessing
) but it didnt make sense. I also tried to disable serverSideSorting
but it didnt work.
Никита Ткачук is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.