pagination用法

pagination用法：

一、html 

要用兩層div

<script src="${app }/pc/js/media/pagination.js"></script>

<div class="col-md-12 col-sm-12 col-lg-12 bgwhite mt15" id="courseList">
	<div class="row courseList2">
	
	</div>
</div>

二、js

  1 function courseList(){
  2     var $colsm = $("#courseList"),
  3     $mediamanager = $(".courseList2");
  4 
  5 $colsm.pagination({
  6     dataSource:sUrl.selectStudioActivityInfo,
  7     paginationDetail: false,
  8     showTotalPage : true,
  9     pageSize :10,/////分頁要注意這裏的問題
 10     locator: "body.studioActivities",
 11     alias: {
 12         pageNumber: 'pageNum',
 13         pageSize: 'pageSize'
 14     },
 15     ajax: {
 16         type:"POST",
 17         data:{
 18             "pageSize":"10",
 19             "addressId" :storageAddressId,
 20             "token" : token,
 21             "institutionId":institutionId,
 22             
 23             "activityName":$("#my_actName").val(),
 24             "status":$("#my_actStatu").val(),
 25             "activityType":$("#my_actType").val(),
 26             
 27             "year":$("#my_actYear").val(),
 28             "categoryCode":$("#my_actFirstMajor").val(),
 29             "majorCode":$("#my_actSeconMajor").val(),
 30         },
 31         beforeSend: function(jqXHR, settings) {
 32             $mediamanager.html('數據加載中，請稍後 ...');
 33         }
 34     },
 35     pageList: [12],
 36     callback: function(data, pagination){
 37         var html = template3(data);
 38         $mediamanager.html(html);
 39         $mediamanager.off( "click", ".thmb-prev");
 40         $mediamanager.on( "click", ".thmb-prev", function(){//點擊預覽
 41             var $this = $(this),
 42                 _id = $this.attr("id");
 43             preActivityModal(_id);
 44             applayerNameMY(_id);
 45         })
 46         //點擊編輯
 47          $mediamanager.on( "click", ".editCourse", function() {//刪除
 48             var $this = $(this),
 49              _id = $this.attr("id");
 50             $.data($('#addCourseModal')[0],"id",_id);
 51             editCourseModal();
 52         })
 53        //下架：4  上架：2  提交審覈：1
 54         $mediamanager.off( "click", ".shelves");
 55         $mediamanager.on( "click", ".shelves", function() {
 56                 var $this = $(this),
 57                 _id = $this.attr("id");
 58                 _status = $this.attr("data-status");
 59 //                $thmb = $this.closest(".thmb"),
 60 //                $thmbPrev = $thmb.find(".thmb-prev"),
 61 //                _postId = $thmbPrev.attr("postId"),
 62 //                _tableName = $thmbPrev.attr("tableName");
 63             var text = '肯定要'+$(this).text()+'嗎？';
 64             App.alert({
 65                 title: "系統提示",
 66                 text: text,
 67                 type: "warning",
 68                 showCancelButton: true,
 69                 confirmButtonColor: '#DD6B55',
 70                 confirmButtonText: '肯定',
 71                 cancelButtonText: "取消",
 72                 closeOnConfirm: false
 73             },
 74             function(isConfirm){
 75                 if (isConfirm){
 76                     sercice(sUrl.updateStudioActivityStatus, function(data){
 77                         if(data.success){
 78                             App.alert("系統提示",data.msg,"success");
 79                             $colsm.pagination('destroy');
 80                             courseList();
 81                         }else{
 82                             App.alert("系統提示",data.msg,"error");
 83                         }
 84                         
 85                     }, {
 86                         "id" :_id, 
 87                         "addressId" :storageAddressId,
 88                         "token":token,
 89                         "status":_status
 90                     });
 91                 }
 92             })    
 93             
 94         })
 95         
 96     }//callback結束
 97     })
 98 }
 99 function template3(data) {
100     var html = '';
101 $.each(data, function(index, item) {
102     var id = item.id || "";
103 
104     var thumb = "";
105 
106     var thumb = item.cover ?  "http://artapp-dev-bucket.oss-cn-beijing.aliyuncs.com/"+item.cover : path + "/pc/images/media/default.png";
107 
108     var courseName = item.activityName || "";
109     var amount = item.amount/100;//課程價格
110     
111     var status = item.status;//課程狀態 
112     var statusDesc = item.statusDesc;//狀態描述
113     
114     var createTime = item.createTime;//狀態描述
115     var createTime = new Date(createTime);
116     var time1 = createTime.getFullYear()+ '/'+ ((createTime.getMonth() + 1)<10?'0'+(createTime.getMonth() + 1):(createTime.getMonth() + 1))+ '/'+ (createTime.getDate() < 10 ? '0'+createTime.getDate() : createTime.getDate());
117     
118     var regNumber = item.regNumber;//已報名
119     var totalNumber = item.totalNumber;//總
120     
121     var edit ='';
122     var statusDesc ='';
123     //刪除：3  發佈：1  結束：2
124     if(status=="0"||status=="10"){//status 1(顯示 發佈) 2(上架，顯示) 4(下架，顯示上架操做)
125         edit +=      '<span class="pull-left inlineB corred mr10 cursor shelves" id="' + id + '" data-status="1">發佈</span>';
126         edit +=      '<span class="pull-left inlineB corred mr10 cursor editCourse" id="' + id + '" data-status="'+status+'">編輯</span>';
127         statusDesc = '未發佈';
128     }else if(status=="1"||status=="11"){
129         edit +=      '<span class="pull-left inlineB corred mr10 cursor shelves" id="' + id + '" data-status="2"> 結束</span>';
130         statusDesc = '已發佈';
131         }
132     else if(status=="2"){
133         statusDesc = '已結束';
134     }
135     console.log(status);
136     
137     html += '<div class="col-lg-3 col-xs-6 col-sm-4 col-md-3  video videohover mt15">';
138     html +=      '<div class="thmb cursor" style="height:250px;position:relative;">';
139     html +=         '<div class="caozuo">';
140     html +=             '<div class="ckbox ckbox-default pull-left" style="display:none;">';
141     html +=                 '<input type="checkbox" onchange="chooseSingle(this)" id="check'+index+'" name="videoCollect" value="'+id+'" />';
142     html +=                 '<label for="check'+index+'"></label>';
143     html +=             '</div>';
144     html +=            '</div>';
145     html +=            '<div class="thmb-prev" id="' + id + '"  style="width:100%;height:68%;background:url('+thumb+') no-repeat center center;background-size: cover;position:relative;">';
146     html +=            '<span class="no_open text-center">'+statusDesc+'</span>';148     html +=            '</div>';
149     html +=            '<div class="mt10 clearfix">'+'<span class="pull-left">'+courseName+'</span>'+'<span class="corred pull-right">¥'+amount+'</span>'+'</div>';
150     html +=            '<div class="mt15 clearfix dflexL relative">';    
151     html +=                '<span>'+edit+'</span>';
152     html +=                '<span class="pull-left corred mr5 cursor shelves" id="' + id + '" data-status="3">刪除</span>';
153     html +=                '<span class="pull-right absolute" style="width:70px;float:right!important;right:0">'+time1+'</span>';
154     html +=            '</div>';
155     html +=     '</div>';   
156     html +='</div>';
157 });
158 html += '';
159     return html;
160 }

 

 

 

三、效果圖

 

五、刷新時 先destory

1 $("#online_courSear").click(function(){
2     $("#courseList").pagination('destroy');
3      courseList();
4 })