Question

对于基本分页，我使用此脚本。

$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 5;
var $table = $(this);
$table.bind('repaginate', function() {
    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
});
$table.trigger('repaginate');
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('<div class="pager"></div>');
for (var page = 0; page < numPages; page++) {
    $('<span class="page-number"></span>').text(page + 1).bind('click', {
        newPage: page
    }, function(event) {
        currentPage = event.data['newPage'];
        $table.trigger('repaginate');
        $(this).addClass('active').siblings().removeClass('active');
    }).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table).find('span.page-number:first').addClass('active');
});

它完美无缺。但是我想用设置解决方案＆＃34; numPerPage＆＃34;从选择。我添加了选择表格数组。在编写脚本之前，这仍然很简单。

// Create selection from Array
    var arr = [
        {val : 1000, text: 'All'},
        {val : 5, text: '5'},
        {val : 10, text: '10'},
        {val : 15, text: '15'},
        {val : 20, text: '20'}
    ];

    var sel = $('<select id="selectionPerPage">').appendTo('#selection');
    $(arr).each(function() {
        sel.append($("<option>").attr('value',this.val).text(this.text));
    });

然后我添加了选择更改功能。

  // Set value after selection
    $('#selectionPerPage').change(function() {
        // value and cookie
        var numPerPage = $(this).val();
    });

我需要通过＆＃34; numPerPage＆＃34;找到显示TR的解决方案。 value如果我在选择中更改值。

FIDDLE http://jsfiddle.net/skyndas/hv979kn6/15/

中的整个脚本

Answer 1

检查这个jsfiddle，我为你工作。

jsfiddle : http://jsfiddle.net/vasantharaj/hv979kn6/24/

分页表通过选择选项显示TR

1 个答案: