In this lecture, we are going to use a jQuery plugin called DataTables to add pagination, sorting, and filtering functionalities to our customers table. To start, we need to install the DataTables package (version 1.10.11) through the package manager console. After installation, a new folder called 'data tables' will be added to the scripts folder, containing various scripts that extend the functionality of DataTables. However, we will only be using two of these scripts for our purpose. To organize our scripts, we consolidate the jQuery and bootstrap bundles into a new bundle called 'Lib'. We then rename the jQuery bundle to 'lib' and add the DataTables scripts to the 'Lib' bundle. Additionally, we include the DataTables stylesheet in the CSS bundle. In the index.cshtml file, we call the DataTables function on our customers table to enable the plugin's functionalities. This allows us to easily sort columns, perform searches, and display paginated records without writing extra code. However, this implementation returns HTML markup from the server, which is then parsed by DataTables to extract the actual data. This method may not be efficient for a large number of records. In the next lecture, we will learn how to retrieve raw data from the server and let DataTables generate the HTML markup on the client side.
video
txt