Closed cschnelting closed 7 years ago
Could you post a copy of your tables constructor object so i have something to test againse.
Cheers
Oli
I Cant seem to replicate the issue you are having.
Do you have any details of the version of Tabulator you are using, and on which browser you are having issues?
Hi Oli,
I've tested on the following browsers:
My Tabulator-Version is 3.1 from 26.06.17 and this is my table constructor:
$(function() {
$("#grid").tabulator({
height:"85vh",
fitColumns:true,
movableColumns: true,
persistentLayout:"cookie",
persistentLayoutID:"myGrid",
selectable:1,
selectablePersistence:false,
pagination:"remote",
paginationSize:25,
ajaxURL:"../query?relation=myGrid",
columns:[
{title:i18n('id'), field:"id", sorter:"string", headerFilter:true, editor:ajaxFilterInput, editable:notEditable},
{title:i18n('typ'), field:"typ", sorter:"string", headerFilter:true, editor:ajaxFilterInput, editable:notEditable},
{title:i18n('status'), field:"status", sorter:"string", headerFilter:true, editor:ajaxFilterInput, editable:notEditable},
{title:i18n('datum'), field:"datum", sorter:"string", headerFilter:true, editor:ajaxFilterInput, editable:notEditable},
],
});
setAjaxFilterOnEnter();
});
var ajaxFilterInput = function input(cell, onRendered, success, cancel, editorParams) {
//create and style input
var input = $("<input type='text' class='ajax-filter'/>");
input.css({
"padding": "4px",
"width": "100%",
"box-sizing": "border-box"
});
//filter Table on ENTER
input.keypress(function(e){
if(e.which == 13) {
var tabulator = $('#' + $(this).closest(".tabulator")[0].id);
var params = {};
var columns = tabulator.tabulator("getColumns");
// generate parameter's list
var tabulatorId = "#" + tabulator.attr('id');
var fields = $(tabulatorId + " .tabulator-header-filter .ajax-filter");
for(i = 0; i < fields.length; i++) {
var element = $(fields[i]);
var key = columns[i].getField();
if(element.val() !== ""){
params[key] = element.val();
} else {
delete params[key];
}
}
// get the original ajaxURL
var ajaxURL = tabulator.tabulator("option").ajaxURL;
// perform the ajax call
tabulator.tabulator("setData", ajaxURL, params);
}
});
return input;
};
function setAjaxFilterOnEnter() {
//all header-filter input fields
var fields = $(" .tabulator-header-filter .ajax-filter");
for(i = 0; i < fields.length; i++) {
// for each input-field diasble automatic-filtering
// only allow filter on ENTER-Key
var element = $(fields[i]);
element.off("keyup search");
}
}
Hi Oli, did you find a solution for this issue?
Hey sorry, i mistakenly closed this issue.
is the ajaxFilterInput just for use in the header filter or is that used as an editor as well?
Hi, yes the ajaxFilterInput is just for header-filter Input. Because of this, I have set each column to editable:notEditable.
you can pass that editor directly into the headerFilter option
Based on your code i have a couple of questions for you.
Is there a reason you have chosen to force the persistentLayout option to cookie rather than using true which lets it choose the most appropriate option for the browser
You appear to be running a localization function on your column titles. Did you know that Tabulator has localization built in and can handle this for you. checkout the Localization Documentation for more information
With regards to the Tabbing issues you have been experiencing, I dont seem to have any issue on any browsers, i cam tab between the header filters without any issue, this seems to suggest that it is caused by something else on the page. I would suggest that you try setting up your tabulator in a blank page and see if the issue is still there, to isolate where it is coming from.
The only issue i did notice was that as you tab between header filters the selection is lost, this is because leaving a header filter element triggers a filter and because you have set selectablePersistence:false the selection gets cleared.
Are you using the latest 3.1.5 version of Tabulator?
Cheers
Oli
Hi, I have updatet tabulator v 3.1 to v 3.1.5 and changed my column-definitions to: headerFilter:true, editor:ajaxFilterInput, editable:notEditable --> headerFilter:ajaxFilterInput
This seems to solve my issue! Thank you!
Hi, i have an error with tab-switching between the header-input-fields. At first, i can switch between the input-fields by pressing the tab-key. But after I've selected any table-row of my table-data, it's not possible to switch the input-fields by tab. Also wehn I deselect the table-row. Do you have an idea why?