Converting plain tables into sophisticated data tables with Bootgrid

In this chapter, we will significantly improve our tables using the jQuery Bootgrid plugin. The official website of this plugin can be found at http://www.jquery-bootgrid.com/GettingStarted. The repository is available at the GitHub page at https://github.com/rstaib/jquery-bootgrid.

To use the plugin, inspect the files available via CDNJS on https://cdnjs.com/libraries/jquery-bootgrid.

Getting ready

Before we start with the recipe, it could be useful to see the completed example of what happens to a plain table once it gets improved with the use of the Bootgrid plugin. Point your browser to http://www.jquery-bootgrid.com/Examples. Locate the Basic Example heading, and click on the Prettify Table button. This will turn the plugin on and improve the example table on the page, giving it several filters and a search feature, as well as the option of choosing the number of rows visible and a pagination at the bottom of the table...