pjax-table

Base Markup

The app server needs to define correct markup and data attributes to enable features of pjax tables. Some are required, others optional. See fifty-tables for a python flask implementation that works with pjax-table.

Example of standard table markup with data attributes:

          
  <div data-pjax-table data-auto-init="true">
    <table data-total-rows="{{ total_rows }}" 
           data-current-sort-property="{{ current_sort_property }}"
           data-current-sort-direction="{{ current_sort_direction }}"
           data-current-page="{{ current_page }}"
           data-current-perpage="{{ current_perpage }}">
      <thead>
        <tr>
          <th data-sortable="true"
              data-property="{{ property }}"
              data-current-sort-direction="{{ sort_direction }}">
            {{ header_value }}
          </th>
          <!-- ... -->
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-property="{{ property }}"
              data-value="{{ value }}">
            {{ value }}
          </td>
          <!-- ... -->
        </tr>
      </tbody>
      <tfoot></tfoot>
    </table>
  </div>
          
        

Configuration

container data attributes

table data attributes

th data attributes

td data attributes

JS options

JS options override data attributes or the defaults.

Pagination

pagination container data attributes

pagination perpage data attributes

pagination page data attributes

required pagination classes

Example pagination markup

*The example below uses BS3 classes and markup, but only the classes and structure listed above are required. A base set of styles to make these functional without BS3 may soon be applied. Ideas are welcome.*

          
  <div class="pjax-table-pagination ui-pagination" 
       data-current-page="{{ current_page }}" 
       data-current-perpage="{{ per_page }}">

    <!-- per page controls -->
    <div class="pull-left btn-toolbar">
      <div class="dropdown btn-group" data-per-page="{{ perpage }}">
        <button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">
          <span class="dropdown-label">Per Page {{ per_page }}</span>
          <span class="fa fa-angle-down"></span>
        </button>
        <ul class="dropdown-menu open-up ui-perpage-dropdown">
          <li data-value="10"><a>10</a></li>
          <li data-value="20"><a>20</a></li>
          <li data-value="50"><a>50</a></li>
          <li data-value="100"><a>100</a></li>
        </ul>
      </div>
      <div class="btn-group btn-sm btn-link">From {{ from }} to {{ to }} of {{ total }}</div>
    </div>

    <!-- page, next page, prev page controls -->
    <div class="pull-right btn-toolbar">
      {{#if on_last_page }}
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-sm ui-prev-page" {{#if on_first_page }}disabled{{/if}}>
            <i class="fa fa-chevron-left"></i>
          </button>
        </div>

        <div class="btn-group">
          <div class="dropdown ui-page-index-dropdown" data-current-page="{{ current_page }}">
            <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
              <span class="dropdown-label">Page {{ current_page }}</span>
              <i class="fa fa-angle-down"></i>
            </button>
            <ul class="dropdown-menu open-up ui-page-select-dropdown">
              {{ page_items }}
            </ul>
          </div>
        </div>

        <div class="btn-group">
          <button type="button" class="btn btn-default btn-sm ui-next-page" {{#if on_last_page }}disabled{{/if}}>
            <i class="fa fa-chevron-right"></i>
          </button>
        </div>
      {{else}}
        <div class="btn-group btn-sm btn-link">Page {{ current_page }} of {{ last_page }}</div>
      {{/if}}
    </div>
  </div>
          
        

Row Selection

To enable row selection, which includes select/deselect all, you can specify a table header cell and a column of table cells with `data-property="id"`. These cells also need to contain a checkbox for managing selection state.

Example table header and body cells which enable row selection:

          
  <!-- in thead > tr -->
  <th data-select-all-enabled="true" data-property="id">
    <input type="checkbox">
  </th>

  <!-- in tbody > tr -->
  <th data-property="id" data-value="1">
    <input type="checkbox">
  </th>
          
        

Events

Most named events are triggered from the container element, with the exception of any plugins which fire events. The search implementation also fires it's own events which are wrapped by the table.