Setting the page size

So the sorting functionality we added is pretty awesome. But the <table> is still quite large and unwieldy – too large in fact to be seen on the page in its entirety. So it's perfect for paging.

One thing we need to do is determine how many items should constitute a single page of data. We could hardcode a value into our script for the number of items to show per page, but a better way is to add a facility to the UI so that the users can set the number of items to display per page themselves. This is what we'll do in this task.

Engage Thrusters

We can start by adding some additional markup. Add the following elements directly after the <tbody> element:

<tfoot>
    <tr>
        <tdcolspan="5">
            <div id="paging" class="clearfix">
                <label for="perPage">Items per page:</label>
                <select id="perPage" data-bind="value: pageSize">
                    <option value="10">10</option...