pagination用法

pagination用法：

1、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>

2、js

 function courseList(){
     var $colsm = $("#courseList"),
     $mediamanager = $(".courseList2");

 $colsm.pagination({
     dataSource:sUrl.selectStudioActivityInfo,
     paginationDetail: false,
     showTotalPage : true,
     pageSize :10,/////分页要注意这里的问题
     locator: "body.studioActivities",
     alias: {
         pageNumber: 'pageNum',
         pageSize: 'pageSize'
     },
     ajax: {
         type:"POST",
         data:{
             "pageSize":"10",
             "addressId" :storageAddressId,
             "token" : token,
             "institutionId":institutionId,

             "activityName":$("#my_actName").val(),
             "status":$("#my_actStatu").val(),
             "activityType":$("#my_actType").val(),

             "year":$("#my_actYear").val(),
             "categoryCode":$("#my_actFirstMajor").val(),
             "majorCode":$("#my_actSeconMajor").val(),
         },
         beforeSend: function(jqXHR, settings) {
             $mediamanager.html('数据加载中，请稍后 ...');
         }
     },
     pageList: [12],
     callback: function(data, pagination){
         var html = template3(data);
         $mediamanager.html(html);
         $mediamanager.off( "click", ".thmb-prev");
         $mediamanager.on( "click", ".thmb-prev", function(){//点击预览
             var $this = $(this),
                 _id = $this.attr("id");
             preActivityModal(_id);
             applayerNameMY(_id);
         })
         //点击编辑
          $mediamanager.on( "click", ".editCourse", function() {//删除
             var $this = $(this),
              _id = $this.attr("id");
             $.data($('#addCourseModal')[0],"id",_id);
             editCourseModal();
         })
        //下架：4  上架：2  提交审核：1
         $mediamanager.off( "click", ".shelves");
         $mediamanager.on( "click", ".shelves", function() {
                 var $this = $(this),
                 _id = $this.attr("id");
                 _status = $this.attr("data-status");
 //                $thmb = $this.closest(".thmb"),
 //                $thmbPrev = $thmb.find(".thmb-prev"),
 //                _postId = $thmbPrev.attr("postId"),
 //                _tableName = $thmbPrev.attr("tableName");
             var text = '确定要'+$(this).text()+'吗？';
             App.alert({
                 title: "系统提示",
                 text: text,
                 type: "warning",
                 showCancelButton: true,
                 confirmButtonColor: '#DD6B55',
                 confirmButtonText: '确定',
                 cancelButtonText: "取消",
                 closeOnConfirm: false
             },
             function(isConfirm){
                 if (isConfirm){
                     sercice(sUrl.updateStudioActivityStatus, function(data){
                         if(data.success){
                             App.alert("系统提示",data.msg,"success");
                             $colsm.pagination('destroy');
                             courseList();
                         }else{
                             App.alert("系统提示",data.msg,"error");
                         }

                     }, {
                         "id" :_id,
                         "addressId" :storageAddressId,
                         "token":token,
                         "status":_status
                     });
                 }
             })    

         })

     }//callback结束
     })
 }
 function template3(data) {
     var html = '';
 $.each(data, function(index, item) {
     var id = item.id || "";

     var thumb = "";

     var thumb = item.cover ?  "http://artapp-dev-bucket.oss-cn-beijing.aliyuncs.com/"+item.cover : path + "/pc/images/media/default.png";

     var courseName = item.activityName || "";
     var amount = item.amount/100;//课程价格

     var status = item.status;//课程状态
     var statusDesc = item.statusDesc;//状态描述

     var createTime = item.createTime;//状态描述
     var createTime = new Date(createTime);
     var time1 = createTime.getFullYear()+ '/'+ ((createTime.getMonth() + 1)<10?'0'+(createTime.getMonth() + 1):(createTime.getMonth() + 1))+ '/'+ (createTime.getDate() < 10 ? '0'+createTime.getDate() : createTime.getDate());

     var regNumber = item.regNumber;//已报名
     var totalNumber = item.totalNumber;//总

     var edit ='';
     var statusDesc ='';
     //删除：3  发布：1  结束：2
     if(status=="0"||status=="10"){//status 1(显示 发布) 2(上架，显示) 4(下架，显示上架操作)
         edit +=      '<span class="pull-left inlineB corred mr10 cursor shelves" id="' + id + '" data-status="1">发布</span>';
         edit +=      '<span class="pull-left inlineB corred mr10 cursor editCourse" id="' + id + '" data-status="'+status+'">编辑</span>';
         statusDesc = '未发布';
     }else if(status=="1"||status=="11"){
         edit +=      '<span class="pull-left inlineB corred mr10 cursor shelves" id="' + id + '" data-status="2"> 结束</span>';
         statusDesc = '已发布';
         }
     else if(status=="2"){
         statusDesc = '已结束';
     }
     console.log(status);

     html += '<div class="col-lg-3 col-xs-6 col-sm-4 col-md-3  video videohover mt15">';
     html +=      '<div class="thmb cursor" style="height:250px;position:relative;">';
     html +=         '<div class="caozuo">';
     html +=             '<div class="ckbox ckbox-default pull-left" style="display:none;">';
     html +=                 '<input type="checkbox" onchange="chooseSingle(this)" id="check'+index+'" name="videoCollect" value="'+id+'" />';
     html +=                 '<label for="check'+index+'"></label>';
     html +=             '</div>';
     html +=            '</div>';
     html +=            '<div class="thmb-prev" id="' + id + '"  style="width:100%;height:68%;background:url('+thumb+') no-repeat center center;background-size: cover;position:relative;">';
     html +=            '<span class="no_open text-center">'+statusDesc+'</span>';     html +=            '</div>';
     html +=            '<div class="mt10 clearfix">'+'<span class="pull-left">'+courseName+'</span>'+'<span class="corred pull-right">¥'+amount+'</span>'+'</div>';
     html +=            '<div class="mt15 clearfix dflexL relative">';
     html +=                '<span>'+edit+'</span>';
     html +=                '<span class="pull-left corred mr5 cursor shelves" id="' + id + '" data-status="3">删除</span>';
     html +=                '<span class="pull-right absolute" style="width:70px;float:right!important;right:0">'+time1+'</span>';
     html +=            '</div>';
     html +=     '</div>';
     html +='</div>';
 });
 html += '';
     return html;
 }

3、效果图

5、刷新时 先destory

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