portainer/app/docker/components/datatables/host-jobs-datatable/jobsDatatable.html

<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="datatable">
      <rd-widget>
        <rd-widget-body classes="no-padding">
          <div class="toolBar">
            <div class="toolBarTitle">
              <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i>
              {{ $ctrl.titleText }}
            </div>
          </div>
          <div class="actionBar">
            <button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.purgeAction()">
              <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Clear job history
            </button>
          </div>
          <div class="searchBar">
            <i class="fa fa-search searchIcon" aria-hidden="true"></i>
            <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
          </div>
          <div class="table-responsive">
            <table class="table table-hover table-filters nowrap-cells">
              <thead>
                <tr>
                  <th>
                    <a ng-click="$ctrl.changeOrderBy('Id')">
                      Id
                      <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i>
                      <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i>
                    </a>
                  </th>
                  <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open">
                    <a ng-click="$ctrl.changeOrderBy('Status')">
                      State
                      <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i>
                      <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i>
                    </a>
                    <div>
                      <span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled"> Filter
                        <i class="fa fa-filter" aria-hidden="true"></i></span>
                      <span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter
                        <i class="fa fa-check" aria-hidden="true"></i></span>
                    </div>
                    <div class="dropdown-menu" uib-dropdown-menu>
                      <div class="tableMenu">
                        <div class="menuHeader">
                          Filter by state
                        </div>
                        <div class="menuContent">
                          <div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
                            <input id="filter_state_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
                            <label for="filter_state_{{ $index }}">{{ filter.label }}</label>
                          </div>
                        </div>
                        <div>
                          <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
                        </div>
                      </div>
                    </div>
                  </th>
                  <th>
                    <a ng-click="$ctrl.changeOrderBy('Created')">
                      <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && !$ctrl.state.reverseOrder"></i>
                      <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"></i>
                      Created
                    </a>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))">
                  <td>
                    <a ui-sref="docker.containers.container.logs({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Id }}">
                      {{ item | containername }}</a>
                  </td>
                  <td>
                    <span ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) !== -1" class="label label-{{ item.Status|containerstatusbadge }} interactive"
                      uib-tooltip="This container has a health check">{{ item.Status }}</span>
                    <span ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status|containerstatusbadge }}">
                      {{ item.Status }}</span>
                  </td>
                  <td>
                    {{item.Created | getisodatefromtimestamp}}
                  </td>
                </tr>
                <tr ng-if="!$ctrl.dataset">
                  <td colspan="9" class="text-center text-muted">Loading...</td>
                </tr>
                <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
                  <td colspan="9" class="text-center text-muted">No jobs available.</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="footer" ng-if="$ctrl.dataset">
            <div class="paginationControls">
              <form class="form-inline">
                <span class="limitSelector">
                  <span style="margin-right: 5px;">
                    Items per page
                  </span>
                  <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
                    <option value="0">All</option>
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                  </select>
                </span>
                <dir-pagination-controls max-size="5"></dir-pagination-controls>
              </form>
            </div>
          </div>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>
</div>