With the Events section in place, it is time to move on to our price list that we built in Chapter 2, Making a Style Statement, and Chapter 3, Building the Layout. For the data that is currently displayed, the existing table structure works perfectly fine. The prices are nicely presented, and the table is not too crowded. However, what if MyPhoto were required to display hundreds of prices (yes, this case may seem far-fetched, but bear with it for demonstration purposes)? Our existing table structure will far exceed its display capacity; the columns will be too crowded, and we will need to implement some form of pagination to help keep the table organized. Of course, if you read the previous sections, you will know how easy it is to implement pagination using a third-party plugin. However, with hundreds or thousands of items, pagination will not be enough to make the website usable. Users may require more advanced features, such as the ability to filter tabular data or the ability to search for a specific table item. Users may also desire the ability to adjust the number of table items displayed per page. All these requirements are bound to make our table implementation quite complex and challenging. However, once again, these user requirements are common, well understood, and well studied. Because of this, there is an excellent third-party library that we can use to enhance our MyPhoto price list. Meet DataTables (https://www.datatables.net). DataTables is a jQuery plugin that includes Bootstrap styles and provides us with all the previously mentioned features.
To use DataTables, you can either customize your own build via the DataTables website (they offer a neat download builder), or you can use NPM:
npm install datatables
npm install datatables.net-bs4
Once installed, you should find the following two directories: node_modules/datatables and node_modules/datatables.net-bs4.
Inside the former, media/ will contain both minified and unminified JavaScript and CSS files, which we can include within the head of our document:
- dataTables.min.js
- bootstrap.min.css
The latter (node_modules/datatables.net-bs4) will contain the Bootstrap 4 – specific files.
Let’s go ahead and include the files:
<script
src=”node_modules/datatables/media/js/jquery.dataTables.min.js”></script>
<script src=”node_modules/datatables.net- bs4/js/dataTables.bootstrap4.js”></script>
<link rel=”stylesheet” href=”node_modules/datatables.net- bs4/css/dataTables.bootstrap4.css” />
Before we can dive into our freshly included dataTables, we must re-organize our print sizes and prices. Go ahead and create a table using the same dataset as before (however, for simplicity’s sake, we can just display one price set):
<table id=”services-prints-table”>
<thead>
<tr>
<th>Extra Large</th>
<th>Large</th>
<th>Medium</th>
<th>Small</th>
</tr>
</thead>
<tbody>
<tr>
<td>24×36 (€60)</td>
<td>19×27 (€45)</td>
<td>12×18 (€28)</td>
<td>6×5 (€15)</td>
</tr>
<tr>
<td>27×39 (€75)</td>
<td>20×30 (€48)</td>
<td>16×20 (€35)</td>
<td>8×10 (€18)</td>
</tr>
<tr>
<td>27×40 (€75)</td>
<td>22×28 (€55)</td>
<td>18×24 (€40)</td>
<td>11×17 (€55)</td>
</tr>
</tbody>
</table>
The preceding table is a standard HTML table with a thead and a tbody. Save and refresh; you should now see a plain and simple table. Next, let’s go ahead and style it. First, set the table to use the entire available space by setting its width to 100%. Next, apply two Bootstrap classes: table and table-striped. The former class, table, applies a basic table styling to our table by adjusting the padding, line height, and vertical alignment. The latter class, table-striped, alternates the colors of our individual rows:
<table id=”services-prints-table” class=”table table-striped” width=”100%”>
<thead>
<!— Content here—>
</thead>
<tbody>
<!—Content here—>
</tbody>
</table>
To initialize the data table, we just need one line of code:
$(‘#services-prints-table’).DataTable();
Once again, save and hit refresh. Voila! Our table is displaying nicely (refer to figure 5.10). Go ahead and play with it for a bit. Use the search box to filter specific table rows, or add more table rows and see how the table becomes magically pageable. You can even control the number of entries to display per page without any additional effort. Take a look at the following screenshot:
Figure 5.10: The non-Bootstrap variant of our DataTables price list
To conclude this section, our complete price section should look as follows:
<div class=”container”>
<h1 class=”hidden-md”>Our Print Sizes</h1>
<div style=”max-width: 90%;”>
<table id=”services-prints-table” class=”table table-striped” width=”100%”>
<thead>
<tr>
<th>Extra Large</th>
<th>Large</th>
<th>Medium</th>
<th>Small</th>
</tr>
</thead>
<tbody>
<tr>
<td>24×36 (€60)</td>
<td>19×27 (€45)</td>
<td>12×18 (€28)</td>
<td>6×5 (€15)</td>
</tr>
<tr>
<td>27×39 (€75)</td>
<td>20×30 (€48)</td>
<td>16×20 (€35)</td>
<td>8×10 (€18)</td>
</tr>
<tr>
<td>27×40 (€75)</td>
<td>22×28 (€55)</td>
<td>18×24 (€40)</td>
<td>11×17 (€55)</td>
</tr>
</tbody>
</table>
</div>
</div>
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.