jQuery easyUI Pagination控件自定义div分页(不用datagrid)_easyui pagertion 自定义-程序员宅基地

技术标签: jQuery easyUI Pagina  jQuery easyUI Pagination控件自定义div分页  

一般后台管理页面分页是通过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>    



版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zyp630998758/article/details/41868339

智能推荐

Percona XtraDB Cluster双节点故障的情况_错误:没有任何匹配: percona-xtradb-cluster-程序员宅基地

文章浏览阅读2.7k次。1. 环境OS:Redhat 6.5Cluster:Percona-XtraDB-Cluster5.6.22-25主节点:hostname:mysql-pxc01ipaddr:192.168.163.6备节点:hostname:mysql-pxc02ipaddr:192.168.163.7 2. 查看当前状态1. 查看主节点状态_错误:没有任何匹配: percona-xtradb-cluster

各类存储器简介_存储器的主流型号和参数-程序员宅基地

文章浏览阅读3.6k次,点赞4次,收藏35次。存储器(Memory)是计算机系统中的记忆设备,用来存放程序和数据。计算机中全部信息,包括输入的原始数据、计算机程序、中间运行结果和最终运行结果都保存在存储器中。它根据控制器指定的位置存入和取出信息。有了存储器,计算机才有记忆功能,才能保证正常工作。按用途存储器可分为主存储器(内存)和辅助存储器(外存),也有分为外部存储器和内部存储器的分类方法。外存通常是磁性介质或光盘等,能长期保存信_存储器的主流型号和参数

CAPL中常用数学函数API_capl取余-程序员宅基地

文章浏览阅读3.9k次,点赞2次,收藏35次。这里写目录标题functionsint64 _atoi64(char s[]);float _ceil(float x);float _floor(float x);functionsint64 _atoi64(char s[]);将一个字符串转换成64bits整形数据,字符串应该是十进制的字符串如果转换失败,返回值为0,转换成功,返回值就是转换的结果。 On key 'c'{// run project and press key 'c' int64 i; i = _atoi_capl取余

深度学习技术发展趋势浅析_深度学习方法、模型的发展趋势-程序员宅基地

文章浏览阅读1.4w次,点赞5次,收藏52次。https://mp.weixin.qq.com/s/FtIhKiENv483iHE053RPkg当前,人工智能发展借助深度学习技术突破得到了全面关注和助力推动,各国政府高度重视、资本热潮仍在加码,各界对其成为发展热点也达成了共识。本文旨在分析深度学习技术现状,研判深度学习发展趋势,并针对我国的技术水平提出发展建议。一、深度学习技术现状深度学习是本轮人工智能爆发的关键技术。..._深度学习方法、模型的发展趋势

python dict 选择第一个、最后一个元素的key或value_python dict 取第一个值-程序员宅基地

文章浏览阅读1.7w次,点赞8次,收藏17次。比如字典:my_dict = { "first_key": 'first_value', "second_key": "second_value", "third_key": "third_value",}如果使用:print(my_dict.keys()[0])print(my_dict.values()[0])这会导致报错:TypeError: 'dict_keys' object is not subscriptableTypeError: 'dict_va_python dict 取第一个值

重学pandas(一)之读取数据DataFram的简单使用_panda datafram-程序员宅基地

文章浏览阅读2.4k次。文章目录前言案例解读读取数据文本文件excel文件数据库jsonDataFrame构造根据字典根据numpy构造根据列表构造属性方法四则运算转换前言工作了一段时间,天天写sql,玩linux上的脚本;已经快忘记python怎么写了,pandas忘记的更是干净,便打算写一写博客来复习一下pandas的API。案例解读读取数据文本文件 ''' Flat file 平面文件->文..._panda datafram

随便推点

北邮22级信通院数电:Verilog-FPGA(11)第十一周实验(1)用JK触发器实现8421码十进制计数器_you 用jk触发器实现8421码十进制计数器-程序员宅基地

文章浏览阅读2.3k次,点赞15次,收藏8次。北邮22级信通院数电:Verilog-FPGA(11)第十一周实验(1)用JK触发器实现8421码十进制计数器_you 用jk触发器实现8421码十进制计数器

前端vue echart自定义图表(柱形图 折线图 饼图 树形结构图 关系图谱 )_vue 图表 自定义工具-程序员宅基地

文章浏览阅读3k次,点赞2次,收藏7次。前端组件化开发:使用ECharts快速实现自定义图表摘要:随着前端开发技术的发展,组件化开发已成为提高开发效率和降低维护成本的有效手段。本文将介绍如何使用ECharts库进行前端组件化开发,快速实现自定义的图表,包括柱形图、折线图、饼图、树形结构图和关系图谱等。通过结合业务特性的模块拆分策略、模块间的交互方式和构建系统等,可以实现灵活的组件组合和扩展,提高开发效率和降低维护成本。一、引言在前端开发中,图表的展示对于数据的可视化具有重要意义。_vue 图表 自定义工具

vue 简单的页面刷新或者跳转页面的数据保存问题_vue3 页面跳转数据不保存-程序员宅基地

文章浏览阅读9.6k次。当我们想刷新页面也保存当时的数据的时候,会遇到这样那样的问题,其实,仅仅的几行代码就什么都解决了,下面是代码(js):var vm = new Vue({ el:'.search_moduel', data:{ history:[] //存储查询历史记录的数据 }, methods:{ //刷新页面或者从别的页面进入,提取this.history的值 getPag..._vue3 页面跳转数据不保存

js之ActiveX控件使用说明 new ActiveXObject()-程序员宅基地

文章浏览阅读139次。什么是 ActiveX 控件?ActiveX 控件广泛用于 Internet。它们可以通过提供视频、动画内容等来增加浏览的乐趣。不过,这些程序可能出问题或者向您提供不需要的内容。在某些情况下,这些程序可被 用来以您不允许的方式从计算机收集信息、破坏您的计算机上的数据、在未经您同意的情况下在您的计算机上安装软件或者允许他人远程控制您的计算机。考虑到这 些风险,您应该在完全信任发行商的情况下才安装..._new activex

ssm计算机毕业设计基于Android健身信息管理系统(源码+程序+app+论文)-程序员宅基地

文章浏览阅读751次,点赞11次,收藏12次。它能够帮助用户更加科学地管理自己的健身活动,通过系统化的数据分析,用户可以清晰地看到自己的运动量、消耗的卡路里、身体各项指标的变化等,这些数据对于用户制定合理的健身计划至关重要。该系统能够提供个性化的健身指导和建议,对于不同体质和需求的用户,系统可以推荐适合的健身方案,提高健身效率,减少运动伤害。随着健康大数据时代的到来,个人的健身数据将变得越发重要,一个能够有效管理和分析这些数据的系统,不仅能够帮助个人实现健康管理,还可能为医疗健康领域提供有价值的数据支持,促进公共卫生事业的发展。

串口测试(本地回环)_ttys5-程序员宅基地

文章浏览阅读1.6k次。不借助应用程序,使用系统命令,进行串口功能测试_ttys5

推荐文章

热门文章

相关标签