jQuery Pagination Plugin ajax分页控件
<html>
<body>
<div id="datagrid">
</div>
<div id="pagination">
</div>
</body>
<script src="http://image.**.com/common/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js"></script>
<script type="text/javascript">
var pagination = {
$divPagination: $('#pagination'), //分页控件容器
$divDatagrid: $('#datagrid'), //数据容器
urlRecordCount: "index.php?c=homepage&m=prizeRecordCount", //接口返回数据的总行数
urlRecordLists: "index.php?c=homepage&m=prizeLogLists&pageIndex=", //接口返回JSON格式的数据
callback: function(pageIndex, $divPagination) {
$.getJSON(pagination.urlRecordLists + pageIndex, function(jsonRecordLists) {
if (jsonRecordLists == undefined || jsonRecordLists.length == 0) {
pagination.$divDatagrid.html('没有数据');
return false;
} html = '';
$.each(jsonRecordLists, function(index, item) {
html += '奖品:' + item['prize_name'] + ' 时间:' + item['create_time'] + '<br/>';
}); pagination.$divDatagrid.html(html);
});
return false;
},
initPagination: function() {
$.getJSON(pagination.urlRecordCount, function(recordCount) {
pagination.$divPagination.pagination(recordCount, {
callback: pagination.callback,
items_per_page: 10, //pageSize
next_text: '下一页',
next_show_always: false, //当下一页无法使用时是否显示,true(默认)
prev_text: '上一页',
prev_show_always: false,
link_to: 'javascript:void(0);', //分页href中的内容,#(默认)
num_display_entries: 11, //最多显示多少分页链接:11(默认),0(只显示上一下和下一页)
num_edge_entries: 1, //1(任何情况下都显示第一页和最后一页),0(不显示)
ellipse_text: '...', //当num_edge_entries>0时,分页使用的省略符号
current_page: 0, //默认pageIndex,0(默认),false(不加载)
load_first_page: true, //第一次自动加载,true(默认),false(不加载)
});
});
}
}; $(document).ready(function() {
pagination.initPagination();//分页控件初始化
});
</script>
</html>
//php后台返回JSON数据
$pageIndex = intval($this->input->get('pageIndex'));
$test = $this->homepage_model->getPrizeLogLists($pageIndex, 10);
$test = eval('return ' . iconv('gbk', 'UTF-8', var_export($test, true) . ';'));
exit(json_encode($test));
JQuery_pagination:https://github.com/gbirke/jquery_pagination
jQuery Pagination Plugin ajax分页控件的更多相关文章
- ajax 分页控件,基于jquery
/* 分页插件,依赖jQuery库 version: 1.1.0 author: Harrison Cao release date: 2013-09-23 相对 v1.0版本 修正了分页居中 使用方 ...
- 基于jquery扩展漂亮的分页控件(ajax)
分页控件式大家在熟悉不过的控件,很多情况下都需要使用到分页控件来完成列表数据加载操作,在很多分页控件中有的编写麻烦,有的应用扩展比较复杂,有的分页控件样式比较丑陋,有的分页控件用户体验操作比较简单等等 ...
- 使用jQuery Pagination Plugin实现分页效果
最近使用分页这个基础效果较为频繁,而项目前端页面使用的是纯静态的HTML,自己之前写的JSP中的分页就用不成了:项目中也引入了Bootstrap,本来想使用Bootstrap中的分页样式,但发现其样式 ...
- 基于avalon+jquery做的bootstrap分页控件
刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代 ...
- jquery 分页控件2
jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...
- MVC4 5分页控件,支持Ajax AjaxOption支持
MVC4 5分页控件,支持Ajax AjaxOption支持 /// <summary> /// MVC4 5分页控件,支持Ajax AjaxOption支持 beta 1.0 /// 用 ...
- jquery 分页控件(二)
上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的,我弄了个简单的asp.net ...
- jquery 分页控件1
jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...
- jquery 分页控件(一)
以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许还很多.个人觉得,适合自己用就 ...
随机推荐
- Zabbix监控Linux主机设置
说明: Zabbix监控服务端已经配置完成,现在要使用Zabbix对Linux主机进行监控. 具体操作: 以下操作在被监控的Linux主机进行,这里以CentOS 6.x系统为例. 一.配 ...
- qt介绍
http://www.oschina.net/p/qt Qt 是一个跨平台的C++图形用户界面应用程序框架.它提供给开发者建立图形用户界面所需的功能,广泛用于开发GUI程序,也可用于开发非GUI程序. ...
- JVM(Java虚拟机)优化大全和案例实战
堆内存设置 原理 JVM堆内存分为2块:Permanent Space 和 Heap Space. Permanent 即 持久代(Permanent Generation),主要存放的是Java类定 ...
- ACM学习-POJ-1004-Financial Management
菜鸟学习ACM,纪录自己成长过程中的点滴. 学习的路上,与君共勉. ACM学习-POJ-1003-Financial Management Financial Management Time Limi ...
- LightOJ 1085(树状数组+离散化+DP,线段树)
All Possible Increasing Subsequences Time Limit:3000MS Memory Limit:65536KB 64bit IO Format: ...
- ImageView 会盖掉ScrollView的OnTouchListener,监听Activity的手势
当Activity的高度不够滑动的时候,ImageView会盖掉ScrollView的OnTouchListener监听. 这个时候须要设置Activity的(或者想直接监听Activity的手势也能 ...
- Android之TextView的样式类Span的使用具体解释
Android中的TextView是个显示文字的的UI类,在现实中的需求中,文字有各式各样的样式.TextView本身没有属性去设置实现,我们能够通过Android提供的 SpannableStrin ...
- div footer标签css实现位于页面底部固定
Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...
- [转]Java虚拟机类加载机制浅谈
Java语言是一种编译后再经过解释器执行的过程, 解释器主要就是如何处理解释Class文件的二进制字节流.JVM主要包含三大核心部分:运行时数据区,类加载器和执行引擎. 虚拟机将描述类的数据从Clas ...
- “entities.LastOrDefault()”引发了类型“System.NotSupportedException”的异常
问题: var entities = new ShipuPlanBLO().UserList(userId, beginDate, endDate); DateTime maxDate = entit ...