Scroller — DataTables forums Thu, 29 Jul 2021 01:58:28 +0000 en Scroller — DataTables forums en SemanticUI Scrolls body but not headers Tue, 27 Jul 2021 05:07:11 +0000 Scroller davidjmorin 69195@/forums/discussions Trying to get the scoller to scroll everything and not just the body.

        deferRender:    true,
    scrollY:        200,
    scrollCollapse: true,
    scroller:       true,
        fixedHeader: true,
serverside scrollY not work in Datatable 1.10.8 Sun, 04 Jul 2021 09:11:48 +0000 Scroller faboc 68955@/forums/discussions Hi Allan,
I have a problem with scrollY serverside. It not works.
I'm using DataTable 1.10.8.
the serverside is work fine when i click the page number. But i dont wanna page number. i wanna scrollY.

Is there changing code in "jquery.Datatable.js" or the code below. So, the scrollY can work.

here is the code :

                    "processing": true,
                    "serverSide": true,
                    scrollY:        persen_height,
                    deferRender:    true,
                    scroller:       true,
                      scroller: {
                        loadingIndicator: true
                               "url": "cobatable_ajx.php",
                               "dataType": "json",
                                        "cekautoexc": 1
                               "type": "POST",
                    "columns": [
                          { "data": "0" },
                          { "data": "1" },
                          { "data": "2" },
                          { "data": "3" },
                          { "data": "4" },
                          { "data": "5" },
                          { "data": "6" },
                          { "data": "7" },
                          { "data": "8" },
                          { "data": "9" },
                          { "data": "10" },
                          { "data": "11" },
                          { "data": "12" },
                          { "data": "13" },
                          { "data": "14" },
                          { "data": "15" },
                          { "data": "16" },
                          { "data": "17" },
                          { "data": "18" },
                          { "data": "19" },
                      ] ,
                    "aoColumnDefs": [
                          { "bVisible": false, "aTargets": [ 0 ] }
                    "bFilter": true,

Note : If i'm using DataTable 1.10.25, the scrollY in serverside works. i have try it. But i can't change version because the display not same with Datatable 1.10.8 (like the header,footer not same). i'm using JqueryUI with bootstrap 2.3.

Thank You,


Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Virtual scroller for both rows and columns Mon, 31 May 2021 14:37:17 +0000 Scroller Wng 68509@/forums/discussions I have a large dataset which need to show people as rows and dates as columns. I wonder if it's possible to use Scroller for virtual scrolling both vertically and horizontally. Has anyone ever used Scroller in this case? Thanks in advance.

dataTables_info count only gets accurate after changing window size Thu, 20 May 2021 20:31:56 +0000 Scroller smohanty 68390@/forums/discussions Link to test case:
Debugger code (
Error messages shown:
Description of problem:


I have a question about the dataTables_info div. This is the one on the bottom-left part of the table that shows "Showing X to Y of N entries".

I'm noticing by default that the "Y" value is double of the rows in the viewport of what my table is. So in other words, say my table loads with 10 rows by'll say "showing 1 to 20 rows...". Then - upon scrolling down it'll keep this 20 row range.

I noticed upon resizing the window (even just minimizing and re-maximizing) ..that the correct value of "showing 1 to 10 rows.." is displayed.

I'm using scrolly:730px and I have all my rows' no-wrap enabled so that they are the same height. Anybody know what's going on?


How to scroll to selected row from filtered list on unfiltered list Tue, 04 May 2021 00:05:13 +0000 Scroller prime_factors 68200@/forums/discussions <script type="text/javascript" src="auditlog.js"></script> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="DataTables/datatables.min.js"></script> <script type="text/javascript" src="DataTables/Scroller-2.0.3/js/dataTables.scroller.min.js"></script> <script type="text/javascript"> var scrollPosition = 1234; // total number of log entries </script> <script type="text/javascript"> $(document).ready(function () { var table = $('#example').DataTable({ data: logdata, columns: [ { data: 'date', className: 'no-wrap' }, { data: 'msgId' }, { data: 'type', }, { data: 'msg' }, { data: 'userID', "visible": false }, { data: 'host', "visible": false }, ], deferRender: true, scrollY: '60vh', scrollCollapse: true, scroller: true, initComplete: function () { this.api().scroller.toPosition(scrollPosition); }, }); $('#example tbody').on('click', 'tr', function () { // what do I do here to scroll to the selected row after search cleared?'').draw(); // this may not be correct }); }); </script>

Description of problem: For listing log messages, we initially show all log entries sorted by date and scroll to the bottom (most recent). We want to use search to locate a log entry and then have clicking on the row clear the filter and scroll to the row we clicked on so we can review the adjacent log entries around the entry we clicked on in the filtered list. I lack jQuery expertise and haven't found any examples to do this...suggestions would be most appreciated.


Can't find docs on Scroller Extension's event Tue, 04 May 2021 05:11:10 +0000 Scroller mending3 68201@/forums/discussions Link to test case:
Debugger code (
Error messages shown:
Description of problem:

I want to use a given event to increase an integer variable while leveraging (ajax) server side

for example if the scroll reaches the lowermost, it re fetches ajax data. it goes so on and so forth until no data is received

code example:

let page = 1
    scroller: true,
    ajax: `${apiUrl}/mydata?page=${page}`

AFAIK, it's all doable with such events

ScrollY: misaligned table headers with bootstrap Sat, 01 Apr 2017 01:20:09 +0000 Scroller philip 41587@/forums/discussions With ScrollY enabled, our table headers are misaligned (too narrow). We have multiple tables but only the first has correct alignment while the others do not. Clicking a table header (to sort by column) causes the header for that table to resize correctly.

I've seen related issues but cannot resolve, and another user reported a similar issue (and includes a functional example that demonstrates the problem) although they use a bootstrap modal. Click their modal to see what I see:

I also use bootstrap and think it's related. Disabling ScrollY solves the alignment problem.

Related settings: "scrollY": '50vh', "scrollX": true, "scrollCollapse": true,

0 appearing on page load when scroller is on, disappears as soon as user clicks anywhere. Tue, 20 Oct 2020 20:06:42 +0000 Scroller bfarkas 65020@/forums/discussions I have scroller enabled and ben playing around. When I have it enabled, a 0 frequently shows in the bottom leftcorner of the table on page load. Once you click anywhere on the table it disappears completely. If I disable scroller it stops showing at all.

How to change or remove the Scroller background style? Wed, 12 Aug 2020 15:11:06 +0000 Scroller divad.thgirbla 63749@/forums/discussions We just started using the Scroller extension and would like to change the default background styling from diagonal alternate stripes to just plain white. I've been trying to change it through JQuery but with no luck. The default html and css looks like this:

<div class="dataTables_scrollBody" style="position: relative; overflow: auto; height: 300px; width: 100%;">

div.dts div.dataTables_scrollBody {
    background: repeating-linear-gradient(45deg, #edeeff, #edeeff 10px, #fff 10px, #fff 20px);

I've tried different variations of each of the following with no change in the results:

         $("div.dts div.dataTables_scrollBody").css("background","");
         $(".div.dts .div.dataTables_scrollBody").css("background","");  

I think the first one should have worked but it didn't. The only time I get any type of result is if I try:

         $("div.dts div.dataTables_scrollBody").removeAttr('style');

but that just removes all of the style attributes from the div except for the width:100%. The css from the class definition remains the same.

What am I doing wrong?


Scroller & stateSave doesn't work Tue, 28 Jan 2020 08:42:56 +0000 Scroller 60175@/forums/discussions Hi,

I would like to report that State saving doesn't work with Scroller. After the page refresh Scroller cannot find proper position and stays at the beginning of table.

Steps to reproduce:
1. scroll or scroll-jump to some position in table
2. refresh the page
3. table is blank and scroller at the beginning

You can test it out even at the example page:

I tried to do some debugging but with no luck. Anyway I found out that state restoring is not triggered because of condition failing: this.s.dt.oLoadedState.iScroller is always undefined.(see image). Maybe it will help.

Upgrade on scroller issue Mon, 18 Nov 2019 22:52:32 +0000 Scroller Bindrid2 59175@/forums/discussions I upgraded from DataTable 1.10.18 to 1.10.20 and scroller 1.5.0 to 2.0.1.
As soon as I did, the scroller will only display the default size of a page, ten rows even though there are over 500 rows in the dataset.

I created an example on live datatable to illustrate my issue:

You will see here that there are 550 rows but I can see only the first ten inside the scroller.

Any ideas?

Thanks, Scott.

Scroller compatibility with BS3 and FixedColumns Thu, 02 May 2019 00:38:36 +0000 Scroller kthorngren 56131@/forums/discussions Using the latest from the Download Builder it looks like there is an incompatibility between Scroller, FixedColumns and BS3. The header is fixed but the tbody is not:

Comment out scroller: true and FixedColumns works.

The same config but without BS3 Scroller and FixedColumns works together:

Seems to be a problem with BS4 also:


display processing in middle of current scroll position Tue, 26 Feb 2019 11:57:18 +0000 Scroller mgi 55065@/forums/discussions Hi,

I am struggling with displaying processing indicator, when I have scroll X enabled . I want it to be in a middle of current scroll position.

With position: absolute; it stays at the beginning of the table, with position: fixed; it is moving with scroll bar, but when you resize table it is not in the middle of table anymore.

Here is jsFiddle:

Thanks for help

scrollTo function doesn't work using server side pagination Thu, 07 Feb 2019 23:39:42 +0000 Scroller pamulapati 54792@/forums/discussions I'm using pagination server side processing. I tried using scrollTo function to specific row its seems like works for 1st page, anything after 1st page is not working as expected. Its just showing loading message when I scroll instead of going to the row where i specified in scrollTo function.
My main intention is to make scroller go to the row where error occured.
Is there any suggestion for disable the scrollbar when any error occurs on the row?

row().scrollTo() not working Thu, 05 Jul 2018 19:34:20 +0000 Scroller jfr 50641@/forums/discussions Hi
I am trying the example for scrollTo and does not seem to work
It should point to record 1000 but does not move

Having the same problem with my program


Server Side Processing? Sat, 17 Nov 2018 00:50:27 +0000 Scroller saidulu 53188@/forums/discussions Hi @allan,

We are facing few issues in our application.
we have implemented data table on server side("serverSide" : true) to fetch the data from back-end ,
=> The issue is arising when we are updating a single row and clicking outside of the row, it is calling to the back-end.

=> The expected result is, we should be able to update multiple records, and the table should be updated only after clicking the save button.

the below given link is the reference to the code format that we are using in our application

I have got the below examples from the datatable website, but the issue we are facing haven't been resolved even after using these references

So, can you please suggest us any particular method to resolve the above mentioned issue.


Isssue in Serverside Scroller? Mon, 12 Nov 2018 23:33:52 +0000 Scroller saidulu 53091@/forums/discussions Hi @allan ,

In my application we implemented Scroller for that we are using (serverside: true) event to getting the data from the backend.
when we scroll down the Ajax call hit POST method and the data coming but I am using inline editable also, so in my application I created a PUT method in backend ,so when we update the field the Ajax call went to POST method. But my expected result is it need to went PUT method.
I need suggestion while updating any field need to stop POST call and to invoke the PUT call. For this I didn't create any test case , but I referred data table example .so in that example also while updating the field the call goes to POST call only.


This is the example we are referring
Please suggest on this


Scrolling by row Mon, 12 Nov 2018 20:53:39 +0000 Scroller PIKSTANG 53086@/forums/discussions I'm aware of being able to scroll to a specific row, but not really sure what event I can attach to for scrolling (both via the scrollbar and arrows + page up/down buttons).

Is it possible to control scrolling such that it will "snap" to whole rows?

Make scrollbar visible always Wed, 18 Jul 2018 14:20:16 +0000 Scroller pettedemon 50906@/forums/discussions Hi,
it is possible to make scrollbar always visible?

Odd rows with Bootstrap 4 and Scroller Wed, 13 Sep 2017 22:54:30 +0000 Scroller Loren Maxwell 44685@/forums/discussions Hey Allan,

I thought it was just the implementation on my site, but after looking at the example I see where the odd rows with Bootstrap 4 and the Scroller have the "transparent" look:

Is there a Scroller configuration property for "no records found"? Thu, 28 Sep 2017 23:09:23 +0000 Scroller rdm 44973@/forums/discussions Is there a Scroller configuration property for "no records found"?

Rather than what you see in the screenshot, is there a way to make the "loading" background image not appear when there are no records returned, or maybe something user-friendly that says "No records found"?

Scroller Extension - Client-side data source with debounce scroll event Fri, 07 Jul 2017 17:43:53 +0000 Scroller tpraj 43430@/forums/discussions Hi,

Thank you for making this awesome library. I have a question:

In the scroller extension with server-side processing example:

When the user drags the scrollbar handle violently (moving it up or down inside the scrollbar track), the table shows the loading indicator until the user stops moving the scrollbar and only then does it display the data. This allows for a very smooth scrolling experience. I believe what is done here is debouncing, whereby the table waits until there's no more scrolling activity, waits for a brief period, then begins to render the page.

I've implemented a client-side data source with the scroller extension:

   scroller: { loadingIndicator: true }, 
   deferRender: true,
   paging: true,
   processing: true,
   ... other datatable options...

And realized the debouncing mechanism isn't performed when I drag the scroll handle violently.

My question is:
Is it possible to have debounced scrolling with a client-side data source using the scroller extension?

I found previous discussions around this topic:

  1. What is SlickGrid doing differently to make its virtual scrolling so smooth?

  2. DataTables Scroller, Debouncing Scroll Events and requestAnimationFrame

In the 2nd discussion, I believe you mentioned debouncing the scroll event regardless of the data-source (server-side or client-side) would be a good idea. Is there any update on this? :smile:

I understand you have an infinitely long list of new features/requirements to add into the library, I don't mind hacking the internals of the library, if you could show me where I could find the debouncing scroll event on the server side code and also roughly where in the scroller extension client-side code does it start drawing to the dom the new elements , that would be awesome!

Thanks for everything,

Scroller causes fixed width Sun, 22 Jan 2017 05:38:53 +0000 Scroller hbanaharis 40148@/forums/discussions When I use Scroller the width is set to 980px and creates a lateral scrollbar.

Is there a way to adjust the width whilst using Scroller?

Restore scroller position on Back? Tue, 29 Nov 2016 19:54:02 +0000 Scroller OllieJones 39186@/forums/discussions I'm using DataTables (1.10.12) with the Scroller option and server side delivery of data.

Some of my data items contain hyperlinks to pages with details. The user chooses a hyperlink, then looks at the detail, then hits the Back button.

Is there a good way (or even a bad way) to restore the current scrolling position when the DataTables page is restored on the Back button?

(I can change the hyperlinks to target="_blank" but my users seem to prefer changing the present page.)

Scroller incorrect behavior Fri, 25 Nov 2016 07:44:05 +0000 Scroller Werner_Iten 39106@/forums/discussions Hello.

I have decided to use Scroller for table.
Faced with incorrect length value.

Here is an example -

As you can see I set total records to 33 but it loads 54 records from start because of incorrect length value.

My question is: how length is calculated and how to fix the issue?

Thank you.

Using ajax.reload(null, false) with scroller and server side. Tue, 15 Mar 2016 18:00:47 +0000 Scroller smotics 33850@/forums/discussions Hello. I'm using DataTables last version, and when I use the the API ajax.reload(null, false) (to not reset paging) as you show on the api example page, the table redraw two times and the scroll of the table goes to the top.
Example: I scroll the table one time, and the if I reload the page, the StateSave, save the table scroll, that's ok, but if I scroll the table one time and than for example I edit a row and than call ajax.reload(null, false), the table reload two times, and on the second reload I lost the scroll position, and the table scroll goes to the top.
Thank you.

dataTables_scrollFootInner disappears on reinit Thu, 26 May 2016 13:31:02 +0000 Scroller yishayh 35291@/forums/discussions Hi,

We have a angular based datatable that we develop ourselves.
We noticed that the dataTables_scrollFootInner div disappears when we reinit the table.
Any idea what can cause such a thing?


Infinite Scroll: Scroll to Row # not currently loaded in the DOM Thu, 05 May 2016 22:22:28 +0000 Scroller Danielp 34888@/forums/discussions Hi,

I'm using DataTables, Editor, and Scroller on a page using Server Side Infinite Scroll. I can use the following to scroll to row number 80 and selected it as long as the table row is currently in the DOM.


However, If I try going to row number 90 nothing happens as row number 90 is not currently loaded into the DOM.


I have looked all over the forums and stackoverflow and I have found nothing that works or addresses my situation.

I need to be able to jump to or scroll to a result row regardless if it is currently loaded into the DOM or not. Are there any pointers you have give?



Export all data after filtering with Scroller display buffer Mon, 25 Apr 2016 07:41:57 +0000 Scroller pdring 34656@/forums/discussions Hello,

I am using Scroller with a display buffer to load information progressively. If I use the filter for a specific term, it can return 400 entries but of course only a handful are displayed in the buffer and so only these are exported when I click my Excel button.

Is there a way to load all of the filtered entries when I click on the export button and return all 400 lines? I'd like to use the function elsewhere and so it would also be great to know where to find the variable that stores the references to the 400 entries.

Thanks :)

Infinite scroll sends NaN for Start and Length values until window is resized Thu, 14 Jan 2016 16:51:15 +0000 Scroller Danielp 32538@/forums/discussions Hi,

I have a strange situation with Infinite scroll. When my table first loads it sends the populated integer values for both or Start and Length back to the server. However, On every subsequent data fetch made to the server when scrolling datatables is sending a value of NaN for the Start and Length values. It does this until the window/view gets resized.

So if I open up the Developer tools window in the footer of Firefox or simply grab the corner of the browser window and resize it then things start working normally. I see no errors reported in the web console and everything works fine once the the re-sizing of the view/window triggers something in the datatables code.

Any help would be welcome. A Hack to simulate the window resize may do it but I have not had any luck so far.