Data table with paging

Present a data table with paging.

Rendering a data table with paging is quite straight-forward with Sircl. In the following example we find the 3 main elements of a paged table:

1. the table itself (lines 5 to 30);
2. a pagination component allowing to navigate through the pages (lines 39 to 60);
3. a page size selector to select the number of rows per page (lines 33 to 37).

The whole page is part of a form (lines 1 to 62) which has a target attribute making it the inline target when the form is submitted. So when the form is submitted, the server is to return new content for the form (new content for lines 3 to 60).

Since we want new content for the table when another page is selected or when the page size is changed, both pagination component and page size selector or made of form elements (in this case radio buttons and a dropdown selection field). In addition the form has the onchange-submit class, such that the form is automatically submitted as soon as a page is selected or the page size is changed:

<form action="/Customers" class="onchange-submit target">

  <div class="table-responsive">
    <div class="overlay" hidden></div>
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>A Bike Store</td>
          <td>245-555-0173</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Progressive Sports</td>
          <td>170-555-0127</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Advanced Bike Components</td>
          <td>279-555-0130</td>
        </tr>
      </tbody>
    </table>
  <div>

  <select name="pagesize" class="form-control float-end" style="width: 52px;">
    <option selected>3</option>
    <option>5</option>
    <option>10</option>
  </select

  <nav>
    <ul class="pagination">
      <li class="page-item active">
        <label class="page-link">
          <input type="radio" name="page" value="1" />
          1
        </label>
      </li>
      <li class="page-item">
        <label class="page-link">
          <input type="radio" name="page" value="2" />
          2
        </label>
      </li>
      <li class="page-item">
        <label class="page-link">
          <input type="radio" name="page" value="3" />
          3
        </label>
      </li>
    </ul>
  </nav>

</form>

The pagination component is not made of hyperlinks but of radio buttons, such that when the form is submitted, page size and other form elements are included in the URL querystring. To hide the bullets of the radio buttons and only leave the label visible to click on, we use the following styling:

<style>
  .page-link INPUT[type='radio'] { display: none; }
</style>

Bootstrap is used for the remaining styling.

On line 4 an overlay was added to give the impression that the table is updated when submitting the form while we know that in reality the whole form content is updated.

Also note that in the above code the radio button for page 1 (on line 43) is not checked, but it's surrounding LI element (on line 41) has the Bootstrap active class.

The data rendered in the table is issued from the Microsoft AdventureWorksLT database.