189 8069 5689

jq实现前缩后缩分页和从后台获取数据的方法

1.分页
前缩后缩情况

创新互联主营枣庄网站建设的网络公司,主营网站建设方案,重庆App定制开发,枣庄h5重庆小程序开发公司搭建,枣庄网站营销推广欢迎枣庄等地区企业咨询

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);            });


    文章题目:jq实现前缩后缩分页和从后台获取数据的方法
    网站链接:http://cdxtjz.cn/article/pgopoj.html

    其他资讯