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();
})

pagination用法的更多相关文章

  1. JQuery Easy Ui DataGrid

    Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults. The datagrid display ...

  2. jQuery EasyUI DataGrid API 中文文档

        扩展自$.fn.panel.defaults,用 $.fn.datagrid.defaults重写了 defaults . 依赖 panel resizable linkbutton pagi ...

  3. jQuery EasyUI 详解

    EasyUI 简介 easyui 是一种基于 jQuery 的用户界面插件集合. easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能. 使用 easyui 你不需要写很多 ...

  4. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  5. jQuery EasyUI - 数据表格(DataGrid)

    由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格. 1.加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery, ...

  6. jQuery分页插件pagination的用法

    https://www.zhangxinxu.com/jq/pagination_zh/ 参数: 参数名 描述 参数值 maxentries 总条目数 必选参数,整数 items_per_page 每 ...

  7. salesforce 零基础学习(四十八)自定义列表分页之Pagination基类封装 ※※※

    我们知道,salesforce中系统标准列表页面提供了相应的分页功能,如果要使用其分页功能,可以访问http://www.cnblogs.com/zero-zyq/p/5343287.html查看相关 ...

  8. knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页

    Knockoutjs 是一个微软前雇员开发的前端MVVM JS框架, 具体信息参考官网 http://knockoutjs.com/ Web API数据准备: 偷个懒数据结构和数据copy自官网实例  ...

  9. EasyUI中Base(基础)的基本用法

    EasyUI中Base(基础)的用法 一.Base(基础) 1.parser 解析器 2.easyloader 简单加载 3.draggable 拖动 4.droppable 放置 5.resizab ...

随机推荐

  1. python的多继承C3(mro)算法

    多继承的继承顺序按照C3算法进行顺序继承 例一 按照深度A类从左往右有三条可继承的"路" 先按照深度优先的算法,将每一路的每一个节点加到列表中 B = [B,D,F,H] C = ...

  2. 内置函数系列之 sorted排序

    sorted排序函数语法: sorted(可迭代对象,key=函数(默认为None),reverse=False) 将可 迭代对象的每一个元素传进key后面的函数中,根据函数运算的结果(返回值)进行排 ...

  3. 中缀表达式转后缀表达式(Python实现)

    中缀表达式转后缀表达式 中缀表达式转后缀表达式的规则: 1.遇到操作数,直接输出: 2.栈为空时,遇到运算符,入栈: 3.遇到左括号,将其入栈: 4.遇到右括号,执行出栈操作,并将出栈的元素输出,直到 ...

  4. 笔记-python-module-logging.循环日志、多进程日志

    笔记-python-module-logging.循环日志.多进程日志 1.      logging循环日志 循环日志分为按大小切分和按时间切分,对应实现类如下. 1.1.  RotatingFil ...

  5. java练习题——字符串

    一.动手动脑之String.equals()方法: 判断s1和s2的内容相同s1.equals(s2). 判断s1和s2的地址相同s1 == s2. 二.整理String类的Length().char ...

  6. viewpager 无网络的时候滑动异常

    不知道大家有没有遇到过这种情况,就是框架是viewpager+fragment的架构.然后呢,fragment里面是webview.一般情况下,当没有网的时候,webviwe会说什么找不到网页,然后很 ...

  7. 一个简单的同步集群的shell脚本

    编写一个xsync文件 然后放在/usr/local/bin 目录下面 xsync文件如下: #!/bin/bash #1 获取输入参数个数,如果没有参数,直接退出 pcount=$# if((pco ...

  8. windows 定时任务 - 定时关机

    添加定时关机,刚好可以利用windows定时任务 [开始]->[控制面板]->[任务计划]->[添加任务计划] 1.找到 shutdown.exe 设置每天执行 2.设置晚上10点 ...

  9. 2018"百度之星"程序设计大赛 - 资格赛 - 题集

    1001 $ 1 \leq m \leq 10 $ 像是状压的复杂度. 于是我们(用二进制)枚举留下的问题集合 然后把这个集合和问卷们的答案集合 $ & $ 一下 就可以只留下被选中的问题的答 ...

  10. ARC下还会存在内存泄露吗?

    1.第三方框架不正当使用.2.block,delegate,NSTimer循环使用.3.非oc对象的内存处理.4.地图类处理.5.大次数循环内存暴涨. 非oc对象的释放: 例如使用CGImageRel ...