pagination用法：

1、html 

要用两层div

2、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  结束：2124     if(status=="0"||status=="10"){
   //status 1(显示 发布) 2(上架，显示) 4(下架，显示上架操作)125         edit +=      '发布';126         edit +=      '编辑';127         statusDesc = '未发布';128     }else if(status=="1"||status=="11"){129         edit +=      ' 结束';130         statusDesc = '已发布';131         }132     else if(status=="2"){133         statusDesc = '已结束';134     }135     console.log(status);136     137     html += '
     
      ';138     html +=      '
      
       ';139     html +=         '
       
        ';140     html +=             '
        
         ';141     html +=                 '
         ';142     html +=                 '
         ';143     html +=             '
        
';144     html +=            '
       
';145     html +=            '
       
        ';146     html +=            '
        '+statusDesc+'';148     html +=            '
       
';149     html +=            '
       
        '+'
        '+courseName+''+'
        ¥'+amount+''+'
       
';150     html +=            '
       
        ';    151     html +=                '
        '+edit+'';152     html +=                '
        删除';153     html +=                '
        '+time1+'';154     html +=            '
       
';155     html +=     '
      
';   156     html +='
     
';157 });158 html += '';159     return html;160 }

 

 

 

3、效果图

 

5、刷新时 先destory

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