ninja-tables-pagination-top.js

/*
# Ninja Tables FooTable Pagination at Top

Moves the existing FooTable pagination controls in Ninja Tables / Ninja Tables Pro from the table footer to above the table.

This is intended for Ninja Tables using the default FooTable renderer.

## Usage

1. Add `JS` to the table's Custom JS field.
2. Add `CSS` to the table's Custom CSS field.
3. Do not include `<script>` or `<style>` tags.
4. Clear cache and hard refresh the page.

The JavaScript uses Ninja Tables Pro's Custom JS variables: `$table`, `$`, and `tableConfig`.

**/

//JS 

(function () {
  function moveFooTablePager() {
    var $wrapper = $table.closest('.ninja_table_wrapper');

    if (!$wrapper.length) {
      return;
    }

    var $target = $wrapper.children('.nt-pagination-top');

    if (!$target.length) {
      $target = $('<div class="nt-pagination-top nt-footable-pagination-top footable footable-paging-external footable-paging-right"></div>')
        .insertBefore($table);
    }

    var $realPager = $table.find('tfoot .footable-pagination-wrapper');

    if (!$realPager.length) {
      $realPager = $target.find('.footable-pagination-wrapper');
    }

    if (!$realPager.length) {
      return;
    }

    if (!$realPager.parent().is($target)) {
      $target.empty().append($realPager);
    }

    $table.addClass('nt-pagination-moved-top');
  }

  moveFooTablePager();
  setTimeout(moveFooTablePager, 50);
  setTimeout(moveFooTablePager, 300);

  $table
    .off('draw.ft.table.ntPaginationTop postdraw.ft.table.ntPaginationTop after.ft.paging.ntPaginationTop')
    .on('draw.ft.table.ntPaginationTop postdraw.ft.table.ntPaginationTop after.ft.paging.ntPaginationTop', function () {
      setTimeout(moveFooTablePager, 0);
    });
})();

//CSS 

.nt-footable-pagination-top {
  margin: 0 0 12px;
  text-align: right;
}

.nt-footable-pagination-top .footable-pagination-wrapper {
  margin: 0;
}

.nt-footable-pagination-top ul.pagination {
  margin: 0;
}

.nt-footable-pagination-top .divider,
.nt-footable-pagination-top .label:empty {
  display: none;
}

table.nt-pagination-moved-top > tfoot > tr.footable-paging {
  display: none;
}