We Keep Coding

stop tabulator ajax calls from scrolling window to top of page

I have the tabulator plugin set up and working with my data. Currently, using the remote pagination feature but whenever the pagination buttons are clicked it loads the data and then scrolls to the top of the page. The pagination buttons do not contain href="#" so it shouldn't be trying to load a browser state.
The really odd thing is it is doing this behavior on any ajax call I make relative to tabulator. I used the setData function to load updated data and it scrolled to the top of the page again.
Here's a very simplified version of my code:
<div id="#tabulator"></div>
<script>
$("#tabulator").tabulator({
movableColumns: true,
layout: "fitColumns",
pagination: "remote",
paginationSize: 10,
ajaxURL: "rosterusers_tabulator_data-json.cfm",
ajaxParams: {/* url params here */},
columns: [/* columns set here*/]
});
/*then I have a modal dialog update event which calls the following*/
$("#tabulator").tabulator(
"setData",
"rosterusers_tabulator_data-json.cfm",
{/*url params here*/}
);
</script>
I don't think I'm doing anything bizarre here but each time the table data gets updated via ajax in anyway (page change, data change, filter change, etc.) it scrolls to the top of the page.

Here is solution for various scroll to top related issues. It involves extending the tabulator.js with two functions:
Tabulator.prototype.getVerticalScroll = function () {
var rowHolder = this.rowManager.getElement();
var scrollTop = rowHolder.scrollTop;
return scrollTop;
}
Tabulator.prototype.setVerticalScroll = function (top) {
var rowHolder = this.rowManager.getElement();
rowHolder.scrollTop = top;
}
Then get and set like this:
let pos = table.getVerticalScroll();
// do table management e.g. setColumns
table.setVerticalScroll(pos);

The replaceData function can be used to set data in the table without changing the scroll position:
$("#example-table").tabulator("replaceData", "rosterusers_tabulator_data-json.cfm")

Show loading gif when DataTable has been cleared

I have several options for my JQuery datatable which will clear the DataTable and load new data via WebSockets. Therefore I clear the Table contents with fnClearTable()and a few moments later I get the new data via my WebSocket.
This can last up to a few seconds and in the meantime I would like to display a loading image in my DataTable. How can I achieve this?
My event handler which clears the DataTable:
/* On Daterange change (e.g. Last 3 Days instead of Last 24h) */
$('#profitList_dateRange').change(function() {
var dateRangeHours = $("#profitList_dateRange").val();
var jsonParamObject = JSON.parse(dateRangeHours);
// Clear table
var profitList = $('#profitList').dataTable();
profitList.fnClearTable(); // Now I want to show the loading image!
socket.emit('load-statistics', (jsonParamObject));
});

One way to achieve it is if you have 2 divs (I assume that your divs are properly styled to the content inside of them):
<div id="profitList"> your table content </div>
<div id="profitListLoading"> show loading here </div>
Then in your handler:
$('#profitList_dateRange').change(function() {
var dateRangeHours = $("#profitList_dateRange").val();
var jsonParamObject = JSON.parse(dateRangeHours);
// Clear table
var profitList = $('#profitList').dataTable();
profitList.fnClearTable(); // Now I want to show the loading image!
$('#profitList').hide();
$('#profitListLoading').show();
socket.emit('load-statistics', (jsonParamObject));
});
In your handling of loaded data you should ofc. revert the change
$('#profitList').show();
$('#profitListLoading').hide();

Make sure you have processing: true
$('#example').dataTable({
processing: true
});
Then add:
$('.dataTables_processing', $('#example').closest('.dataTables_wrapper')).show();
If you want to add a GIF image you can change the markup as follows:
$('#example').dataTable({
oLanguage: {
sProcessing: "<img src='https://d13yacurqjgara.cloudfront.net/users/12755/screenshots/1037374/hex-loader2.gif'>"
},
processing: true
});
DEMO: http://jsfiddle.net/0m6uo54t/2
processing:
Enable or disable the display of a 'processing' indicator when the
table is being processed (e.g. a sort). This is particularly useful
for tables with large amounts of data where it can take a noticeable
amount of time to sort the entries.
https://datatables.net/reference/option/processing
[UPDATE] bProcessing is the legacy option, the new DT code uses processing

Trying to disable button in all pages in Datatables

I am using Datatables JQuery plugin in order to show data on a table.
In one of the columns I have added also a button to edit the rows.
What I am trying to do is when I click one of the buttons, to deactivate all the others.
Here is my current code together with a screenshot:
$(document.body).on("click", "._edit_save_btn",function(e){
var id = this.id; // get id of selected btn
// disable all other buttons but selected
$("._edit_save_btn").not("#"+id).prop('disabled', true);
)};
Although this works fine for the first page of data (paginated presentation), when I change page, it seems like that the property disabled is not applied.
Thus I can click any other button in order to add the property disabled.
I thought by using the on click event things would work. What am I missing here?
EDIT
The table is created automatically using DataTables jquery plugin and jquery functionality.
On page load my html structure looks like this:
<table id="example">
<thead id="table_head">
</thead>
</table>
Then the table is populated with data coming from Django. The button element looks like this:
edit_btn = '<button id="' + row_id + '" class="btn btn-info btn-sm _edit_save_btn" style="background-color:#a7a3a3;border-color:#a7a3a3">Edit</button>'
EDIT_2
This screenshot explains better what I mean with pagination and changing pages. Please check the lower right corner to see the pagination. When I go to another page (e.g. from 1 to 2) then I see that the disabled property wasnot applied for the buttons on that page:
EDIT
With the help of #Sherin Jose I have managed to reach to this point:
var disable_buttons = function(class_exists){
if (class_exists){
alert("dfdf")
$("._edit_save_btn").not(this).prop('disabled', true);
}
};
$("#example").dataTable({
"scrollX": true,
"aaData":whole_array
}).on( 'page.dt', function () {
class_exists = $("button").hasClass("clicked");
//alert(class_exists)
disable_buttons(class_exists)
});
Whenever a user clicks a button, then the button gets a class called clicked.
Then in the disable_buttons function, I check if this class exists (the 'clicked' class). If it exists I want to disable the other buttons on page change event.
The issue I am facing now is that the
on( 'page.dt', function () {
is executed before the datatable is loaded!

Try this one,
//define the disable feature as a function
var disable_buttons = function(){
$("._edit_save_btn").unbind("click").click(function(e){
// disable all other buttons but selected
$("._edit_save_btn").not(this).prop('disabled', true);
});
};
//call the above function on dataTable init and page change events like:
$("#example").dataTable({
"scrollX": true,
"aaData":whole_array,
"fnDrawCallback":function () {
disable_buttons();
}
});

Selecting row in kendo grid when virtualization is enabled

I'm using kendoUI grid widget to display dataset. Because size of dataset is quite large (200-400k) I'm using virtualization feature to improve performance and usability. When setting grid up I have faced with the following problem: because virtualization is enabled, grid DOM objects (i mean table rows here) are refreshed every time when page is changed. That implementation of grid results in the following behavior: I can select row but after scrolling down to next page and scrolling back selection disappears. Here is example where this problem can be reproduced: http://trykendoui.telerik.com/OkOg
Maybe someone has similar problem and can offer some workaround.

You can restore the selection in the grid's dataBound event, e.g. like this (note that this only works for single row selection, so you might need to adapt for other modes):
$("#grid").kendoGrid({
dataSource: dataSource,
change: function () {
this._lastSelectedItem = this.dataItem(this.select());
},
dataBound: function () {
var row;
if (this._lastSelectedItem) {
row = $(this.tbody).find("tr[data-uid='" + this._lastSelectedItem.uid + "']")
if ($(row).length > 0) {
// or this.select(row); if you don't mind the
// change event getting triggered again
$(row).addClass("k-state-selected");
}
}
},
height: 430,
scrollable: {
virtual: true
},
selectable: true,
columns: columns
});

DataTables & X-Editable making out of focus items editable

I have a working setup for data-tables and x-editable that allows a user to edit data inline in a table that gets loaded from the database. Once the page loads my code below fires and makes all the editable options editable, except it only seems to work for the first page of results. When you click next, change the number of results or do a search, any items that were not on the first page don't get made editable. I am assuming this is because data-tables hides the data that is not on the current page removing it from the document flow. How can I make sure all my data in the table is editable?
$(document).ready(function () {
$.fn.editable.defaults.mode = 'inline';
$('.LocatorID').editable();
$('.Title').editable();
$('.Latitude').editable();
$('.Longitude').editable();
$('.Website').editable();
$('.Address').editable();
$('.City').editable();
$('.State').editable();
$('.Zip').editable();
$('.Country').editable();
$('.Phone').editable();
});

First, move your x-editable setup into its own function:
function setupXedit() {
$.fn.editable.defaults.mode = 'inline';
$('.LocatorID').editable();
$('.Title').editable();
...
}
Then set so that you call the function on every draw:
$('#example').dataTable({
"fnDrawCallback": function( oSettings ) {
setupXedit();
}
});

Do like this: one $('.edit').editable(); inside Datatable fnDrawCallback and one outside .Datatable function
var table = $('#tbldivdsthietlap').DataTable({
"fnDrawCallback": function( oSettings ) {
$('.edit').editable();
}
});
$('.edit').editable();