标签:play empty return 很多 lan lis event ace 简单的
最近在写官网的分页功能。在网上找了很多案例都太复杂也太重。所以准备写一个简单一点的分页。
需求:把请求到的数据做分页。
准备:使用了网上一个简单的分页插件。
思路:分页相当于tab切换功能。具体实操把数组拆分成若干个数组。这样每个数组就是所需要的每个分页的内容。然后把所有的数组塞到一个对象中就是分页所需要的内容。
上代码
分页插件:
!(function(t, a, e, i) { var n = function(a, e) { this.ele = a, this.defaults = { currentPage: 1, totalPage: 10, isShow: !0, count: 5, homePageText: ‘首页‘, endPageText: ‘尾页‘, prevPageText: ‘上一页‘, nextPageText: ‘下一页‘, callback: function() {} }, this.opts = t.extend({}, this.defaults, e), this.current = this.opts.currentPage, this.total = this.opts.totalPage, this.init(); }; n.prototype = { init: function() { this.render(), this.eventBind(); }, render: function() { var t = this.opts; var a = this.current; var e = this.total; var i = this.getPagesTpl(); var n = this.ele.empty(); this.isRender = !0, this.homePage = ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="1">‘ + t.homePageText + ‘</a>‘, this.prevPage = ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + (a - 1) + ‘">‘ + t.prevPageText + ‘</a>‘, this.nextPage = ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + (a + 1) + ‘">‘ + t.nextPageText + ‘</a>‘, this.endPage = ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + e + ‘">‘ + t.endPageText + ‘</a>‘, this.checkPage(), this.isRender && n.html("<div class=‘ui-pagination-container‘>" + this.homePage + this.prevPage + i + this.nextPage + this.endPage + ‘</div>‘); }, checkPage: function() { var t = this.opts; var a = this.total; var e = this.current; t.isShow || (this.homePage = this.endPage = ‘‘), e === 1 && (this.homePage = this.prevPage = ‘‘), e === a && (this.endPage = this.nextPage = ‘‘), a === 1 && (this.homePage = this.prevPage = this.endPage = this.nextPage = ‘‘), a <= 1 && (this.isRender = !1); }, getPagesTpl: function() { var t = this.opts; var a = this.total; var e = this.current; var i = ‘‘; var n = t.count; if (a <= n) { for (g = 1; g <= a; g++) { i += g === e ? ‘<a href="javascript:void(0);" class="ui-pagination-page-item active" data-current="‘ + g + ‘">‘ + g + ‘</a>‘ : ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + g + ‘">‘ + g + ‘</a>‘; } } else { var s = n / 2; if (e <= s) { for (g = 1; g <= n; g++) { i += g === e ? ‘<a href="javascript:void(0);" class="ui-pagination-page-item active" data-current="‘ + g + ‘">‘ + g + ‘</a>‘ : ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + g + ‘">‘ + g + ‘</a>‘; } } else { var r = Math.floor(s); var h = e + r; var o = e - r; var c = n % 2 == 0; h > a && (c ? (o -= h - a - 1, h = a + 1) : (o -= h - a, h = a)), c || h++; for (var g = o; g < h; g++) { i += g === e ? ‘<a href="javascript:void(0);" class="ui-pagination-page-item active" data-current="‘ + g + ‘">‘ + g + ‘</a>‘ : ‘<a href="javascript:void(0);" class="ui-pagination-page-item" data-current="‘ + g + ‘">‘ + g + ‘</a>‘; } } } return i; }, setPage: function(t, a) { return t === this.current && a === this.total ? this.ele : (this.current = t, this.total = a, this.render(), this.ele); }, getPage: function() { return { current: this.current, total: this.total }; }, eventBind: function() { var a = this; var e = this.opts.callback; this.ele.off(‘click‘).on(‘click‘, ‘.ui-pagination-page-item‘, function() { var i = t(this).data(‘current‘); a.current != i && (a.current = i, a.render(), e && typeof e === ‘function‘ && e(i)); }); } }, t.fn.pagination = function(t, a, e) { if (typeof t === ‘object‘) { var i = new n(this,t); this.data(‘pagination‘, i); } return typeof t === ‘string‘ ? this.data(‘pagination‘)[t](a, e) : this; } ; }(jQuery, window, document));
js:
$(function () { var dt; var agg = {}; var ihtml = []; $.ajax({ url: ‘website/news/list‘, type: ‘POST‘, dataType: "json", data: { ‘type‘: ‘1‘ }, success: function (datas) { //请求成功后处理函数。 dt = datas.result data = datas.result console.log(datas) for (var i in data) { ihtml.push(‘<div class="col-sm-12 col-md-4">‘ + ‘<a href="news-child.html?articleId=‘ + data[i].id + ‘" target="_blank">‘ + ‘<div class="f1">‘ + ‘<span>‘ + ‘<img src="‘ + data[i].img + ‘"/ width="262">‘ + ‘</span>‘ + ‘<h2 class="f-tit">‘ + data[i].title + ‘</h2>‘ + ‘<p class="f-cont">‘ + showHTML(data[i].content, 200, " ......") + ‘</p>‘ + ‘<p class="f-time">‘ + data[i].updateTime.substring(0, 10) + ‘</p>‘ + ‘</div>‘ + ‘</a>‘ + ‘</div>‘) } var cp = 12; var len = ihtml.length / cp; len = parseInt(ihtml.length % cp != 0 ? len + 1 : len); for (var i = 0; i < len; i++) { var start = i * cp; var end = start + cp; end = end > ihtml.length ? ihtml.length : end; ihtml.slice(start, end); console.log(ihtml.slice(start, end)); agg[i] = (ihtml.slice(start, end)); htmltext = ‘‘ + ‘‘ + (ihtml.slice(start, end)).join("") + ‘‘ + ‘‘ } ss(len); }, error: function (d, msg) { console.log("Could not find user " + msg); } }); var htmltext = ‘‘; function ss(ind) { var i = 0; i != 0 ? agghtml(agg[i]) : agghtml(agg[0]); $("#pagination1").pagination({ currentPage: 1, totalPage: ind, callback: function (current) { $("#current1").text(current) console.log(current); i = current - 1; agghtml(agg[i]); } }); } function agghtml(arr) { htmltext = ‘‘ + ‘‘ + arr.join("") + ‘‘ + ‘‘; $(".focus .container").html(htmltext); } }); function showHTML(str, length, endstr) { if (str != null) { var html = str.replace(/<[^>]+>/g, "").replace(/ /ig, "").substring(0, length) + endstr; return html; } return null; }
css
button { display: inline-block; padding: 6px 12px; font-weight: 400; line-height: 1.42857143; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; border-color: #28a4c9; color: #fff; background-color: #5bc0de; margin: 20px 20px 0 0; } .box { width: 800px; margin: 100px auto 0; height: 34px; } .pages { padding: 50px 0 0; text-align: right; margin: 0 416px; } .info { width: 200px; height: 34px; line-height: 34px; } .ui-pagination-container { height: 34px; line-height: 34px } .ui-pagination-container .ui-pagination-page-item { font-size: 14px; padding: 4px 10px; background: #fff; border: 1px solid #c5b7b7; color: #888; margin: 0 3px; text-decoration: none } .ui-pagination-container .ui-pagination-page-item:hover { border-color: #568dbd; color: #568dbd; text-decoration: none } .ui-pagination-container .ui-pagination-page-item.active { background: #568dbd; border-color: #568dbd; color: #fff; cursor: default }
html:
<div class="content">
<div class="focus">
<!-- 渲染内容 -->
<div class="focus-1 container">
<!-- <div class="col-sm-12 col-md-4">
<a href="news-child.html" target="_blank">
<div class="f1"><span><img src="images/n01.jpg" width="262"></span>
<h2 class="f-tit">....</h2>
<p class="f-cont">
......
</p>
<p class="f-time">2020-05-25</p>
</div>
</a>
</div>-->
</div>
</div>
<!-- 分页 -->
<div id="pagination1" class="pages fl"></div>
</div>
标签:play empty return 很多 lan lis event ace 简单的
原文地址:https://www.cnblogs.com/opcec/p/13389066.html