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开发了个人线上项目(要说线上其实只 ...
随机推荐
- 奇怪,Linux下find找不到文件了
你遇到过linux下root用户执行find命令按文件名在根目录下查找不到指定文件的情况吗?如果你遇到这种情况,你分析可能有哪几种原因导致?这里记录一下这个有意思的问题. 问题现象 实现一个工具,需要 ...
- NABCD-课程表开发
N:需求 1.学生录入课程需求. 2.学生对于空教室使用需求(自习或活动占用). 3.学生对于具体课程的查询需求. A:做法 基于安卓课程查询,录入系统. B:好处 1.满足课程表的基本需求 2.便于 ...
- Java框架spring 学习笔记(十六):c3p0连接池的配置以及dao使用jdbcTemplate
连接池可以大大提高数据库的性能和连接速度,将那些已连接的数据库连接存放在一个连接池里,以后别人要连接数据库的时候,将不会重新建立数据库连接,直接从连接池中取出可用的连接,用户使用完毕后,会释放连接重新 ...
- vue翻页器,包括上一页,下一页,跳转
翻页组件 -- 子组件<template> <div class="pager-wrapper" ref="pager"> <di ...
- docker容器跑redis
命令行配置: $ docker search redis $ docker pull docker.io/redis $ mkdir -p /redis/etc/conf /redis/lib /r ...
- 错误: 找不到或无法加载主类 hello.class
今天复习Java,弄了一个helloworld,然后发现报错了,后来发现,原来执行的时候不能在后面添加.class
- jQuery轮播图--不使用插件
说明:引入jquery.min.js 将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 长短steamId互转
/** * steam_id转换account_id * @param $steamId * @return mixed */ public static function formatAccount ...
- docker简单搭建gitlab
docker启动非常简单: docker run --detach --hostname 192.168.0.33 --publish 443:443 --publish 80:80 \ --publ ...
- Scrapy简单入门及实例讲解
Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以 ...