温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-05-29 16:56:19 来源:亿速云 阅读:253 作者:鸽子 栏目:web开发

1.分页
前缩后缩情况

function createPage(currentpage, totlepage) {            //创建20个页码            //根据当前页  实现  后缩  前后缩   前缩            var str = "";            str += "<li class='pageup'>上一页</li>"            //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 += "<li class='pageli'>...</li>";                }                else if (i == currentpage + 3 && currentpage + 3 < totlepage) {                    //后缩                    i = totlepage - 1;                    str += "<li class='pageli'>...</li>";                }                else {                    if (i == currentpage) {                        str += "<li class='pageli ck'>" + i + "</li>"                    }                    else {                        str += "<li class='pageli'>" + i + "</li>"                    }                }            }            str += "<li class='pagedown'>下一页</li>"            return str;        }

2.从后台获取数据方法

pageData.forEach(function(val,index){                var pardiv=$("<div class='c_list'></div>");                var spanid=$("<span class='title_small'>"+val.id+"</span>");                var spanclass=$("<span class='title_small'>"+val.classid+"</span>");                var spanname=$("<span class='title_big'>"+val.name+"</span>");                var spansex=$("<span class='title_small'>"+val.sex+"</span>");                var spanage=$("<span class='title_small'>"+val.age+"</span>");                var spantel=$("<span class='title_big'>"+val.tel+"</span>");                var spanaddress=$("<span class='title_big'>"+val.address+"</span>");                var spanemail=$("<span class='title_big'>"+val.email+"</span>");                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);            });

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI