amazeui分页
<link rel="stylesheet" href="../../static/css/manage/amazeui.min.css" />
<script src="../../static/js/manage/jquery-2.1.4.js"></script>
<script src="../../static/js/manage/amazeui.min.js"></script>
<script type="text/javascript" src="../../static/js/manage/amazeui.page.js"></script>
<div class="row">
<div id="page"></div>
</div>
function loadImg(curpage, isfirst) {
g_first = isfirst;
$.ajax({
type: "post",
url: "/mpapi/get_videos",
data: {
"page": curpage,
"count": item_count
},
dataType: "json",
success: function(ret) {
var htm = "";
if(ret["result"] == 1) {
// $.AMUI.progress.set(0.4);
video_info = ret.video
console.log(video_info)
$.each(ret["video"], function(i, v) {
var t = timestp2DateStr(v.ctime);
var statu;
var color;
console.log(v.status);
if(v.status){
statu = "已上架"
bstatus = "下架"
color = "dColor"
}else{
statu = "未上架"
bstatus = "上架"
color = "pColor"
}
htm += `<tr tind=${index++}>
<td class="am-text-middle">
<img src="${v.main_img}" class="video_url">
</td>
<td class="am-text-middle video_name">${v.name}</td>
<td class="am-text-middle video_desc">${v.desc}</td>
<td class="am-text-middle video_desc">${t}</td>
<td class="am-text-middle video_link">${v.url}</td>
<td class="am-text-middle ${color}">
${statu}
</td>
<td class="am-text-middle">
<div class="tpl-table-black-operation">
<a href="javascript:;" onclick="pub_article(\'${v.video_id}\',\'${statu}\')">
<i class="am-icon-pencil"></i>
${bstatus}
</a>
<a href="javascript:;" onclick="edit_btn_event(\'${i}\')">
<i class="am-icon-pencil"></i> 编辑
</a>
<a href="javascript:;" class="tpl-table-black-operation-del" onclick="btn_delete(\'${i}\')">
<i class="am-icon-trash"></i> 删除
</a>
</div>
</td>
</tr>`;
})
$("#video_table").html(htm);
var page_count = parseInt(ret.count / item_count) + (ret.count % item_count == 0 ? 0 : 1);
if(g_first){page_plugin(page_count);}
} else if(ret["result"] == -301){
window.location.href = "/manage/login"
return
}else{console.log("无数据");
$("#video_table").html(htm);}
},
error: function(err) {
console.log(err);
}
})
}
var page_plugin = function(page_count) {
$("#page").page({
pages: page_count,
curr:curpage,
groups: 5,
first: "首页",
last: "尾页",
prev: false,
next: false,
jump: function(context, first) {
if(!first) {
curpage = context.option.curr;
loadImg(curpage,false);
}
}
})
}
amazeui分页的更多相关文章
- amazeui学习笔记--css(常用组件11)--分页Pagination
amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...
- ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项
引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...
- react搭配amazeui环境搭建
1.安装node https://nodejs.org/en/download/ 查看node npm版本 2.安装react 创建新的react单页面应用 npm install -g cre ...
- amazeui学习笔记一(开始使用2)--布局示例layouts
amazeui学习笔记一(开始使用2)--布局示例layouts 一.总结 1.样例分析(不要忘记,优先分析这个布局示例):有教你页面怎么布局的,实例中可以分析一波 2.响应式:对应meta标签中的v ...
- amazeui中内置的web组件有哪些且如何用
amazeui中内置的web组件有哪些且如何用 一.总结 一句话总结: 1.组件还是jquery.js+amazeui.js,和插件一样,准确的说是amazeui.css+jquery.js+amaz ...
- 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题
最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...
- js实现前端分页页码管理
用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...
- JdbcTemplate+PageImpl实现多表分页查询
一.基础实体 @MappedSuperclass public abstract class AbsIdEntity implements Serializable { private static ...
- MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
随机推荐
- Docker 多主机方案
利用OpenVSwitch构建多主机Docker网络 [编者的话]当你在一台主机上成功运行Docker容器后,信心满满地打算将其扩展到多台主机时,却发现前面的尝试只相当于写了个Hello World的 ...
- asp.net ajax get 调用(和post不一样,直接返回json才行,否则报错;post不能返回json)
<script type="text/javascript" > $(document).ready(function () { $('#Label1').click( ...
- supervisord的安装使用
由于生产环境使用的的tomcat,项目比较重要,所以要做进程守护,本来打算自己写脚本,但是效果不理想,想了下还是用supervisord了 由于很久不用,所以写下来部署步骤 第一:安装,安装的方法有y ...
- open()函数 linux中open函数使用
来源:http://www.cnblogs.com/songfeixiang/p/3733855.html linux中open函数使用 open函数用来打开一个设备,他返回的是一个整型变量,如果 ...
- 在CentOS6.9 x86下编译libusb-1.0.22遇到的两个问题
OS版本:CentOS 6.9 x86,内核版本2.6.32 问题一:configure.ac:36: error: Autoconf version 2.69 or higher is requir ...
- Grafana报警--通知渠道配置
最近研究了prometheus+grafana的系统监控,使用grafana的报警功能,grafana支持很多种通知渠道,下文记录使用到的几种notification channels,分别是emai ...
- 上位机与三菱FX3U通过FX-232-BD通信
PLC侧设置: 和校验+协议4 读D200单字: 05 30 30 46 46 57 52 30 44 30 32 30 30 30 31 返回“201”:02 30 30 46 46 30 ...
- C#使用Spire.Doc Word for .Net读写Word
以前对Excel或Word文档操作都使用微软的COM组件Microsoft Word 15.0 object library. 但是这种方式必须要求服务器上安装Office,而且会出现读写操作完成后未 ...
- Python学习—数据库篇之初识mysql
一.下载与安装 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是最好 ...
- linux之egrep命令
1.介绍 egrep工具是grep工具的扩展,相当于grep -E 2.用法 查找1个或1个以上前面的字符为例 查找0个或1个前面字符 egrep 'o?' 1.txt 匹配roo或者body egr ...