jquery - 对所有表格而不是一页进行排序

Question

我使用 tablesorter 对表进行排序。我使用分页脚本来添加分页。

分页脚本:

$.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>

我不使用默认的表排序器分页，因为我无法将其设计为像 bootstrap 那样的样式。

如何对所有表格而不是一页进行排序？谢谢!

Answer 1

据我所知，默认寻呼机的样式没有任何限制。

在 this demo ，有两个带有自定义 HTML 的寻呼机 block 。

<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>

唯一要求它在每个元素上定义类名(例如下一页、上一页、输出显示等)，并在分页器设置中定义相同的名称。

$('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'
});

如果这仍然不适合您，您还可以查看 this custom pager code仍然使用寻呼机插件，但提供了独特的布局。