jquery 分页问题。。。求教大神

yangliweng5 2014-12-04 03:59:04
原因是这样的，我现在想自己写一个分页吧，用JQUERY，我现在页数什么的都出来了，但是就是用children遍历隐藏的时候出了问题，要不就都显示出来了，要不就都隐藏起来了，请问这个问题怎么解决？
下面是代码。
 <script  language="Javascript">



 

        $(document).ready(function () {

           

            Pager(1);



        });



        //分页函数,参数PAGESIZE是每页显示的数量

        function Pager(pageSize)

        {

            

            var total = $(".imgArrCss").children().length; //图片的个数

            var startIndex = 1; //首页的下标（因为页数是第一页开始）

            var endIndex = total ; //尾页的下标



            var pageCount = 0; //初始化页数，并在显示处省略首页和尾页



            pageCount = Math.ceil( endIndex/ pageSize); //计算页数，采用上取法，



            var mid_Pages = ""; //第二页，第三页，第四页。。。。。



            //如果页数大于等于2，则分页

            if (pageCount >= 2)

            {

                for (var i = 1; i <= pageCount; i++) {

                    if (i == 1) {

                        mid_Pages += "<span><a href='#' onclick=\"selectedPage(1,"+total+")\">首" + "页</a></span> ";

                    }



                    else if (i == pageCount) {



                        mid_Pages += "<span><a href='#' onclick=\"selectedPage(" + total+","+ total + ")\">尾" + "页</a></span> ";

                    }

                    else {



                        mid_Pages += "<span><a href='#' onclick=\"selectedPage(" + i+","+ total + ")\">第" + i + "页</a></span> ";

                    }

                }



            }

            

            //默认显示第一页内容

            selectedPage(1, total);



            var children = $(".imgArrCss").children(0);

            



            $(".mid_Pages").html(mid_Pages); //显示第二页，第三页，第四页。。。。。



            //alert(pageCount);



        }



        //选择了某一页，只显示某一页的内容，其他页的内容被隐藏

        function selectedPage(index,total)

        {

            //var children = $(".imgArrCss").children(index);



            //只显示当前页的内容，其他页的内容遍历隐藏

            for (var j = 1; j != index,j<=total; j++)

            {

                $(".imgArrCss").children(j).css("display","none");

            }



            //因为这里有BUG，所以恢复选中的页的内容,谁能告诉我怎么做？

            $(".imgArrCss").children(index).css("display", "block");



        }

       

       



    </script>


<div><span class="mid_Pages"></span></div>


求教大神不甚感激。关键是卡在CHILDREN那里了。
...全文
98 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
yangliweng5 2014-12-04
  • 打赏
  • 举报
 回复
引用 3 楼 hxm_ss5224 的回复:
[quote=引用 1 楼 yangliweng5 的回复:] 问题解决了，用EACH就行，children(选择器)是不能有下标的 
        //选择了某一页，只显示某一页的内容，其他页的内容被隐藏
        function selectedPage(index,total)
        {
            //var children = $(".imgArrCss").children(index);

            //只显示当前页的内容，其他页的内容遍历隐藏(用each遍历)
            $(".imgArrCss").children().each(function (a, b) {
                if ((a + 1) != index) {
                    $(b).css("display", "none");
                }

                else {

                    $(b).css("display", "block");
                }

            });

            //因为这里有BUG，所以恢复选中的页的内容,谁能告诉我怎么做？
            //$(".imgArrCss").children(index).css("display", "block");

        }
[code=javascript /$(".imgArrCss").children().each(function(i){ if( i == index ){ $(this).css('display','block'); } }); ][/code][/quote] 你这么写不行的，我弄了下，不过第一页显示还有问题，少一个。 
        //选择了某一页，只显示某一页的内容，其他页的内容被隐藏
        function selectedPage(index,total,pageSize)
        {
            //var children = $(".imgArrCss").children(index);

            //只显示当前页的内容，其他页的内容遍历隐藏(用each遍历)
            $(".imgArrCss").children().each(function (a, b) {


                //中间页
                //如果是在这一页范围内的东西的话，那么就显示出来，否则隐藏起来
                if ((a+1) >= pageSize * (index - 1) && (a+1) < pageSize * (index)) {
                    $(b).css("display", "block");
                }
                else {
                    $(b).css("display", "none");
                }

            });

            //因为这里有BUG，所以恢复选中的页的内容,谁能告诉我怎么做？
            //$(".imgArrCss").children(index).css("display", "block");

        }
yangliweng5 2014-12-04
  • 打赏
  • 举报
 回复
引用 3 楼 hxm_ss5224 的回复:
[quote=引用 1 楼 yangliweng5 的回复:] 问题解决了，用EACH就行，children(选择器)是不能有下标的 
        //选择了某一页，只显示某一页的内容，其他页的内容被隐藏
        function selectedPage(index,total)
        {
            //var children = $(".imgArrCss").children(index);

            //只显示当前页的内容，其他页的内容遍历隐藏(用each遍历)
            $(".imgArrCss").children().each(function (a, b) {
                if ((a + 1) != index) {
                    $(b).css("display", "none");
                }

                else {

                    $(b).css("display", "block");
                }

            });

            //因为这里有BUG，所以恢复选中的页的内容,谁能告诉我怎么做？
            //$(".imgArrCss").children(index).css("display", "block");

        }
[code=javascript /$(".imgArrCss").children().each(function(i){ if( i == index ){ $(this).css('display','block'); } }); ][/code][/quote] 你这么写不行的，我弄了下，不过第一页显示还有问题，少一个。 
        //选择了某一页，只显示某一页的内容，其他页的内容被隐藏
        function selectedPage(index,total,pageSize)
        {
            //var children = $(".imgArrCss").children(index);

            //只显示当前页的内容，其他页的内容遍历隐藏(用each遍历)
            $(".imgArrCss").children().each(function (a, b) {


                //中间页
                //如果是在这一页范围内的东西的话，那么就显示出来，否则隐藏起来
                if ((a+1) >= pageSize * (index - 1) && (a+1) < pageSize * (index)) {
                    $(b).css("display", "block");
                }
                else {
                    $(b).css("display", "none");
                }

            });

            //因为这里有BUG，所以恢复选中的页的内容,谁能告诉我怎么做？
            //$(".imgArrCss").children(index).css("display", "block");

        }
yangliweng5 2014-12-04
  • 打赏
  • 举报
 回复
引用 3 楼 hxm_ss5224 的回复:
[quote=引用 1 楼 yangliweng5 的回复:] 问题解决了，用EACH就行，children(选择器)是不能有下标的 
        //选择了某一页，只显示某一页的内容，其他页的内容被隐藏
        function selectedPage(index,total)
        {
            //var children = $(".imgArrCss").children(index);

            //只显示当前页的内容，其他页的内容遍历隐藏(用each遍历)
            $(".imgArrCss").children().each(function (a, b) {
                if ((a + 1) != index) {
                    $(b).css("display", "none");
                }

                else {

                    $(b).css("display", "block");
                }

            });

            //因为这里有BUG，所以恢复选中的页的内容,谁能告诉我怎么做？
            //$(".imgArrCss").children(index).css("display", "block");

        }
[code=javascript /$(".imgArrCss").children().each(function(i){ if( i == index ){ $(this).css('display','block'); } }); ][/code][/quote] 你这么写不行的，我弄了下，不过第一页显示还有问题，少一个。 
        //选择了某一页，只显示某一页的内容，其他页的内容被隐藏
        function selectedPage(index,total,pageSize)
        {
            //var children = $(".imgArrCss").children(index);

            //只显示当前页的内容，其他页的内容遍历隐藏(用each遍历)
            $(".imgArrCss").children().each(function (a, b) {


                //中间页
                //如果是在这一页范围内的东西的话，那么就显示出来，否则隐藏起来
                if ((a+1) >= pageSize * (index - 1) && (a+1) < pageSize * (index)) {
                    $(b).css("display", "block");
                }
                else {
                    $(b).css("display", "none");
                }

            });

            //因为这里有BUG，所以恢复选中的页的内容,谁能告诉我怎么做？
            //$(".imgArrCss").children(index).css("display", "block");

        }
My_It5224 2014-12-04
  • 打赏
  • 举报
 回复
引用 1 楼 yangliweng5 的回复:
问题解决了，用EACH就行，children(选择器)是不能有下标的 
        //选择了某一页，只显示某一页的内容，其他页的内容被隐藏
        function selectedPage(index,total)
        {
            //var children = $(".imgArrCss").children(index);

            //只显示当前页的内容，其他页的内容遍历隐藏(用each遍历)
            $(".imgArrCss").children().each(function (a, b) {
                if ((a + 1) != index) {
                    $(b).css("display", "none");
                }

                else {

                    $(b).css("display", "block");
                }

            });

            //因为这里有BUG，所以恢复选中的页的内容,谁能告诉我怎么做？
            //$(".imgArrCss").children(index).css("display", "block");

        }
[code=javascript /$(".imgArrCss").children().each(function(i){ if( i == index ){ $(this).css('display','block'); } }); ][/code]
yangliweng5 2014-12-04
  • 打赏
  • 举报
 回复
但是问题又来了。。。为什么我每一页只显示一条数据？
yangliweng5 2014-12-04
  • 打赏
  • 举报
 回复
问题解决了，用EACH就行，children(选择器)是不能有下标的 
        //选择了某一页，只显示某一页的内容，其他页的内容被隐藏
        function selectedPage(index,total)
        {
            //var children = $(".imgArrCss").children(index);

            //只显示当前页的内容，其他页的内容遍历隐藏(用each遍历)
            $(".imgArrCss").children().each(function (a, b) {
                if ((a + 1) != index) {
                    $(b).css("display", "none");
                }

                else {

                    $(b).css("display", "block");
                }

            });

            //因为这里有BUG，所以恢复选中的页的内容,谁能告诉我怎么做？
            //$(".imgArrCss").children(index).css("display", "block");

        }
实现页码可滚动的jQuery分页插件jPaginate 程序源码
jPaginate是一款基于jQuery的分页插件，这款jQuery分页插件有一个特点，就是随着鼠标点击页码，页码会向前或向后滚动，效果非常不错。而且，这款jQuery分页插件提供了多种样式风格，你也可以自己利用CSS来定义不同的分页样式。
jQuery jPages （jQuery 分页插件）
jPages 是一个超给力的 jQuery 分页插件，它提供了很多丰富的新特性，如下： 自动翻页功能 可用键盘和鼠标滚动浏览 内容延迟显示 支持自定义分页导航菜单
无刷新分页 pagination
Jquery 无刷新分页 jquery.pagination.js 带数据库 提交Handler请求数据 AJAX
jquery.qrcode.min.js---二维码的jquery插件
jquery.qrcode.min.js 二维码的jquery插件
jquery.base64.js
jquery.base64.js
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章