<!-- 展示层 --> <div class="my-gift pull-down-cont" id="showMyGiftContent" style="width:310px;displa
<!-- 展示层 --> <div class="my-gift pull-down-cont" id="showMyGiftContent" style="width:310px;display: none;background:#fff;font-size:16px;zoom:2;"> <h3> 我的奖品 <a style="float:right; font-weight: inherit;margin-right: 9px;font: 30px/30px /5b8b/4f53,tahoma,arial;text-decoration: none; color:#000" href="javascript:showDialog.hide();">×</a> </h3> <ul style="margin: 8px 26px 6px 0;list-style: none;padding: 0;"> <li style="line-height: 25px;margin-top: 8px;height: 29px;border-bottom: 1px dashed #219AFC;"> <span style="font-weight:bold;">获奖时间</span> <span style="font-weight:bold;padding-left:112px;">所获礼包</span> </li> </ul> <ul id="getGiftContent" style="margin: 8px 0 10px 0;list-style: none;padding: 0;"> </ul> <ul style="margin: 8px 0 10px 0;list-style: none;text-align: center;padding: 0;"> <li id="getGiftPageContent_276747" style="line-height: 32px;margin-top: 6px;height: 35px;border-bottom: 1px dashed #219AFC;"> <span class="c3"></span> <a href="javascript:void(0);" class="pageprenone" id="pageprenone" title="">上一页</a> <a href="javascript:void(0);" class="pagenextnone" id="pagenextnone" title=" ">下一页</a> </li> </ul> </div>(function (w) { w.giftPageShow = null; w.giftPageShow = function (config) { var PageTool = { config: function (configObj) { for (var name in configObj) { if (typeof this.page[name] != 'undefined') { this.page[name] = configObj[name]; } else { this[name] = configObj[name]; } } }, page: { giftList: null, curGifts: null, total: 0, size: 8, pageNum: 1, curPage: 1, prevPage: 0, nextPage: 0, toEnd: false }, init: function (myGiftList) { this.page.giftList = myGiftList; this.page.total = len = myGiftList.length; this.page.pageNum = Math.ceil(this.page.total / this.page.size); $('#' + this.prev).on('click', this.prevEvent(this)); $('#' + this.next).on('click', this.nextEvent(this)); this.page.curGifts = this.page.giftList.slice(0, this.page.size); this.render(this.page.curGifts); }, prevEvent: function (_this) { return function () { if (_this.page.curPage == 1) { return false; } _this.page.curPage--; var start = (_this.page.curPage - 1) * _this.page.size; _this.page.curGifts = _this.page.giftList.slice(start, start + _this.page.size); _this.render(_this.page.curGifts); } }, nextEvent: function (_this) { return function () { if (_this.toEnd) { return false; } if ((_this.page.curPage + 1) > _this.page.pageNum) { _this.toEnd = true; return false; } _this.page.toEnd = false; var start = _this.page.curPage * _this.page.size; _this.page.curGifts = _this.page.giftList.slice(start, start + _this.page.size); _this.page.curPage++; _this.render(_this.page.curGifts); } }, render: function (myGiftList) { var giftT = ''; var len = myGiftList.length; if (len) { for (var i = 0; i < len; i++) { if (myGiftList.length) { giftT += ' <li style="line-height: 25px;margin-top: 4px;min-height: 27px;border-bottom: 1px dashed #219AFC;">' + '<span style="font-size:14px;" class="getTime">' + myGiftList[i].dtGetPackageTime + '</span> ' + '<span style="font-size:14px;" class="packageName"> ' + myGiftList[i].sPackageName + '</span> </li>'; } } } else { giftT += '<li style="line-height: 40px;margin-top: 8px;height: 50px;border-bottom: 1px dashed #219AFC;"> 亲,您还没有奖品!继续加油 </li>'; } $('#' + this.containerId).empty(); $('#' + this.containerId).append(giftT); need("biz.dialog", function (Dialog) { Dialog.show({id: 'showMyGiftContent', bgcolor: '#000', opacity: 50}); }); } } PageTool.config(config); PageTool.init(config.giftList); }})(window)var res = { "myGiftList": [{ "id": "91", "sUin": "731A78CE916EC4004235E185829F5977", "sSerialNum": "AMS-TGCLUB-0713203759-7eaX66-54084-276746", "sRoleArea": "2", "sRoleId": "2183413", "sRoleName": "%E6%88%91%E6%98%AF4%E5%8F%B7", "sGender": "", "iPackageId": "383235", "sPackageName": "/u94ed/u6587/u788e/u7247*1", "dtGetPackageTime": "2016-07-13 20:38:00", "sCdkey": "", "iStatus": "0", "iBroadcastFlag": "0", "sRelativeIps": "117.136.40.214|10.246.164.177|10.247.129.225", "iPackageNum": "1", "sPlatId": "0", "sExtend1": "2061", "sExtend2": "", "sExtend3": "", "iModuleId": 149313, "sAreaName": "/u624bQ51/u533a-/u6b63/u4e49/u6e05/u7b97" }, { "id": "85", "sUin": "731A78CE916EC4004235E185829F5977", "sSerialNum": "AMS-TGCLUB-0713160938-rBfcm6-54084-276746", "sRoleArea": "2", "sRoleId": "2183413", "sRoleName": "%E6%88%91%E6%98%AF4%E5%8F%B7", "sGender": "", "iPackageId": "383234", "sPackageName": "/u725b/u9b54/u82f1/u96c4/u4f53/u9a8c/u53617/u5929", "dtGetPackageTime": "2016-07-13 16:09:38", "sCdkey": "", "iStatus": "0", "iBroadcastFlag": "0", "sRelativeIps": "117.136.40.214|10.234.161.206|10.247.130.205", "iPackageNum": "1", "sPlatId": "0", "sExtend1": "2061", "sExtend2": "", "sExtend3": "", "iModuleId": 149313, "sAreaName": "/u624bQ51/u533a-/u6b63/u4e49/u6e05/u7b97" }]}//用法:数据,容器ID,容器宽度,上一页按钮ID,下一页按钮ID,每页数据量giftPageShow({ giftList: res.myGiftList, containerId: "getGiftContent", width: 300, prev: "pageprenone", next: "pagenextnone", size: 8});
//效果图