With the Events section in place, it is time to move onto 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 would far exceed its display capacity; the columns would be too crowded and we would 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 of 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 Bower:

    bower install DataTables

Once installed, you should find the following directory: bower_components/DataTables

Inside this directory, media/ will contain both minified and un-minified JavaScript and CSS files, which we can include within the head of our document. Specifically, the directory will contain the normal jQuery plugin and styles, as well as the Bootstrap-specific styling:

Let's go ahead and incorporate the files:

    <script src="bower_components/DataTables/media
    /js/jquery.dataTables.min.js"></script> 
    <script src="bower_components/DataTables/media
    /js/dataTables.bootstrap.min.js"></script> 
    <link rel="stylesheet" href="bower_components/DataTables/media
    /css/dataTables.bootstrap.min.css" /> 

Before we can dive into our freshly included dataTables, we must reorganize 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>24x36 (€60)</td> 
                <td>19x27 (€45)</td> 
                <td>12x18 (€28)</td> 
                <td>6x5 (€15)</td> 
            </tr>
            
<tr> 
                <td>27x39 (€75)</td> 
                <td>20x30 (€48)</td> 
                <td>16x20 (€35)</td> 
                <td>8x10 (€18)</td> 
            </tr>
            
<tr> 
                <td>27x40 (€75)</td> 
                <td>22x28 (€55)</td> 
                <td>18x24 (€40)</td> 
                <td>11x17 (€55)</td> 
            </tr>
        
</tbody>
    
</table>

The preceding table is a standard HTML table with a head and a body. Save and refresh. Good, we now have 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 the following 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(); 

Save and refresh. Immediately, you will see that the table is flowing outside of our container. To solve this, wrap the table element into a div, and give this div a maximum width of 90% (note that we are using inline styles for demonstration purposes only, and you should always try to avoid inline styles):

    <div style="max-width: 90%;"> 
        <table id="services-prints-table" class="display">...</table> 
    </div>

Once again, save and hit refresh. Voila! Our table is displaying nicely (see 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. Note the broken pagination display.

Note how, just as with bootpag, the dataTable plugin applies Bootstrap 3 pagination styling. To make the plugin Bootstrap 4-compatible, first copy dataTables.bootstrap.js into the js folder (which we created when fixing bootpag) and navigate to line 63. The switch statement is what determines the list item classes to use. Immediately after the switch statement, add the following line:

    btnClass += 'page-item table-page-item'; 

Furthermore, update line 109 (which generates the anchor element) to include the page-link class:

    .append( $('<a>', { 
        'class': 'page-link',

        'href': '#',

        'aria-controls': settings.sTableId, 
        'data-dt-idx': counter, 
        'tabindex': settings.iTabIndex 
        } ) 
        .html( btnDisplay ) 
    ) 

Note how, along with the page-item class, we also added the table-page-item class, which we now define as follows:

    .table-page-item { 
        margin-left: 0.5rem; 
    }

Take a look at the following screenshot:

Figure 5.11: The fixed DataTable, complete with pagination controls and a Terms and Conditions Apply label.

To conclude this section, our complete price section should now 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>24x36 (€60)</td> 
                        <td>19x27 (€45)</td> 
                        <td>12x18 (€28)</td> 
                        <td>6x5 (€15)</td> 
                    </tr>
                    
<tr> 
                        <td>27x39 (€75)</td> 
                        <td>20x30 (€48)</td> 
                        <td>16x20 (€35)</td> 
                        <td>8x10 (€18)</td> 
                    </tr>
                    
<tr> 
                        <td>27x40 (€75)</td> 
                        <td>22x28 (€55)</td> 
                        <td>18x24 (€40)</td> 
                        <td>11x17 (€55)</td> 
                    </tr>
                
</tbody>
            
</table>
        
</div>
    
</div>