使用bootstrap和jquery进行动态分页

时间:2017-12-17 13:18:35

标签: jquery twitter-bootstrap

我有一个代码块可以分割多余的表行。我可以使用我创建的分页看到那些多余的行。我的问题是,如何为3个不同的组织重复此代码块。假设我有org1,org2和org3。

var rowsShown;
    $('#org1).after('<center><ul class="pagination" id="nav"></div><center>');
    rowsShown = 8;
    var rowsTotal = $('#data tbody tr').length;
    var numPages = rowsTotal/rowsShown;
    for(i = 0;i < numPages;i++) {
        var pageNum = i + 1;
        $('#nav').append('<li><a href="#" rel="'+i+'" class="page">'+pageNum+'</a></li> ');
    }
    $('#org1 tbody tr').hide();
    $('#org1 tbody tr').slice(0, rowsShown).show();
    $('#nav a:first').addClass('active');
    $('#nav a').bind('click', function(){

        $('#nav a').removeClass('active');
        $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        $('#org1 tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
                css('display','table-row').animate({opacity:1}, 300);
    });

我的代码所做的只是在一个用户/组织中显示和运行。我可以使用不同的组织复制和粘贴组织和导航,但是,我的目的是避免这种冗余。

谢谢!

0 个答案:

没有答案