jQuery easyUI Pagination控件自定义div分页(不用datagrid)
一般后台管理页面分页是通过datagrid加Pagination分页,但是如果前台页面没有用表格,例如博客的文章列表从上到下一般是到div分页,
这时如果还要用Pagination,则可以这样:
页面服务端返回json格式,返回时需要设置Pagination的总纪录数total,页面用jtemplates模板解析,避免拼html。
jTemplates插件允许定义一个显示模板,在展现数据时根据选择的模板来动态生成。
http://blog.csdn.net/gdjlc/article/details/8479073
<script type="text/javascript">
var pageIndex = 1; //页面索引初始值
var pageSize = 10; //每页显示条数初始化
$(function () {
initTable(1, pageSize);
$('#Pagination').pagination({
pageSize: 10,
pageNumber: 1,
pageList: [5, 10, 15, 20],
onSelectPage: function (pageNumber, pageSize) {
$(this).pagination('loading');
$(this).pagination('loaded');
initTable(pageNumber, pageSize);
}
});
function initTable(pageIndex, pageSize) {
$.net.ArticleBLL.GetPageData(pageIndex, pageSize, function (data) {
$("#TmpContent").setTemplateElement("template", null, { filter_data: false });
$("#TmpContent").processTemplate(data);
$('#Pagination').pagination({ total: data.total});
});
} });
</script>
<div id="TmpContent">
</div>
<textarea id="template" style="display:none">
{#foreach $T.rows as record}
<div class="day">
<div class="dayTitle">
<a href="#" class="jsondate">
{$T.record.PublishDate} </a>
</div>
<div class="postTitle">
<a class="postTitle2"
href="Detail.aspx?id={$T.record.Id}"> {$T.record.Subject}</a>
</div>
<div class="postCon">
<div class="c_b_p_desc">
{$T.record.Content}<a href="Detail.aspx?id={$T.record.Id}"
class="c_b_p_desc_readmore">阅读全文</a></div>
</div>
<div class="clear">
</div>
<div class="postDesc">
posted @ <span class="jsondate2">{$T.record.PublishDate}</span> gdjlc 阅读(19) <a href="#"
rel="nofollow">编辑</a></div>
<div class="clear">
</div>
</div>
{#/for}
</textarea>
<div class="topicListFooter">
<div id="Pagination" style="background:#F5F5F5;border:1px solid #ccc;"></div>
</div>
jQuery easyUI Pagination控件自定义div分页(不用datagrid)的更多相关文章
- repeater控件自定义Url分页带参数
repeater控件的效果图如下: 该页面实现的功能如下: 1.上下分页,(也可以带首页和末页,我只是禁掉了没用) 2.根据用户输入的指定分页索引进行跳转 3.根据筛选数据的参数进行URL分页的参数传 ...
- JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日
标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...
- jquery easyui 日历控件和文本框结合使用生成日期
html部分---等待接收所选日期的文本框 <td> <input name='input_date' required class='easyui-textbox' id='xiw ...
- Jquery获取EasyUI时间控件的值
jquery easyui日期控件中,在页面里用JS拿到设置的日期值的方法 jquery easyui 日期框 有这样的一个日期文本框: <input type=" value=&qu ...
- [转]easyui常用控件及样式API中文收藏
[转]easyui常用控件及样式收藏 2013-05-06 23:01 30612人阅读 评论(0) 收藏 举报 分类: java ee(5) 目录(?)[+] CSS类定义: div easyu ...
- 基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
- 一些基于jQuery开发的控件
基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...
- jquery日期时间控件
代码下载地址: jquery日期时间控件下载地址 . 工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件 <!DOCTYPE HTML PUBLIC "- ...
- easyUI 验证控件应用、自己定义、扩展验证 手机号码或电话话码格式
easyUI 验证控件应用.自己定义.扩展验证 手机号码或电话话码格式 在API中 发现给的demo 中没有这个验证,所以就研究了下. 相关介绍省略,直接上代码吧! watermark/2/tex ...
随机推荐
- codeforces 702E Analysis of Pathes in Functional Graph 倍增
题目链接 给一个图, 然后给出每条边的权值和一个k值. 让你求出从每个点出发, 走k次能获得的边权的和以及边权的最小值. 用倍增的思想, 求出每个点走一次能到达的点, 权值和以及最小值, 走两次..四 ...
- Linq to sql 操作
1.往数据库添加数据 NorthwindDataContext abc = new NorthwindDataContext(); abc.Log = Console.Out; User a = ne ...
- Http网络请求
前提说明: 1.Str.Empty 其实就是 string.Empty 2.@object.IsNull() 的IsNull() 是判断“是否等于null”的扩展方法,等同于 @object==nu ...
- Android APN配置
APN概念 APN(Access Point Name),即“接入点名称”,用来标识GPRS的业务种类,目前分为两大类:CMWAP(通过GPRS访问WAP业务).CMNET(除了WAP以外的服务目前都 ...
- 简单RTP发送类c++实现
我之前编译了jrtplib 3.9.1,并且在项目中使用,结果发现在用这个库时,程序体积有增加了300多K,感觉实在是有点笨重,我无法就是用来发送rtp包而已.想想还是自己重新实现一个简单的类用用拉倒 ...
- JAVA之数组查询binarySearch()方法详解
binarySearch()方法提供了多种重载形式,用于满足各种类型数组的查找需要,binarySearch()有两种参数类型 注:此法为二分搜索法,故查询前需要用sort()方法将数组排序,如果数组 ...
- Android中数据库的操作流程详解
Android中数据库的操作方法: 1.Android平台提供了一个数据库辅助类来创建或打开数据库. 这个辅助类继承自SQLiteOpenHelper类.继承和扩展SQLiteOpenHelper类主 ...
- 【双向广搜+逆序数优化】【HDU1043】【八数码】
HDU上的八数码 数据强的一B 首先:双向广搜 先处理正向搜索,再处理反向搜索,直至中途相遇 visit 和 队列都是独立的. 可以用一个过程来完成这2个操作,减少代码量.(一般还要个深度数组) 优化 ...
- SharePoint2010 Form验证配置流程
1.修改管理中心的Web.config文件,位置:C:\inetpub\wwwroot\wss\VirtualDirectories\42903 2.修改应用程序的Web.config文件,位置:C: ...
- #import和#include的区别 关键字@class的作用
一.#import和#include的区别当我们在代码中使用两次#include的时候会报错:因为#include相当于拷贝头文件中的声明内容,所以会报重复定义的错误但是使用两次#import的话,不 ...