We Keep Coding

Reset Page On Update

I don't want reset page on update. I don't want to reset the page on update. Specifically when using forceUpdate() , I want my grid to only update the data at the current pagination.
pagination: {
enabled: true,
limit: 25,
summary: false,
resetPageOnUpdate: false,
},
I see in pagination there is "resetPageOnUpdate" attribute butBut when i use forceUpdate() it doesn't seem to work and still resets the internal partition. Help me, thanks.

I am not good at writing English. Consider it and see.
I use jquery
$(".gridjs-currentPage").text() : current page number
update before save current page data
.updateConfig({
update data...
pagination: {
setting... ,
page : current page number - 1
}
}).forceRender();

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")

jQuery Datatables - Showing 1 of X entries all the time

I've hit an issue where jQuery data tables is showing in the info bar at the bottom:
Showing 1 of X entries
This happens upon scrolling down and doesn't update the counter. The total number of records are correct, just not the position within the dataset.
Example: https://jsfiddle.net/jubq03oL/3/
Seems to also be doing this on the Scroll Y example on their site:
https://datatables.net/examples/basic_init/scroll_y.html

It appears you need the Scroller extension in order for this functionality to work.
Then changing the JavaScript call to DT enables the functionality:
$('#datatable').DataTable({
order: [[0, 'desc']],
scrollY: 350,
deferRender: true,
scroller: true
});
See the following JSFiddle:
https://jsfiddle.net/jubq03oL/6/

That number isn't suppose to change unless you have multiple pages.
See my fiddle update. I changed the following:
$('#datatable').DataTable({
order: [
[0, 'desc']
],
scrollY: 350,
pageLength: 10, // Added to show how the numbering works on multiple pages, not scrolling
paging: true,
searching: true });

Datatables highlight rows beyond the first paginated page

The Datatables plugin is giving me some issues when trying to highlight rows beyond the first paginated page.
In the JS below you will see the commented out code where I am adding the class info to all the rows. When I do this and you paginate to the other pages all the rows on the other pages are highlighted. You will also see the uncommented code below where I add the class info to all the rows but the first row but in this case when I paginate to the other pages the rows are not highlighted.
Does anyone have any ideas on why this might be happening?
JSFiddle:
https://jsfiddle.net/ebRXw/560/
JS:
$(document).ready(function () {
$('table').dataTable({
"paging": true,
"ordering": true,
"filter": false,
"length": false,
"info": false
});
var table = $("table").dataTable();
var rows = table.$("tr");
var rowsNext = table.$("tr").next();
var cell = table.$("td:nth-child(2)");
var cellNext = table.$("tr").next().children("td:nth-child(2)");
/*rows.addClass("info");*/
rowsNext.addClass("info");
});

rowsNext.addClass("info") only adds the class to the rows on the current page, and it is only run once when the page loads.
If you want to run it every time when a different page loads, you can add an event listener to the table's draw event, like this:
$("table").on("draw.dt", function(){
var rowsNext = $("table").dataTable().$("tr").next();
rowsNext.addClass("info");
});
This code will be run every time a new page is drawn.
Demo: https://jsfiddle.net/alan0xd7/ebRXw/567/

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
});