DataTables Server-side processing (5,000,000 rows)

DataTables Server-side processing (5,000,000 rows)

DataTables erver-side processing (5,000,000 rows)

DataTables’ server-side processing mode is a feature that naturally fits with Scroller. Server-side processing can be used to show large data sets, with the server being used to do the data processing, and Scroller optimising the display of the data in a scrolling viewport.

When using server-side processing, Scroller will wait a small amount of time to allow the scrolling to finish before requesting more data from the server (200mS by default). This prevents you from DoSing your own server!

This example shows Scroller using server-side processing mode and 5 million rows. Important This particular example uses ajax as a function to fake the data to show Scroller’s ability to show large data sets. It does not have a real database behind it! You would normally not use ajax as a function to generate data, but rather as a url for where to fetch the real data!

In this example we also enable the scroller.loadingIndicator option of Scroller to show the end user what is happening when they scroll passed the currently loaded data.

ID First name Last name ZIP / Post code Country
138-1 138-2 138-3 138-4 138-5
139-1 139-2 139-3 139-4 139-5
140-1 140-2 140-3 140-4 140-5
141-1 141-2 141-3 141-4 141-5
142-1 142-2 142-3 142-4 142-5
143-1 143-2 143-3 143-4 143-5
144-1 144-2 144-3 144-4 144-5
145-1 145-2 145-3 145-4 145-5
146-1 146-2 146-3 146-4 146-5
147-1 147-2 147-3 147-4 147-5
148-1 148-2 148-3 148-4 148-5
149-1 149-2 149-3 149-4 149-5
150-1 150-2 150-3 150-4 150-5
151-1 151-2 151-3 151-4 151-5
152-1 152-2 152-3 152-4 152-5
153-1 153-2 153-3 153-4 153-5
154-1 154-2 154-3 154-4 154-5
155-1 155-2 155-3 155-4 155-5
156-1 156-2 156-3 156-4 156-5
157-1 157-2 157-3 157-4 157-5
158-1 158-2 158-3 158-4 158-5
159-1 159-2 159-3 159-4 159-5
160-1 160-2 160-3 160-4 160-5
161-1 161-2 161-3 161-4 161-5
162-1 162-2 162-3 162-4 162-5
163-1 163-2 163-3 163-4 163-5
164-1 164-2 164-3 164-4 164-5
165-1 165-2 165-3 165-4 165-5
166-1 166-2 166-3 166-4 166-5
167-1 167-2 167-3 167-4 167-5
168-1 168-2 168-3 168-4 168-5
169-1 169-2 169-3 169-4 169-5
170-1 170-2 170-3 170-4 170-5
171-1 171-2 171-3 171-4 171-5
172-1 172-2 172-3 172-4 172-5
173-1 173-2 173-3 173-4 173-5
174-1 174-2 174-3 174-4 174-5
175-1 175-2 175-3 175-4 175-5
176-1 176-2 176-3 176-4 176-5
177-1 177-2 177-3 177-4 177-5
178-1 178-2 178-3 178-4 178-5
179-1 179-2 179-3 179-4 179-5
180-1 180-2 180-3 180-4 180-5
181-1 181-2 181-3 181-4 181-5
182-1 182-2 182-3 182-4 182-5
183-1 183-2 183-3 183-4 183-5
184-1 184-2 184-3 184-4 184-5
185-1 185-2 185-3 185-4 185-5
186-1 186-2 186-3 186-4 186-5
187-1 187-2 187-3 187-4 187-5
188-1 188-2 188-3 188-4 188-5
189-1 189-2 189-3 189-4 189-5
190-1 190-2 190-3 190-4 190-5
191-1 191-2 191-3 191-4 191-5
Showing 162 to 168 of 5,000,000 entries
JavascriptHTMLCSSAjaxComments (0)
The Javascript shown below is used to initialise the table shown in this example:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function() {
$(‘#example’).DataTable( {
serverSide: true,
ordering: false,
searching: false,
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 );
},
scrollY: 200,
scroller: {
loadingIndicator: true
},
stateSave: true
} );
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/scroller/1.5.1/js/dataTables.scroller.min.js
Other examples
Initialisation
Basic initialisation
State saving
Client-side data source (50,000 rows)
Server-side processing (5,000,000 rows)
API
FixedColumns integration
Select integration
Styling
Bootstrap
Bootstrap 4
Foundation
Semantic UI
jQuery UI
DataTables
DataTables designed and created by SpryMedia Ltd.
© 2007-2018 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.