一般后台管理页面分页是通过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)的更多相关文章

  1. repeater控件自定义Url分页带参数

    repeater控件的效果图如下: 该页面实现的功能如下: 1.上下分页,(也可以带首页和末页,我只是禁掉了没用) 2.根据用户输入的指定分页索引进行跳转 3.根据筛选数据的参数进行URL分页的参数传 ...

  2. JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日

    标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...

  3. jquery easyui 日历控件和文本框结合使用生成日期

    html部分---等待接收所选日期的文本框 <td> <input name='input_date' required class='easyui-textbox' id='xiw ...

  4. Jquery获取EasyUI时间控件的值

    jquery easyui日期控件中,在页面里用JS拿到设置的日期值的方法 jquery easyui 日期框 有这样的一个日期文本框: <input type=" value=&qu ...

  5. [转]easyui常用控件及样式API中文收藏

    [转]easyui常用控件及样式收藏 2013-05-06 23:01 30612人阅读 评论(0) 收藏 举报  分类: java ee(5)  目录(?)[+] CSS类定义: div easyu ...

  6. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  7. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  8. jquery日期时间控件

    代码下载地址:  jquery日期时间控件下载地址 .  工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件    <!DOCTYPE HTML PUBLIC "- ...

  9. easyUI 验证控件应用、自己定义、扩展验证 手机号码或电话话码格式

    easyUI 验证控件应用.自己定义.扩展验证 手机号码或电话话码格式 在API中   发现给的demo 中没有这个验证,所以就研究了下. 相关介绍省略,直接上代码吧! watermark/2/tex ...

随机推荐

  1. Binder的非正常消亡时的重置方法

    一.原理 当Binder非正常消亡的时候,会导致远程调用失败,这样客户端功能就会受到影响. 解决:给Binder设置一个死亡代理,当Binder死亡时,我们就会收到通知,这个时候可以重新发起连接. 二 ...

  2. wamp出现You don’t have permission to access/on this server提示(转)

    转自http://blog.csdn.net/hong0220/article/details/40262729 ,转载方便以后查看. 今天搭建wamp集成环境,本来已经搭建好了,但是在访问local ...

  3. 16-GDBT(MART) 迭代决策树入门教程 | 简介

    转载:http://blog.csdn.net/w28971023/article/details/8240756 GBDT(Gradient Boosting Decision Tree) 又叫 M ...

  4. C的陷阱和缺陷研读笔记02

    宏: 宏不是函数 展开会产生庞大的表达式 #define MIN(A,B) ((A) <= (B) ? (A) : (B))MIN(*p++, b)会产生宏的副作用 剖析: 这个面试题主要考查面 ...

  5. 推荐大家使用的CSS书写规范、顺序(转载)

    转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...

  6. 你想建设一个能承受500万PV/每天的网站吗?如果计算呢?(转)

    作者:赵磊 博客:http://elf8848.iteye.com 你想建设一个能承受500万PV/每天的网站吗? 500万PV是什么概念?服务器每秒要处理多少个请求才能应对?如果计算呢? PV是什么 ...

  7. 2014第11周一word样式

    今天摸索使用了word的样式替换功能感觉不错,简单记录下: 1.将某一个样式的标题统一替换为另一样式,之前一般是格式化一个个找到标题设置格式, 今天才发现可以选中标题->在浮动框上单击样式或开始 ...

  8. XCode 7上传遇到ERROR ITMS-90535 Unexpected CFBundleExecutable Key. 的解决办法(转)

    原文:http://blog.csdn.net/wxs0124/article/details/48706685 找到腾讯的info.plist 删除箭头指向的一行 重新打包,上传. (注明,不一定是 ...

  9. linux系统的性能问题排除分析

    需要结合sar和top进行检查. top下关注load,%wa,%idle等 sar -u -o cpureport 10 3 每10秒采集3次 放在同目录下的文件cpureport 里 检查io s ...

  10. SQL 字段里有逗号隔开的数据的取值

    table 1 : id code1 0012 001,0023 001,002,003 table 2:code name001 数学002 体育003 美术 要求结果 id name1 数学2 数 ...