jQuery easyUI Pagination控件自定义div分页（不用datagrid）

最新推荐文章于 2022-04-07 09:50:29 发布

gdjlc

最新推荐文章于 2022-04-07 09:50:29 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/gdjlc/article/details/11816739

jQuery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在不使用datagrid的情况下，利用jQuery easyUI的Pagination控件自定义div进行分页操作，详细讲解了实现步骤和关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般后台管理页面分页是通过datagrid加Pagination分页，但是如果前台页面没有用表格，例如博客的文章列表从上到下一般是到div分页，
这时如果还要用Pagination，则可以这样：
页面服务端返回json格式，返回时需要设置Pagination的总纪录数total，页面用jtemplates模板解析，避免拼html。
jTemplates插件允许定义一个显示模板，在展现数据时根据选择的模板来动态生成。

http://blog.youkuaiyun.com/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>