Table sort
Bootstrap table sort
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
Sorting functionality allows you to sort the data of the tables according to any specific columns.
To manipulate table sorting, you can use one of the options presented below.
To start working with our tables see the "Getting Started" tab on this page.
Note: This integration is available from version 4.5.7 (released 16.07.2018).
Basic example
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Name | Position | Office | Age | Start date | Salary |
To use the DataTables call the $().DataTables()
method on the table. See the exact example in the
"JavaScript" tab in the code below.
Enable / disable sorting
Sorting is enabled by default, so if you'd like to have it you don't need to do anything.
Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. The full list of available options is available in the DataTables reference.
Disable selected column
With extra JavaScript code you can disable sorting in selected column.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
Name | Position | Office | Age | Start date | Salary |
Sorting options
Using the
order
initialisation parameter, you can set the table to display the data in exactly the order that
you want.
The
order
parameter is an array of arrays where the first value of the inner array is the column to order
on, and the second value is
asc
(ascending ordering) or
desc
(descending ordering) as required. Also, order
is a 2D array to allow multi-column
ordering to be defined.
The table below is ordered (descending) by the Age column.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750 |
Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 |
Olivia Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500 |
Serge Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
Zenaida Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 |
Vivian Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500 |
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
Name | Position | Office | Age | Start date | Salary |
Advanced table options
For advanced table options of the tables,plase look at specific the documentation pages listed below.
Tables with additional elements and customization options
Tables with buttons, checkboxes, icons, panels & more.
Table responsive
Advanced options for responsive tables
Table search
The MDBootstrap search box enables super-fast searching among all of the data in the table.
Table pagination
Pagination is simple navigation which lets you split a huge amount of content within the tables into smaller parts.
Table scroll
If your table is too long or too wide you can limit its size and enable scroll functionality.
Table editable
Table editable allows you to edit existing data within the table and add new data to the table.
Table generator
An interactive tool for creating fully coded tables.