How to sort by clicking on the table header in bootstrap

Using Bootstrap, you can quickly create responsive web pages. Sometimes in projects, Bootstrap is used to click on the header column of the table to achieve ascending and descending sorting. This article records Bootstrap in detail table implements the steps to sort the column headers at the top of the table header field in ascending and descending order.

1. Introduce Bootstrap.

Download the latest version of the Bootstrap framework from the Bootstrap official website and introduce the CSS styles and js scripts used in the project.

Among them, there are three basic files that must be introduced:

①bootstrap.min.css

②jquery.min.js

③bootstrap.min. js

Note that ② must be introduced before ③ because the bootstrap script relies on the jQuery library.

#2. Introduce the DataTables plug-in.

Since the function we want to implement is to click on the Bootstrap table header column header to switch ascending and descending order, so we selected this excellent table view plug-in during the development process.

To use DataTables in the project, you only need to introduce three files:

①jQuery

②DataTables.js

③DataTables.css

3. Create Bootstrap table container DOM.

Bootstrap provides multiple styles of table classes, which can be added according to your own needs. For example, the table class="table table-striped table-bordered" I wrote in the picture below is the DOM of this Bootstrap table. Just click on the header column header to switch the table in ascending and descending order.

#4. Dynamically generate Bootstrap table grid.

Define DOM through DataTables as a grid layout of data table control elements. The attribute value of "sDom" can be written according to actual project needs. This Bootstrap table grid is used later to click on the header column. Header toggles the grid in ascending and descending order.

#5. Extend the DataTable "sWrapper" class.

Through "sWrapper": "dataTables_wrapper form-inline", you can extend the sWrapper class and wrap the elements in the form of a data table so that the elements are inline instead of as a block, thereby realizing the table of click Bootstrap table The header column header implements the ascending and descending sorting function.

6. Bootstrap table click the table header column header to switch to ascending and descending order.

Since Bootstrap abandoned tablesorter as a table library and result sorting class, we wrote the relevant CSS styles ourselves to achieve the effect.

The effect is as follows:

##More Bootstrap related technical articles, Please visit the

Bootstrap Tutorial column to learn!

The above is the detailed content of How to sort by clicking on the table header in bootstrap. For more information, please follow other related articles on the PHP Chinese website!