jpages分页显示多个table,后面动态添加的ID->itemContainer的table分页不起效果。

发布于 2022-09-05 00:33:59 字数 7599 浏览 14 评论 0

1.用的bootstrap的tab-pane显示不同的table,不同的table采用jpages插件分页，但是因为jpages插件分页是给table添加id-itemContainer,所以我想再点击不同的tab的时候，动态给不同tab-pane里面的table添加ID为itemContainer，但是jpagesg是给每一个tr也加了一些其他的类，而我只添加了itemContainer，里面的tr也没有更新，请问这个怎么修改啊？？

2.HTML：

    <body>
        <!--正文部分-->
        <div class="container myCon">
            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-2">
                    <ul class="nav nav-pills nav-stacked myNav" id="nav">
                    </ul>
                </div>
                <div class="tab-content" id="piCon">
                </div>
            </div>
        </div>

        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/jPages.min.js" ></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>

index.js

$(function(){
    //读取图片并显示在界面
    (function(){
        var imgFile = ["zhangsan","lisi","wangwu"];
        var imgFileNickName = ["张三","李四","王五"];
        var imgFile0 = {"imgurl":[    "img/"+imgFile[0]+"/1.jpg",
                                      "img/"+imgFile[0]+"/2.jpg",
                                    "img/"+imgFile[0]+"/3.jpg",
                                    "img/"+imgFile[0]+"/4.jpg",
                                    "img/"+imgFile[0]+"/5.jpg",
                                    "img/"+imgFile[0]+"/6.jpg",
                                    "img/"+imgFile[0]+"/7.jpg",
                                    "img/"+imgFile[0]+"/8.jpg",
                                    "img/"+imgFile[0]+"/9.jpg",
                                    "img/"+imgFile[0]+"/10.jpg" ]};
                                    
        
        var imgFile1 = {"imgurl":[    "img/"+imgFile[1]+"/1.jpg",
                                      "img/"+imgFile[1]+"/2.jpg",
                                    "img/"+imgFile[1]+"/3.jpg",
                                    "img/"+imgFile[1]+"/4.jpg",
                                    "img/"+imgFile[1]+"/5.jpg",
                                    "img/"+imgFile[1]+"/6.jpg",
                                    "img/"+imgFile[1]+"/7.jpg",
                                    "img/"+imgFile[1]+"/8.jpg",
                                    "img/"+imgFile[1]+"/9.jpg" ]};
                        
                        
        var imgFile2 = {"imgurl":[    "img/"+imgFile[2]+"/1.jpg",
                                      "img/"+imgFile[2]+"/2.jpg",
                                    "img/"+imgFile[2]+"/3.jpg",
                                    "img/"+imgFile[2]+"/4.jpg",
                                    "img/"+imgFile[2]+"/5.jpg",
                                    "img/"+imgFile[2]+"/6.jpg",
                                    "img/"+imgFile[2]+"/7.jpg",
                                    "img/"+imgFile[2]+"/8.jpg",
                                    "img/"+imgFile[2]+"/9.jpg",
                                    "img/"+imgFile[2]+"/10.jpg" ]};
                                        
        //nav pane
        for(var i = 0;i<imgFile.length;i++){
            var li = $(`<li>
                            <a href="#`+imgFile[i]+`" role="tab" data-toggle="tab">`+imgFileNickName[i]+`</a>
                        </li>`);
                        
            var pane = $(`
                <div class="tab-pane fade in col-sm-9 col-md-10" id="`+imgFile[i]+`">
                        <table id="`+imgFile[i]+`Table">
                            <tbody>
                            </tbody>
                            <div class="holder"></div>
                        </table>
                    </div>`);
            $('#nav').append(li);
            $('#piCon').append(pane);
        }
        
        $('#nav li:first-child').addClass('active');
        $('#piCon > div:first-child').addClass('active');
        //第一个table添加分页
        $('.tab-pane:eq(0) table tbody').attr('id','itemContainer');
            
        
    
        fillImg(imgFile[0]+"Table",imgFile0);
        fillImg(imgFile[1]+"Table",imgFile1);
        fillImg(imgFile[2]+"Table",imgFile2);
        
            
            function fillImg(fillTableId,fillobj){
                if(!fillobj){
                    return;
                }
                for(var i = 0;i<fillobj.imgurl.length;i++){
                    if(i%4 == 0){
                        var tr = $(`<tr class="row"></tr>`);
                    }
                    var td = $(`<td class="col col-md-3 col-sm-6 col-xs-6 imgcol">
                                            <a href="###">
                                                <div class="imgBox center-block">
                                                    <img src="`+fillobj.imgurl[i]+`" class="img-responsive img-thumbnail" />
                                                    <span>√</span>
                                                </div>
                                            </a>
                                        </td>`);
                                        
                    tr.append(td);
                    $('#'+fillTableId).append(tr);
                }
            }
            
            
            //点击到某一个nav  右边相应pane中的table才添加id->itemContainer分页
            //******这块有问题*******
            var navLi = $('#nav > li');
            navLi.each(function(i,obj){
                $(this).on('click',function(){
                    var clickIndex = $(this).index();
                    $(".tab-pane table tbody#itemContainer").removeAttr('id');
                    $(".tab-pane table tbody tr").attr('class','row');
                    console.log(clickIndex +"点击");
                    $(".tab-pane:eq(1) table tbody").attr('id','itemContainer'); 
                    fenye();              //这里调用了分页的初始化函数,但是没有效果
                    console.log($(".tab-pane:eq('+clickIndex+') table tbody"));
                });
            })
            
            
    })();
    
    
    //分页
    //分页的<table>的<tbody>上（注意：不一定非得是<table>，也可以是<ul>等）的id标记为“itemContainer”，表明这里面放的是一行一行的内容
    //perPage 每页的行数
    function fenye(){
        $("div.holder").jPages({  
            containerID : "itemContainer",  
    //        previous : "←",  
    //        next : "→",  
    //        perPage : 2,  
            delay : 100,
             first: '首页',
            last: '尾页',
            previous: '上页',
            next: '下页',
            perPage: 2,
            startPage: 1,
            startRange: 2,
            midRange: 3,
            endRange: 2,
            animation: 'wobble',
            keyBrowse: true,
            callback    : function( pages, items ){
                /* lazy load current images */
                items.showing.find("img").trigger("turnPage");
                /* lazy load next page images */
                items.oncoming.find("img").trigger("turnPage");
            }
            });  
    };
    fenye();
    
    
    
    
    //点击出现按钮 
    //再点击按钮消失
    (function(){
        $("#piCon .imgcol a").on("click",function(){
            $(this).find('span').toggleClass('active');
        });
        
        
    })();
})

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仅一夜美梦 2022-09-12 00:33:59

我重新改进了一下，右边只用了一个div显示图片，只有一个itemContainer存在，这下子分页没有问题了,但是右边显示的可扩展性不高，希望有大神指导指导思路，万分感激！！！
HTML：

    <body>
        <!--正文部分-->
        <div class="container myCon">
            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-2">
                    <ul class="nav nav-pills nav-stacked myNav" id="nav">
                    </ul>
                </div>
                <div class="col-sm-9 col-md-10" id="piCon">
                    <table>
                        <tbody id="itemContainer">
                        </tbody>
                        <div class="holder"></div>
                    </table>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/jPages.min.js" ></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>

js:

var imgFile = ["zhangsan","lisi","wangwu"];
var imgFileNickName = ["张三","李四","王五"];
var imgFile0 = {"imgurl":[    "img/"+imgFile[0]+"/1.jpg",
                              "img/"+imgFile[0]+"/2.jpg",
                            "img/"+imgFile[0]+"/3.jpg",
                            "img/"+imgFile[0]+"/4.jpg",
                            "img/"+imgFile[0]+"/5.jpg",
                            "img/"+imgFile[0]+"/6.jpg",
                            "img/"+imgFile[0]+"/7.jpg",
                            "img/"+imgFile[0]+"/8.jpg",
                            "img/"+imgFile[0]+"/9.jpg",
                            "img/"+imgFile[0]+"/10.jpg" ]};
                            

var imgFile1 = {"imgurl":[    "img/"+imgFile[1]+"/1.jpg",
                              "img/"+imgFile[1]+"/2.jpg",
                            "img/"+imgFile[1]+"/3.jpg",
                            "img/"+imgFile[1]+"/4.jpg",
                            "img/"+imgFile[1]+"/5.jpg",
                            "img/"+imgFile[1]+"/6.jpg",
                            "img/"+imgFile[1]+"/7.jpg",
                            "img/"+imgFile[1]+"/8.jpg",
                            "img/"+imgFile[1]+"/9.jpg" ]};
                
                
var imgFile2 = {"imgurl":[    "img/"+imgFile[2]+"/1.jpg",
                              "img/"+imgFile[2]+"/2.jpg",
                            "img/"+imgFile[2]+"/3.jpg",
                            "img/"+imgFile[2]+"/4.jpg",
                            "img/"+imgFile[2]+"/5.jpg",
                            "img/"+imgFile[2]+"/6.jpg",
                            "img/"+imgFile[2]+"/7.jpg",
                            "img/"+imgFile[2]+"/8.jpg",
                            "img/"+imgFile[2]+"/9.jpg",
                            "img/"+imgFile[2]+"/10.jpg" ]};
                                    
$(function(){
    (function(){                            
        //nav
        for(var i = 0;i<imgFile.length;i++){
            var li = $(`<li>
                            <a href="###">`+imgFileNickName[i]+`</a>
                        </li>`);
            $('#nav').append(li);
        }
        $('#nav li:first-child').addClass('active');
        $('#nav li').each(function(i){
            $(this).on('click',function(){
                $('#nav li.active').removeClass('active');
                $(this).addClass('active');
                
                if(i==0){
                    showImg(imgFile0);
                    clickImg();
                    fenye();
                }
                if(i==1){
                    showImg(imgFile1);
                    clickImg();
                    fenye();
                }
                if(i==2){
                    showImg(imgFile2);
                    clickImg();
                    fenye();
                }
            })
        });
        $('#nav li:first-child').trigger('click');                


        function showImg(name){
            fillImg(name);
        }
        function fillImg(fillobj){
            $('#itemContainer').html('');
            if(!fillobj){
                return;
            }
            for(var i = 0;i<fillobj.imgurl.length;i++){
                if(i%4 == 0){
                    var tr = $(`<tr class="row"></tr>`);
                }
                var td = $(`<td class="col col-md-3 col-sm-6 col-xs-6 imgcol">
                                        <a href="###" class="imga">
                                            <div class="imgBox center-block">
                                                <img src="`+fillobj.imgurl[i]+`" class="img-responsive img-thumbnail" />
                                                <span>√</span>
                                            </div>
                                        </a>
                                    </td>`);
                                    
                tr.append(td);
                $('#itemContainer').append(tr);
            }
        }
        
    })();
    
    
    //点击出现图标按钮 再点击图标按钮消失
    function clickImg(){
        $("#itemContainer tr td.imgcol a.imga").on("click",function(){
            console.log("点击了");
            $(this).find('span').toggleClass('active');
        });
    }
    
    

    //分页的<table>的<tbody>上（注意：不一定非得是<table>，也可以是<ul>等）的id标记为“itemContainer”，表明这里面放的是一行一行的内容
    //perPage 每页的行数
    function fenye(){
        $("div.holder").jPages({  
            containerID : "itemContainer",  
    //        previous : "←",  
    //        next : "→",  
    //        perPage : 2,  
            delay : 100,
             first: '首页',
            last: '尾页',
            previous: '上页',
            next: '下页',
            perPage: 2,
            startPage: 1,
            startRange: 2,
            midRange: 3,
            endRange: 2,
            animation: 'wobble',
            keyBrowse: true,
            callback    : function( pages, items ){
                /* lazy load current images */
               items.showing.find("img").trigger("turnPage");
                /* lazy load next page images */
                items.oncoming.find("img").trigger("turnPage");
            }
            });  
    };
    
    
    
    
    
    
    
});

回复收藏 0

~没有更多了~