Josephin Doe
Generic placeholder image

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Generic placeholder image
Data Operations

Sorting, Paginating & Searching

Sorting
If you want to sort data in your data source array, you can simply invoke an Array.prototype.sort() function and call the render() function to refresh the table. You don't need any plugin for this. However, this operation alters the structure of the data source, and in many cases you want to leave the data source intact, while displaying its content in a specified order.Here's where column sorting plugin comes in handy. Column sorting plugin works as a proxy between the data source and the Handson table rendering module. It can map indices of displayed rows (called logical indices) to the indices of corresponding rows in data source (called physical indices) and vice versa. This way you can alter the order of rows which are being presented to user, without changing the data source internal structure.
 
A
B
C
D
1
1George WashingtonVirginiaIndependent
2
2John AdamsMassachusettsFederalist
3
3Thomas JeffersonVirginiaDemocratic-Republican
4
4James MadisonVirginiaDemocratic-Republican
5
5James MonroeVirginiaDemocratic-Republican
6
6John Quincy AdamsMassachusettsDemocratic-Republican/National Republican
7
7Andrew JacksonTennesseeDemocratic
8
8Martin Van BurenNew YorkDemocratic
9
9William Henry HarrisonOhioWhig
10
10John TylerVirginiaWhig
11
11James K. PolkTennesseeDemocratic
12
12Zachary TaylorLouisianaWhig
13
13Millard FillmoreNew YorkWhig
14
14Franklin PierceNew HampshireDemocratic
15
15James BuchananPennsylvaniaDemocratic
16
16Abraham LincolnIllinoisRepublican/National Union
17
17Andrew JohnsonTennesseeDemocratic/National Union
18
18Ulysses S. GrantOhioRepublican
19
19Rutherford B. HayesOhioRepublican
20
20James A. GarfieldOhioRepublican
21
21Chester A. ArthurNew YorkRepublican
22
22Grover ClevelandNew YorkDemocratic
23
23Benjamin HarrisonIndianaRepublican
24
24Grover Cleveland (2nd term)New YorkDemocratic
25
25William McKinleyOhioRepublican
26
26Theodore RooseveltNew YorkRepublican
27
27William Howard TaftOhioRepublican
28
28Woodrow WilsonNew JerseyDemocratic
29
29Warren G. HardingOhioRepublican
30
30Calvin CoolidgeMassachusettsRepublican
31
31Herbert HooverIowaRepublican
32
32Franklin D. RooseveltNew YorkDemocratic
33
33Harry S. TrumanMissouriDemocratic
34
34Dwight D. EisenhowerTexasRepublican
35
35John F. KennedyMassachusettsDemocratic
36
36Lyndon B. JohnsonTexasDemocratic
37
37Richard NixonCaliforniaRepublican
38
38Gerald FordMichiganRepublican
39
39Jimmy CarterGeorgiaDemocratic
 
A
B
C
D
 
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
29
30
31
32
33
34
35
36
37
38
39
 
Paginating
Add pages to your table.
A
B
C
D
E
F
G
H
I
124567890
000000000
123456789
124567890
000000000
123456789
A
B
C
D
E
F
G
H
I
Searching
The search plugin provides an easy interface to search data across Handson table. You should first enable the plugin by setting the search option to search. When enabled, searchPlugin exposes a new method query(queryStr), where queryStr is a string to find within the table. By default, the search is case insensitive. query(queryStr, [callback], [queryMethod]) method does 2 things. First of all, it returns an array of search results. Every element is an objects containing 3 properties:
  1. row – index of the row where the value has been found
  2. col – index of the column where the value has been found
  3. data – the value that has been found
The second thing the query does is set the isSearchResult property for each cell. If a cell is in search results, then its isSearchResult is set to true, otherwise the property is set to false.
A
B
C
D
Nissan2012blackblack
Nissan2013blueblue
Chrysler2014yellowblack
Volvo2015yellowgray
A
B
C
D

  • Material able Customizer

    Live customizer with tons of options

  • Main layouts

  •       

  • Menu Type

  • SideBar Effect

  • Hide/Show Border

  • Drop-Down Icon

  • Sub Menu Drop-down Icon