jQuery easyUI Pagination控件自定义div分页(不用datagrid)
一般后台管理页面分页是通过datagrid加Pagination分页,但是如果前台页面没有用表格,例如博客的文章列表从上到下一般是到div分页,
这时如果还要用Pagination,则可以这样:
页面服务端返回json格式,返回时需要设置Pagination的总纪录数total,页面用jtemplates模板解析,避免拼html。
jTemplates插件允许定义一个显示模板,在展现数据时根据选择的模板来动态生成。
http://blog.****.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 > </div> <textarea > {#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 ></div> </div>