zoukankan      html  css  js  c++  java
  • 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>    


  • 相关阅读:
    从一个word文件中读取所有的表格和标题(1)
    多线程下QAxObject指针为NULL的解决办法
    event对象,ie8及其以下
    日期插件kalendae,遇到的一些问题
    回车键和button按钮都绑定同一个事件,如何避免按回车的时候button重复点击
    jQuery.Cookie.js用法
    jquery操作radio单选按钮、checked复选框。
    拖拽改变div的大小
    [BZOJ 2242] [SDOI 2011] 计算器
    20181016提高测试
  • 原文地址:https://www.cnblogs.com/riskyer/p/3329054.html
Copyright © 2011-2022 走看看