I am using tabulator 4.7 and I have an annoying issue when I interact with tabulator objects in my page: if I perform whatever operation in a tabulator object on my page my, the page is scrolled to the top.
This occurs when I add a row, when I try to sort a column when I redo a step.
Do you have an idea on how I can avoid this scroll?
This is code of tabulator:
articleTable = new Tabulator("#SalesArticlesContainer", {
layout: "fitColumns", //fit columns to width of table (optional)
responsiveLayout: "collapse",
height:"100%",
selectable: "1",
pagination: "local",
paginationSize: 20,
groupBy:"cv_article_code",
placeholder:"Nessun articolo trovato",
addRowPos: "top",
ajaxConfig: {
method: "POST",
mode:"cors", //set request mode to cors
credentials: "same-origin", //send cookies with the request from the matching origin
headers: {
"Accept": "application/json", //tell the server we need JSON back
"X-Requested-With": "XMLHttpRequest", //fix to help some frameworks respond correctly to request
"Content-type": 'application/json; charset=utf-8', //set the character encoding of the request
"X-CSRF-Token": $("meta[name='_csrf']").attr("content"),
},
}, //ajax HTTP request type
ajaxContentType:"json",
addRowPos: "top",
tooltips:true, //show tool tips on cells
history:true,
columns: [
{formatter:"rowSelection", hozAlign:"center", width:20, headerSort:false, cellClick: function(e, cell) {
cell.getRow().toggleSelect();
}},
{title: "id", field: "id", headerFilter: "input", visible:false},
{title: "Articolo", field: "cv_article_code", headerFilter: "input", formatter: 'plaintext', width:250, validator:"required", editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}},
{title: "Seriale", field: "nr_serial", headerFilter: "input", formatter: 'plaintext', width:120, editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}, validato: "integer"},
{title: "Data arrivo", field: "dt_arrival", headerFilter: "input", sorter: "date", sorterParams: {format: "YYYY-MM-DD"}, align:"center", width:130, editor:dateEditor},
{title: "Data Controllo", field: "dt_control", headerFilter: "input", sorter: "date", sorterParams: {format: "YYYY-MM-DD"}, hozAlign:"center", width:130},
{title: "Presa pren.", field: "fg_pickup", formatter: 'tickCross', hozAlign:"center", width:30, headerVertical:true},
{title: "Data presa", field: "dt_pickup", headerFilter: "input", sorter: "date", sorterParams: {format: "YYYY-MM-DD"}, hozAlign:"center", width:130},
{title: "Spedito", field: "fg_delivered", formatter: 'tickCross', hozAlign:"center", width:30, headerVertical:true},
{title: "Data spedizione", field: "dt_shipping", headerFilter: "input", sorter: "date", sorterParams: {format: "YYYY-MM-DD"}, hozAlign:"center", width:130},
{title: "Fatt acquisto", field: "tx_purchase_invoice", headerFilter: "input", formatter: 'plaintext', width: 200, editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true, freetext:true}},
{title: "Fatt vendita", field: "tx_sales_invoice", headerFilter: "input", formatter: 'plaintext', width: 200, editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true, freetext:true}},
{title: "Note", field: "tx_note", headerFilter: "input", formatter: 'plaintext'},
{title: "Nuova", field: "fg_new", formatter: 'tickCross', hozAlign:"center", visible:false},
{formatter: trashIcon, width:25, hozAlign:"center", cellClick: function(e, cell){alert("Printing row data for: " + cell.getRow().getData().name)}},
{formatter: closeIcon, width:25, hozAlign:"center", cellClick: function(e, cell){alert("Printing row data for: " + cell.getRow().getData().name)}},
],
cellEdited:function(cell) {
var rowIndex = cell.getRow().getIndex();
var edited = articleEditedCells.get(rowIndex);
if(edited === undefined) edited = 0;
edited++;
articleEditedCells.set(rowIndex, edited);
$('#btnSaveArticles').prop("disabled", false);
$('#btnUndoArticle').prop("disabled", false);
},
historyUndo:function(action, component, data) {
if(action === 'cellEdit') {
var rowIndex = component.getRow().getIndex();
var edited = articleEditedCells.get(rowIndex);
edited--;
if (edited ===0 ) articleEditedCells.delete(rowIndex);
else articleEditedCells.set(rowIndex, edited);
}
},
rowDeselected: function (row) {
var selectedRows = articleTable.getSelectedRows();
if (selectedRows.length === 0) {
hideArticleAdminControls();
hideArticleControls();
}
},
rowSelected: function (row) {
$('#txtArticle').val(row.getData().cv_article_code);
$('#txtSerialNumber').val(row.getData().nr_serial);
$('#txtNote').val(row.getData().tx_note);
controlWarehouseButtons(row);
showArticleAdminControls();
showArticleControls();
},
ajaxResponse:function(url, params, response) {
$.unblockUI();
//url - the URL of the request
//params - the parameters passed with the request
//response - the JSON object returned in the body of the response.
if (response.length === 0) return;
else if (response.length === undefined) return;
return response; //return the tableData property of a response json object
}
});
Thank you very much.
Alessio