How to set up scroller on server-side processing?
How to set up scroller on server-side processing?
steven408
Posts: 9Questions: 3Answers: 1
I'm populating the DataTable through an AJAX post request and want to incorporate the infinite scrolling through server-side. MY current setup is as follows:
$(document).ready(function () {
$('#example').DataTable({
processing: true,
serverSide: true,
select: true,
deferRender: true,
responsive: true,
scroller: true,
scrollCollapse: true,
scrollY: 700,
colReorder: true,
ajax: {
"url": '/Browse/GetRecordsAsync',
"type": 'POST',
},
columns: [
{ "data": "name",},
{ "data": "occupation" },
{ "data": "salary" },
],
});
});
I've enabled the properties scroller but it's not recognizing the table is being scrolled. I believe the right approach is to use setTimeout and callback but am not sure how to call that with my current setup.
The documentation shows the setTimeout and callback methods here.
ajax: function ( data, callback, settings ) {
var out = [];
for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
out.push( [ i+'-1', i+'-2', i+'-3', i+'-4', i+'-5' ] );
}
setTimeout( function () {
callback( {
draw: data.draw,
data: out,
recordsTotal: 5000000,
recordsFiltered: 5000000
} );
}, 50 );
},
In other words, how do I use the setTimeout and callback when I'm currently using an ajax url to retrieve my data,
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
You are referring to this example. That example uses a simulated ajax request and the setTimeout is used to simulate the delay. You wouldn't use it in a real environment.
The Scroller Initialization doc provides a list of options needed. Here is a simple Server Side Processing example with scroller:
http://live.datatables.net/gexicaca/1/edit
Looks like your code should work. Can you post a link to your page or a test case replicating the issue? You can update my example.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I believe the problem could possibly be the jquery or bootstrap files I'm using through https://getbootstrap.com/docs/4.3/getting-started/download/.
Note: I've found that the jquery-3.3.1.slim.min.js file conflicts with the DataTables some reason in which jquery is not recognized. I had to switch this out with "https://code.jquery.com/jquery-3.3.1.js"
Using the files from bootstrap, the referenced files would be:
Using the DataTables download builder, I've selected the styling framework "Bootstrap 4", the packages "DataTables", and the extensions "Scroller". This created the files:
In the end, all the reference files are as follows:
I've modified your example by using the reference files I'm using. As you can see, scrolling the table seems to have no effect. I expect the table to display a loading indicator and display the position number when the scrollbar is held.
Also, when scrolling to the very top or the very bottom, the table should display that it's attempting to get the next block of data. Your current example seems to be doing that.
Edit: Forgot to provide the link http://live.datatables.net/fonataye/1/edit
Interesting. Scroller as a
displayBufferoption that causes the server side processing request to request more rows than what is displayed on the page. By default it requests 9 pages of data. Looking at my first example it shows 5 rows per page. If you look at the XHR request headers in the developer tools > network tab it requests 54 rows:length: 54. The table has 57 rows so the scroller works on the last 3 rows.Your example is showing 9 rows and the request is for 90 rows:
length: 90. All 57 rows are fetched so there is no scroller activity. Change thescrollYsize to 100, for example, and you will see the scroller:http://live.datatables.net/tarufiqu/1/edit
With
scrollY: 700it sounds like the number of rows you have fit within thedisplayBuffercalculation. You can either adjust thescrollYoption or use thedisplayBufferoption to control the scroller.Doesn't sound like you have much data. Do you really need server side processing?
IIRC, this doesn't contain jQuery ajax() which is why it didn't work.
Kevin
Thanks for the clarification. Modifying the displayBuffer is exactly what I needed! This was just an example for proof of concept; my application needs server side processing to handle lots of data.
Is there any way to display the position number when the scrollbar is held?
Also, I've noticed the DataTables download builder includes Bootstrap 4 and jquery3. If I've selected those to construct my reference link, do I still need to include the reference files from https://getbootstrap.com/docs/4.3/getting-started/download/.
If you selected jQuery and Bootstrap 4 in
Step 2. Select packagesthey will be included in the CDN or the downloaded concatenated file. So you don't also need ot include them from https://getbootstrap.com/docs/4.3/getting-started/download/ .None I know of but maybe @allan or @colin can provide directions.
Kevin
To clarify this point:
jQuery Slim doesn't include support for
$.ajax(). Animation is also removed in their silm version, which is why DataTables when used with jQuery slim and ourajaxoption won't work.Scroller should automatically show a label next to the scrollbar when you click and drag the scrollbar - this example shows that.
Allan
@kthorngren : Kevin the example which you have shown, in that particular example,
can i see the "ajax": "/ssp/objects.php", file.. Did you had to write special parameters for it to process data. I am facing the issue that serverSide is not working for daata beyond 50K records.
Is it required that the stored procedure shud give us only few chunks of data for each requsest?
@kthorngren :To update you: i am using the Scroller feature .
See the answers in your other two threads asking the same questions.
Kevin
{"draw":0,"recordsTotal":57,"recordsFiltered":57,
"data":[
{"first_name":"Tiger","last_name":"Nixon","position":"System Architect","office":"Edinburgh","start_date":"25th Apr 11","salary":"$320,800"},
{"first_name":"Garrett","last_name":"Winters","position":"Accountant","office":"Tokyo","start_date":"25th Jul 11","salary":"$170,750"},
{"first_name":"Ashton","last_name":"Cox","position":"Junior Technical Author","office":"San Francisco","start_date":"12th Jan 09","salary":"$86,000"},
{"first_name":"Cedric","last_name":"Kelly","position":"Senior Javascript Developer","office":"Edinburgh","start_date":"29th Mar 12","salary":"$433,060"},
{"first_name":"Airi","last_name":"Satou","position":"Accountant","office":"Tokyo","start_date":"28th Nov 08","salary":"$162,700"},
{"first_name":"Brielle","last_name":"Williamson","position":"Integration Specialist","office":"New York","start_date":"2nd Dec 12","salary":"$372,000"},
{"first_name":"Herrod","last_name":"Chandler","position":"Sales Assistant","office":"San Francisco","start_date":"6th Aug 12","salary":"$137,500"},
{"first_name":"Rhona","last_name":"Davidson","position":"Integration Specialist","office":"Tokyo","start_date":"14th Oct 10","salary":"$327,900"},
{"first_name":"Colleen","last_name":"Hurst","position":"Javascript Developer","office":"San Francisco","start_date":"15th Sep 09","salary":"$205,500"},
{"first_name":"Sonya","last_name":"Frost","position":"Software Engineer","office":"Edinburgh","start_date":"13th Dec 08","salary":"$103,600"},
{"first_name":"Jena","last_name":"Gaines","position":"Office Manager","office":"London","start_date":"19th Dec 08","salary":"$90,560"},
{"first_name":"Quinn","last_name":"Flynn","position":"Support Lead","office":"Edinburgh","start_date":"3rd Mar 13","salary":"$342,000"},
{"first_name":"Charde","last_name":"Marshall","position":"Regional Director","office":"San Francisco","start_date":"16th Oct 08","salary":"$470,600"},
{"first_name":"Haley","last_name":"Kennedy","position":"Senior Marketing Designer","office":"London","start_date":"18th Dec 12","salary":"$313,500"},
{"first_name":"Tatyana","last_name":"Fitzpatrick","position":"Regional Director","office":"London","start_date":"17th Mar 10","salary":"$385,750"},
{"first_name":"Michael","last_name":"Silva","position":"Marketing Designer","office":"London","start_date":"27th Nov 12","salary":"$198,500"},
{"first_name":"Paul","last_name":"Byrd","position":"Chief Financial Officer (CFO)","office":"New York","start_date":"9th Jun 10","salary":"$725,000"},
{"first_name":"Gloria","last_name":"Little","position":"Systems Administrator","office":"New York","start_date":"10th Apr 09","salary":"$237,500"},
{"first_name":"Bradley","last_name":"Greer","position":"Software Engineer","office":"London","start_date":"13th Oct 12","salary":"$132,000"},
{"first_name":"Dai","last_name":"Rios","position":"Personnel Lead","office":"Edinburgh","start_date":"26th Sep 12","salary":"$217,500"},
{"first_name":"Jenette","last_name":"Caldwell","position":"Development Lead","office":"New York","start_date":"3rd Sep 11","salary":"$345,000"},
{"first_name":"Yuri","last_name":"Berry","position":"Chief Marketing Officer (CMO)","office":"New York","start_date":"25th Jun 09","salary":"$675,000"},
{"first_name":"Caesar","last_name":"Vance","position":"Pre-Sales Support","office":"New York","start_date":"12th Dec 11","salary":"$106,450"},
{"first_name":"Doris","last_name":"Wilder","position":"Sales Assistant","office":"Sidney","start_date":"20th Sep 10","salary":"$85,600"},
{"first_name":"Angelica","last_name":"Ramos","position":"Chief Executive Officer (CEO)","office":"London","start_date":"9th Oct 09","salary":"$1,200,000"},
{"first_name":"Gavin","last_name":"Joyce","position":"Developer","office":"Edinburgh","start_date":"22nd Dec 10","salary":"$92,575"},
{"first_name":"Jennifer","last_name":"Chang","position":"Regional Director","office":"Singapore","start_date":"14th Nov 10","salary":"$357,650"},
{"first_name":"Brenden","last_name":"Wagner","position":"Software Engineer","office":"San Francisco","start_date":"7th Jun 11","salary":"$206,850"},
{"first_name":"Fiona","last_name":"Green","position":"Chief Operating Officer (COO)","office":"San Francisco","start_date":"11th Mar 10","salary":"$850,000"},
{"first_name":"Shou","last_name":"Itou","position":"Regional Marketing","office":"Tokyo","start_date":"14th Aug 11","salary":"$163,000"},
{"first_name":"Michelle","last_name":"House","position":"Integration Specialist","office":"Sidney","start_date":"2nd Jun 11","salary":"$95,400"},
{"first_name":"Suki","last_name":"Burks","position":"Developer","office":"London","start_date":"22nd Oct 09","salary":"$114,500"},
{"first_name":"Prescott","last_name":"Bartlett","position":"Technical Author","office":"London","start_date":"7th May 11","salary":"$145,000"},
{"first_name":"Gavin","last_name":"Cortez","position":"Team Leader","office":"San Francisco","start_date":"26th Oct 08","salary":"$235,500"},
{"first_name":"Martena","last_name":"Mccray","position":"Post-Sales support","office":"Edinburgh","start_date":"9th Mar 11","salary":"$324,050"},
{"first_name":"Unity","last_name":"Butler","position":"Marketing Designer","office":"San Francisco","start_date":"9th Dec 09","salary":"$85,675"},
{"first_name":"Howard","last_name":"Hatfield","position":"Office Manager","office":"San Francisco","start_date":"16th Dec 08","salary":"$164,500"},
{"first_name":"Hope","last_name":"Fuentes","position":"Secretary","office":"San Francisco","start_date":"12th Feb 10","salary":"$109,850"},
{"first_name":"Vivian","last_name":"Harrell","position":"Financial Controller","office":"San Francisco","start_date":"14th Feb 09","salary":"$452,500"},
{"first_name":"Timothy","last_name":"Mooney","position":"Office Manager","office":"London","start_date":"11th Dec 08","salary":"$136,200"},
{"first_name":"Jackson","last_name":"Bradshaw","position":"Director","office":"New York","start_date":"26th Sep 08","salary":"$645,750"},
{"first_name":"Olivia","last_name":"Liang","position":"Support Engineer","office":"Singapore","start_date":"3rd Feb 11","salary":"$234,500"},
{"first_name":"Bruno","last_name":"Nash","position":"Software Engineer","office":"London","start_date":"3rd May 11","salary":"$163,500"},
{"first_name":"Sakura","last_name":"Yamamoto","position":"Support Engineer","office":"Tokyo","start_date":"19th Aug 09","salary":"$139,575"},
{"first_name":"Thor","last_name":"Walton","position":"Developer","office":"New York","start_date":"11th Aug 13","salary":"$98,540"},
{"first_name":"Finn","last_name":"Camacho","position":"Support Engineer","office":"San Francisco","start_date":"7th Jul 09","salary":"$87,500"},
{"first_name":"Serge","last_name":"Baldwin","position":"Data Coordinator","office":"Singapore","start_date":"9th Apr 12","salary":"$138,575"},
{"first_name":"Zenaida","last_name":"Frank","position":"Software Engineer","office":"New York","start_date":"4th Jan 10","salary":"$125,250"},
{"first_name":"Zorita","last_name":"Serrano","position":"Software Engineer","office":"San Francisco","start_date":"1st Jun 12","salary":"$115,000"},
{"first_name":"Jennifer","last_name":"Acosta","position":"Junior Javascript Developer","office":"Edinburgh","start_date":"1st Feb 13","salary":"$75,650"},
{"first_name":"Cara","last_name":"Stevens","position":"Sales Assistant","office":"New York","start_date":"6th Dec 11","salary":"$145,600"},
{"first_name":"Hermione","last_name":"Butler","position":"Regional Director","office":"London","start_date":"21st Mar 11","salary":"$356,250"},
{"first_name":"Lael","last_name":"Greer","position":"Systems Administrator","office":"London","start_date":"27th Feb 09","salary":"$103,500"},
{"first_name":"Jonas","last_name":"Alexander","position":"Developer","office":"San Francisco","start_date":"14th Jul 10","salary":"$86,500"},
{"first_name":"Shad","last_name":"Decker","position":"Regional Director","office":"Edinburgh","start_date":"13th Nov 08","salary":"$183,000"},
{"first_name":"Michael","last_name":"Bruce","position":"Javascript Developer","office":"Singapore","start_date":"27th Jun 11","salary":"$183,000"},
{"first_name":"Donna","last_name":"Snider","position":"Customer Support","office":"New York","start_date":"25th Jan 11","salary":"$112,000"}]}