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）

最新文章

热门文章