Data table with paging and selection

Present a data table with paging and selection checkboxes.

This example continues on the previous example Data table with paging where we created a data table with paging using a form that is automatically submitted when a form control is changed.

In this example we will add checkboxes to select rows of the table. Since the form has an onchange-submit class, any change on a form control will immediately submit the form. To avoid form submission when checking or unchecking selection checkboxes, we can remove the onchange-submit class from the FORM element, and add it only to those controls that should submit the form on change.

Alternatively, we can leave the onchange-submit class on the FORM element as default behavior, and add the class onchange-nosubmit on those form controls that should not submit the form on change. This is how it is done in the following code:

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

  <div class="table-responsive">
    <div class="overlay" hidden></div>
    <table class="table">
      <thead>
        <tr>
          <th>
            <input type="checkbox" class="onchange-nosubmit"
                   ifchecked-check="<TABLE|>[name='selection']"
                   ifunchecked-uncheck="<TABLE|>[name='selection']" >
          </th>
          <th>Id</th>
          <th>Name</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" name="selection" value="1"
                   class="onchange-nosubmit">
          </td>
          <td>1</td>
          <td>A Bike Store</td>
          <td>245-555-0173</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="selection" value="2"
                   class="onchange-nosubmit">
          </td>
          <td>2</td>
          <td>Progressive Sports</td>
          <td>170-555-0127</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="selection" value="3"
                   class="onchange-nosubmit">
          </td>
          <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="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>
  
  <p>
    <button type="submit" class="btn btn-primary"
            formaction="/Customers/Export"
            enable-ifanychecked="<FORM|>[name='selection']" >
      <i class="spinner fas fa-download"></i>
      Export
    </button>
  </p>

</form>

In the header how, we add a checkbox without name but with ifchecked-check and ifunchecked-uncheck attributes to have the row selection checkboxes follow this checkbox.

At the end, the Export button is only enabled when at least one selection checkbox is checked. This is achieved with the action-event attribute enable-ifchecked which takes a (relative) CSS selector.

The "<FORM|>[name='selection']" selector is a relative CSS selector searching for its parent FORM element, and from there off select all children elements with name "selection".