DataTable perfect table

jQuery DataTable + Bootstrap + Boo = a powerful combination to display your data

Base Datatable .boo-table

apply class .boo-table along with styles bootstrap and use te the great DataTable

Default Table Caption - Title for table Here text in span
ID Name City Email Date of birth
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@Curabiturconsequatlectus.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell Cody aliquet@Craspellentesque.com 10/17/1979
6 Lucas Melendez Plano Maecenas.malesuada@Duismi.org 02/25/1967
7 Devin Harris Altoona dolor.sit@apurus.org 01/09/1990
8 Tucker Graves Yorba Linda libero.nec.ligula@hendrerita.ca 12/03/1962
9 Linus Carpenter Attleboro pellentesque.massa@feugiat.com 03/06/1975
10 Quinlan Lindsay San Antonio rhoncus@tristique.com 10/19/1963
11 Jolie Ryan Yonkers Proin@Utnec.edu 12/17/1969
12 Roanna Adkins Wynne egestas@massaIntegervitae.edu 07/20/1980
13 Berk Clemons Madison mus.Proin.vel@nibhQuisque.edu 09/10/1963
14 Tamara Stokes Edmond nec@orci.com 01/14/1981
15 Shoshana Hodges Reading nibh@molestieSedid.org 11/12/1986

Wrapped in a DataTable .widget-simple

Wrap the table in the widget class .widget-simple or .widget-box.

Click here for change wrapper style Change

ID Name City Email Date of birth
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@Curabiturconsequatlectus.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell Cody aliquet@Craspellentesque.com 10/17/1979
6 Lucas Melendez Plano Maecenas.malesuada@Duismi.org 02/25/1967
7 Devin Harris Altoona dolor.sit@apurus.org 01/09/1990
8 Tucker Graves Yorba Linda libero.nec.ligula@hendrerita.ca 12/03/1962
9 Linus Carpenter Attleboro pellentesque.massa@feugiat.com 03/06/1975
10 Quinlan Lindsay San Antonio rhoncus@tristique.com 10/19/1963
11 Jolie Ryan Yonkers Proin@Utnec.edu 12/17/1969
12 Roanna Adkins Wynne egestas@massaIntegervitae.edu 07/20/1980
13 Berk Clemons Madison mus.Proin.vel@nibhQuisque.edu 09/10/1963
14 Tamara Stokes Edmond nec@orci.com 01/14/1981
15 Shoshana Hodges Reading nibh@molestieSedid.org 11/12/1986

Injekt Toolbar .btn-toolbar

base toolbar injekt in header, full pagination

ID Name City Email Date of birth
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@Curabiturconsequatlectus.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell Cody aliquet@Craspellentesque.com 10/17/1979
6 Lucas Melendez Plano Maecenas.malesuada@Duismi.org 02/25/1967
7 Devin Harris Altoona dolor.sit@apurus.org 01/09/1990
8 Tucker Graves Yorba Linda libero.nec.ligula@hendrerita.ca 12/03/1962
9 Linus Carpenter Attleboro pellentesque.massa@feugiat.com 03/06/1975
10 Quinlan Lindsay San Antonio rhoncus@tristique.com 10/19/1963
11 Jolie Ryan Yonkers Proin@Utnec.edu 12/17/1969
12 Roanna Adkins Wynne egestas@massaIntegervitae.edu 07/20/1980
13 Berk Clemons Madison mus.Proin.vel@nibhQuisque.edu 09/10/1963
14 Tamara Stokes Edmond nec@orci.com 01/14/1981
15 Shoshana Hodges Reading nibh@molestieSedid.org 11/12/1986

... add caption, table info .boo-table .table-bordered

base toolbar in the header, used a table caption info

Default Table Caption - Title for table Here text in span
ID Name City Email Date of birth
1 Colin Nixon Long Beach semper@diamSeddiam.edu 02/10/1986
2 Naida Bennett Lockport commodo@Curabiturconsequatlectus.ca 04/21/1959
3 Danielle Myers Bentonville nunc.sed@liberoInteger.ca 12/11/1971
4 Whitney Jones Troy Nunc@sedliberoProin.edu 08/09/1976
5 Marvin Bell Cody aliquet@Craspellentesque.com 10/17/1979
6 Lucas Melendez Plano Maecenas.malesuada@Duismi.org 02/25/1967
7 Devin Harris Altoona dolor.sit@apurus.org 01/09/1990
8 Tucker Graves Yorba Linda libero.nec.ligula@hendrerita.ca 12/03/1962
9 Linus Carpenter Attleboro pellentesque.massa@feugiat.com 03/06/1975
10 Quinlan Lindsay San Antonio rhoncus@tristique.com 10/19/1963
11 Jolie Ryan Yonkers Proin@Utnec.edu 12/17/1969
12 Roanna Adkins Wynne egestas@massaIntegervitae.edu 07/20/1980
13 Berk Clemons Madison mus.Proin.vel@nibhQuisque.edu 09/10/1963
14 Tamara Stokes Edmond nec@orci.com 01/14/1981
15 Shoshana Hodges Reading nibh@molestieSedid.org 11/12/1986

... extra toolbar, row total .boo-table bg-blue

extra table tool for your event info table is placed in the header, applied to the body coloring table

Default Table Caption - Title for table Here text in span
Order ID Customer ID Employee ID Order Date Required Date Shipped Date Freight
Total sum
10248 VINET Buchanan 04/08/2012 01/09/2012 16/08/2012 32.38
10249 TOMSP Suyama 05/08/2012 16/09/2012 10/08/2012 11.61
10250 HANAR Peacock 08/08/2012 05/09/2012 12/08/2012 65.83
10251 VICTE Leverling 08/08/2012 05/09/2012 15/08/2012 41.34
10252 SUPRD Peacock 09/08/2012 06/09/2012 11/08/2012 51.3
10253 HANAR Leverling 10/08/2012 24/08/2012 16/08/2012 58.17
10254 CHOPS Buchanan 11/08/2012 08/09/2012 23/08/2012 22.98
10255 RICSU Dodsworth 12/08/2012 09/09/2012 15/08/2012 148.33
10256 WELLI Leverling 15/08/2012 12/09/2012 17/08/2012 13.97
10257 HILAA Peacock 16/08/2012 13/09/2012 22/08/2012 81.91
10258 ERNSH Davolio 17/08/2012 14/09/2012 23/08/2012 140.51
10259 CENTC Peacock 18/08/2012 15/09/2012 25/08/2012 3.25
10260 OTTIK Peacock 19/08/2012 16/09/2012 29/08/2012 55.09
10261 QUEDE Peacock 19/08/2012 16/09/2012 30/08/2012 3.05
10262 RATTC Callahan 22/08/2012 19/09/2012 25/08/2012 48.29
10263 ERNSH Dodsworth 23/08/2012 20/09/2012 31/08/2012 146.06

Column Filter, row total .boo-table bg-blue

complete styles DataTable - header, toolbar, caption, column filter, checkbox, total row, table info, Pagination - Variable preparation and options for your application

Default Table Caption - Title for table Here text in span
Order ID Customer ID Order Date Shipped Date Freight
Order ID Customer ID Order Date Shipped Date Freight
Total sum
10248 VINET 04/08/2012 16/08/2012 32.38
10249 TOMSP 05/08/2012 10/08/2012 11.61
10250 HANAR 08/08/2012 12/08/2012 65.83
10251 VICTE 08/08/2012 15/08/2012 41.34
10252 SUPRD 09/08/2012 11/08/2012 51.3
10253 HANAR 10/08/2012 16/08/2012 58.17
10254 CHOPS 11/08/2012 23/08/2012 22.98
10255 RICSU 12/08/2012 15/08/2012 148.33
10256 WELLI 15/08/2012 17/08/2012 13.97
10257 HILAA 16/08/2012 22/08/2012 81.91
10258 ERNSH 17/08/2012 23/08/2012 140.51
10259 CENTC 18/08/2012 25/08/2012 3.25
10260 OTTIK 19/08/2012 29/08/2012 55.09
10261 QUEDE 19/08/2012 30/08/2012 3.05
10262 RATTC 22/08/2012 19/09/2012 48.29
10263 ERNSH 23/08/2012 20/09/2012 146.06

Example Horizontal scroll 2500 items read in dynamically

When changing the wrapper (use button change) does not recalculate the length - it's up to you :) The button is only for demonstration style wrapper

ID First name Last name ZIP Country
ID First name Last name ZIP Country

Click here for change wrapper style Change