如何自动分页取决于jquery中的容器高度

时间:2016-12-22 23:39:24

标签: javascript jquery

我正在添加一个小提琴,实际上这是由angularjs制作的,但我想在jquery中创建它。我有几个p标签。那些将像那种方式(分页)一样工作,但只能在jquery中工作。

我的代码是

columns

请检查以下小提琴。我想对上面的代码做同样的事情

https://jsfiddle.net/pjvdogoo/9/

1 个答案:

答案 0 :(得分:0)

            <div class="parent" id="parent"  style="border: 2px solid blue; visibility: hidden;">
            <p>text1</p>
            <p>text2</p>
            <p>text3</p>
            <p>text4</p>
            <p>text5</p>
            <p>text6</p>
            <p>text7</p>
            <p>text8</p>
            <p>text9</p>
            <p>text10</p>
        </div>

        <div  id="heightTest" style=" border: 2px solid blue;">

        </div>
        <script>


        $(function() {
            var $heightTest = $('#heightTest');

            var noOfParas = $("#parent").find("p").length;

            var docHeight = $(document).height();
            var currentPage = 0;

            var pageSize = docHeight / 200; //approx para height
            if(pageSize < 3) {
                pageSize = 3; // displays atleast 3 paras at a time
            }


            var noOfPages = Math.round(noOfParas / pageSize);

            var $p = $("#parent").find("p");
            var textChunk = new Array();
            var k =0;

            for(i=0; i<noOfPages; i++) {
                textChunk[i] = "";
                for(j=0; j<pageSize; j++) {
                    if(k<noOfParas) {                            
                        textChunk[i] += "<P>" + $('#parent > p:eq('+ k +')').html() + "</P>";                                                       
                    }
                    k++;
                }
            }

            displayPage(currentPage);


            function displayPage(page) {
                $("#heightTest").empty();
                $("#heightTest").html(textChunk[page]);

                //append pagination buttons
                var thisPage = page+1;
                var btnText = "<div style='text-align: center;'>";

                if(page !== 0) {
                    btnText = "<button id='previous'>Previous</button> ";
                }
                else {
                    btnText = "<button id='previous' disabled >Previous</button> ";
                }

                btnText += thisPage + " / " + noOfPages;

                if( page!== noOfPages-1 ) {
                    btnText += " <button id='next'>Next</button>";
                }
                else {
                    btnText += " <button id='next' disabled >Next</button>";
                }

                btnText += "</div>";

                $("#heightTest").append(btnText);

                currentPage = page;
            }

            $("#heightTest").on('click','#previous', function() {
                if(currentPage !== 0){
                    var newPage = currentPage - 1;
                    displayPage(newPage);
                }
            });

            $("#heightTest").on('click','#next', function() {
                if(currentPage !== noOfPages+1){
                    var newPage = currentPage + 1;
                    displayPage(newPage);
                }
            });                



          });

        </script>