1.分页
前缩后缩情况

创新互联建站是由多位在大型网络公司、广告设计公司的优秀设计人员和策划人员组成的一个具有丰富经验的团队，其中包括网站策划、网页美工、网站程序员、网页设计师、平面广告设计师、网络营销人员及形象策划。承接：网站设计、网站建设、网站改版、网页设计制作、网站建设与维护、网络推广、数据库开发,以高性价比制作企业网站、行业门户平台等全方位的服务。

function createPage(currentpage, totlepage) {
            //创建20个页码

            //根据当前页  实现  后缩  前后缩   前缩
            var str = "";
            str += "
上一页
"
            //1...1617181920   当前页在后边显示
            //1 2 3 4 5....20   当前页在前边显示
            for (var i = 1; i <= totlepage; i++) {
                if (i == 2 && currentpage - 3 > i) {
                    //前缩
                    i = currentpage - 3;
                    str += "
...
";
                }
                else if (i == currentpage + 3 && currentpage + 3 < totlepage) {
                    //后缩
                    i = totlepage - 1;
                    str += "
...
";
                }
                else {
                    if (i == currentpage) {
                        str += "
" + i + "
"
                    }
                    else {
                        str += "
" + i + "
"
                    }
                }
            }
            str += "
下一页
"
            return str;
        }

2.从后台获取数据方法

pageData.forEach(function(val,index){
                var pardiv=$("
");
                var spanid=$(""+val.id+"");
                var spanclass=$(""+val.classid+"");
                var spanname=$(""+val.name+"");
                var spansex=$(""+val.sex+"");
                var spanage=$(""+val.age+"");
                var spantel=$(""+val.tel+"");
                var spanaddress=$(""+val.address+"");
                var spanemail=$(""+val.email+"");
                pardiv.append(spanid);
                pardiv.append(spanclass);
                pardiv.append(spanname);
                pardiv.append(spansex);
                pardiv.append(spanage);
                pardiv.append(spantel);
                pardiv.append(spanaddress);
                pardiv.append(spanemail);
                $(".content").append(pardiv);
            });

标题名称：jquery前缩后缩分页和从后台获取数据代码-创新互联
分享链接：http://scyanting.com/article/gocjj.html