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="100%;height:68%;background:url('+thumb+') no-repeat center center;background-size: cover;position:relative;">';
    html +=            '<span class="no_open text-center">'+statusDesc+'</span>';148     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="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();
})