Scroller example Client-side data source (50,000 rows)

This example is completely artificial in that the data generated is created on the client-side by just looping around a Javascript array and then passing that to DataTables. However, it does show quite nicely that DataTables and Scroller can cope with large amounts of data on the client-side quite nicely. Typically data such as this would be Ajax sourced and server-side processing should be considered.

Please be aware that the performance of this page will depend on your browser as the array of data is generated - for example IE6 will crawl!

Search:

ID	First name	Last name	ZIP / Post code	Country
0	0	0	0	0
1	1	1	1	1
2	2	2	2	2
3	3	3	3	3
4	4	4	4	4
5	5	5	5	5
6	6	6	6	6
7	7	7	7	7
8	8	8	8	8
9	9	9	9	9
10	10	10	10	10
11	11	11	11	11
12	12	12	12	12
13	13	13	13	13
14	14	14	14	14
15	15	15	15	15
16	16	16	16	16
17	17	17	17	17
18	18	18	18	18
19	19	19	19	19
20	20	20	20	20
21	21	21	21	21
22	22	22	22	22
23	23	23	23	23
24	24	24	24	24
25	25	25	25	25
26	26	26	26	26
27	27	27	27	27
28	28	28	28	28
29	29	29	29	29
30	30	30	30	30
31	31	31	31	31
32	32	32	32	32
33	33	33	33	33
34	34	34	34	34
35	35	35	35	35
36	36	36	36	36
37	37	37	37	37
38	38	38	38	38
39	39	39	39	39
40	40	40	40	40
41	41	41	41	41
42	42	42	42	42
43	43	43	43	43
44	44	44	44	44
45	45	45	45	45
46	46	46	46	46
47	47	47	47	47
48	48	48	48	48
49	49	49	49	49
50	50	50	50	50
51	51	51	51	51
52	52	52	52	52
53	53	53	53	53
54	54	54	54	54
55	55	55	55	55
56	56	56	56	56
57	57	57	57	57
58	58	58	58	58
59	59	59	59	59
60	60	60	60	60
61	61	61	61	61
62	62	62	62	62
63	63	63	63	63
64	64	64	64	64
65	65	65	65	65
66	66	66	66	66
67	67	67	67	67
68	68	68	68	68
69	69	69	69	69
70	70	70	70	70
71	71	71	71	71
72	72	72	72	72
73	73	73	73	73
74	74	74	74	74
75	75	75	75	75
76	76	76	76	76
77	77	77	77	77
78	78	78	78	78
79	79	79	79	79
80	80	80	80	80
81	81	81	81	81
82	82	82	82	82
83	83	83	83	83
84	84	84	84	84
85	85	85	85	85
86	86	86	86	86
87	87	87	87	87
88	88	88	88	88
89	89	89	89	89

Showing 1 to 10 of 50,000 entries

Javascript
HTML
CSS
Ajax
Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() {
        var data = [];
        for ( var i=0 ; i<50000 ; i++ ) {
            data.push( [ i, i, i, i, i ] );
        }
         
        var oTable = $('#example').dataTable( {
            data:           data,
            deferRender:    true,
            dom:            "frtiS",
            scrollY:        200,
            scrollCollapse: true
        } );
    } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

Scroller example Client-side data source (50,000 rows)

Other examples

Examples