Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.black-ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.jui.css">
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-pager.js"></script>
<!-- pager -->
<p>This demo only works when jsFiddle is using <code>http://</code> not <code>https://</code> due to the limitations of filltext.com</p>
<div class="pager">
    <img src="https://mottie.github.io/tablesorter/addons/pager/icons/first.png" class="first" />
    <img src="https://mottie.github.io/tablesorter/addons/pager/icons/prev.png" class="prev" /> <span class="pagedisplay"></span> 
    <!-- this can be any element, including an input -->
    <img src="https://mottie.github.io/tablesorter/addons/pager/icons/next.png" class="next" />
    <img src="https://mottie.github.io/tablesorter/addons/pager/icons/last.png"...

CSS

/***************************
 Please note that this demo
 uses data from filltext.com
 which only provides random
 table data; so no sorting
 or filtering is available
 in this demo
****************************/

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  var $table = $('table'),
    size = 10;

  $table.tablesorter({
    theme: 'blue',
    widthFixed: true,
    widgets: ['zebra', 'filter', 'pager'],
    widgetOptions: {
      pager_selectors: {
        container: '.pager'
      },
      pager_size: size,
      // set to false otherwise it remembers setting from other jsFiddle demos
      pager_savePages: false,
      pager_ajaxUrl: 'http://www.filltext.com/?callback=?',
      pager_customAjaxUrl: function(table, url) {
        // need to dynamically update page size
        // since adding 'rows : size' in ajaxObject.data doesn't
        // dynamically update the size
        table.config.pager.ajaxObject.data.rows = table.config.pager.size;
        return url;
      },
      pager_ajaxObject: {
        data: {
          // rows   : size, // this doesn't work because size can't be updated dynamically
          '#': '{index}',
          'ID': '{randomNumberLength|3}',
          'First': '{firstName}',
          'Last': '{lastName}',
          'State': '{usState|abbr}',
          'Info': '{lorem|3}'
        }
      },
      pager_ajaxProcessing: function(data) {
        if (data) {
          var col, row, txt,
            // make # column show correct value
            index = $table[0].config.pager.page,
            headers = ['#', 'ID', 'First', 'Last', 'State', 'Info'],
            len = headers.length,
            json = {},
            rows = '';
          size = data.length;
          for (row = 0; row < size; row++) {
            rows += '<tr>';
            for (col = 0; col < len; col++) {
              // make # column show correct index
              txt = col === 0 ? index * size + row + col + 1 : data[row][headers[col]];
              rows += '<td>' + txt + '</td>';
            }
            rows += '</tr>';
          }
          json.total = 100; // only allow 100 rows in total
 ...