Sort all table not one page

Question

I use tablesorter to sort my table. I use pagination script to add pagination.

PAGINATION SCRIPT:

$.fn.tablePager = function(opts) {
var $this = this,
    defaults = {
        pagerSelector: "#tablePager",
        perPage: 10,
        showPrevNext: true,
        numbersPerPage: 5,
        hidePageNumbers: false
    },
    settings = $.extend(defaults, opts);

var listElement = $this;
var perPage = settings.perPage;
var children = listElement.children();
var pager = $(settings.pagerSelector);

if (typeof settings.childSelector != "undefined") {
    children = listElement.find(settings.childSelector);
}

if (typeof settings.pagerSelector != "undefined") {
    pager = $("#tablePager");
}

var numItems = children.size();
var numPages = Math.ceil(numItems / perPage);

pager.data("curr", 0);

if (settings.showPrevNext) {
    $('<li><a href="#" class="prev_link">« Prev</a></li>').appendTo(pager);
}

var curr = 0;
while (numPages > curr && (settings.hidePageNumbers == false)) {
    $('<li><a href="#" class="page_link">' + (curr + 1) + '</a></li>').appendTo(pager);
    curr++;
}

if (settings.numbersPerPage > 1) {
    $('.page_link').hide();
    $('.page_link').slice(pager.data("curr"), settings.numbersPerPage).show();
}

if (settings.showPrevNext) {
    $('<li><a href="#" class="next_link">Next »</a></li>').appendTo(pager);
}

pager.find('.page_link:first').addClass('active');
pager.find('.prev_link').hide();
if (numPages <= 1) {
    pager.find('.next_link').hide();
}
pager.children().eq(1).addClass("active");

children.hide();
children.slice(0, perPage).show();

pager.find('li .page_link').click(function() {
    var clickedPage = $(this).html().valueOf() - 1;
    goTo(clickedPage, perPage);
    return false;
});
pager.find('li .prev_link').click(function() {
    previous();
    return false;
});
pager.find('li .next_link').click(function() {
    next();
    return false;
});

function previous() {
    var goToPage = parseInt(pager.data("curr")) - 1;
    goTo(goToPage);
}

function next() {
    var goToPage = parseInt(pager.data("curr")) + 1;
    goTo(goToPage);
}

function goTo(page) {
    var startAt = page * perPage,
        endOn = startAt + perPage;

    children.css('display', 'none').slice(startAt, endOn).show();

    if (page >= 1) {
        pager.find('.prev_link').show();
    }
    else {
        pager.find('.prev_link').hide();
    }

    if (page < (numPages - 1)) {
        pager.find('.next_link').show();
    }
    else {
        pager.find('.next_link').hide();
    }

    pager.data("curr", page);

    if (settings.numbersPerPage > 1) {
        $('.page_link').hide();
        $('.page_link').slice(page, settings.numbersPerPage + page).show();
    }

    pager.children().removeClass("active");
    pager.children().eq(page + 1).addClass("active");
}
};

Javascript:

<script>
   $.tablesorter.themes.bootstrap = {
            table: 'table table-striped',
            hover: '', // custom css required - a defined bootstrap style may not override other classes
            iconSortNone: 'fa fa-sort', // class name added to icon when column is not sorted
            iconSortAsc: 'fa fa-sort-asc', // class name added to icon when column has ascending sort
            iconSortDesc: 'fa fa-sort-desc' // class name added to icon when column has descending sort
        };

        $("table").tablesorter({
            theme: 'bootstrap', // theme "jui" and "bootstrap" override the uitheme widget option in v2.7+
            headerTemplate: '{content} {icon}', // needed to add icon for jui theme
            widgets: ['uitheme'],
        });

        $('#pagedTable').tablePager();

</script>

HTML:

    <table class="table table-striped">
    <thead>
        <tr><th></th></tr>
    </thead>
    <tbody id="pagedTable">
            <tr>
                <td></td>
            </tr>
    </tbody>
</table>

<a class="pagination" id="tablePager"></a>

I do not use default tablesorter pagination, because I can't get it styled liked bootstrap's one.

How can I sort all table but not one page? Thank you!

Answer 1

There are no limitations, that I know of, on styling the default pager.

In this demo, there are two pager blocks with custom HTML.

<div class="ts-pager form-horizontal">
  <button type="button" class="btn first">
    <i class="icon-step-backward glyphicon glyphicon-step-backward"></i>
  </button>
  <button type="button" class="btn prev">
    <i class="icon-arrow-left glyphicon glyphicon-backward"></i>
  </button>

  <!-- this can be any element, including an input -->
  <span class="pagedisplay"></span>

  <button type="button" class="btn next">
    <i class="icon-arrow-right glyphicon glyphicon-forward"></i>
  </button>
  <button type="button" class="btn last">
    <i class="icon-step-forward glyphicon glyphicon-step-forward"></i>
  </button>

  <select class="pagesize input-mini" title="Select page size">
    <option selected="selected" value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option value="40">40</option>
  </select>

  <select class="pagenum input-mini" title="Select page number"></select>

</div>

The only requirement it to have the class names defined on each element (e.g. next page, previous page, output display, etc.), and have those same names defined in the pager settings.

$('table').tablesorterPager({

  // target the pager markup - see the HTML block below
  container: $('.ts-pager'),

  // ... other options ...

  // css class names of pager arrows
  // next page arrow
  cssNext: '.next',
  // previous page arrow
  cssPrev: '.prev',
  // go to first page arrow
  cssFirst: '.first',
  // go to last page arrow
  cssLast: '.last',
  // select dropdown to allow choosing a page
  cssGoto: '.pagenum',
  // location of where the 'output' is displayed
  cssPageDisplay: '.pagedisplay',
  // dropdown that sets the 'size' option
  cssPageSize: '.pagesize',
  // error information row
  cssErrorRow: 'tablesorter-errorRow',
  // class added to arrows when at the extremes
  // (i.e. prev/first arrows are 'disabled' when on the first page)
  // Note there is no period '.' in front of this class name
  cssDisabled: 'disabled'
});

If that still doesn't work for you, you could also check out this custom pager code that still uses the pager addon, but provides a unique layout.