jquery实现的分页显示功能示例

本文实例讲述了框架实现的分页显示功能。分享给大家供大家参考，具体如下：

我们在显示文章列表的时候，通常需要分页显示。

一种方式是通过结构化查询语言查询的限制进行分页，即只查询该页面的数据。

另外一种方式是查询出所有的数据，传递给前段，然后用框架控制只显示我们想看到的分页。

超文本标记语言代码

div class=' am-g ' div class=' am-u-sm-12 ' id=' ListTag '/div/div js代码

$(function(){ show page(1)；});函数showPage(page){ $ .ajax({ type:'GET '，URL : ' { urlParent $ }/newsmanagerst？cid=all '，dataType:'json '，success : function(data){ var newtalnum=data。长度；//新闻记录的总条数var页码=数学。ceil(newtonalnum/{ $新闻组})；//分页的总页数var content=' form class=' am-form ' id=' listContainer ' ' ' table class=' am-table am-table-分条am-table-悬停table-main ' id=' new list ' ' ' ad ' tr ' th class=' table-id ' id/th class=' table-title '标题/thth class='table-type '类别/thth class=' table-author am-hide-sm-only '作者/thth class=' table-date am-hide-sm-only '修改日期/thth class='table-set '操作/th ' '/tr ' '/广告“t正文”；for(var I=((第-1页)* { $新闻组})；I(page * { $ newagenum })inewsTotalNum；I){ content=' tr ' ' TD '(I 1)'/TD ' ' TDA href=' # ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' data[I].标题/a/TD " TD "数据[i].name/' TD ' ' TD class=' am-hide-sm-only ' '数据[i].作者/td' 'td class='am-hide-sm-only ' '数据[i].time/TD ' ' TD ' ' div class=' am-BTN-toolbar ' div class=' am-BTN-组am-BTN-组-xs ' ' ' a href=' { $ urlParent }/新闻更新？id=' data[i].id ' rel=' external no follow ' class=' am-BTN am-BTN-default am-BTN-xs am-text-secondary ' span class=' am-icon-pencil-square-o '/span编辑/a ' ' a href=' { $ urlParent }/newsDel？id=' data[i].id ' rel=' external no follow ' class=' am-BTN am-BTN-default am-BTN-xs am-text-danger am-hide-sm-only ' span class=' am-icon-trash-o '/span删除/a ' '/div/div ' '/TD ' '/tr '；}内容='/t body/table ' ' div class=' am-cf ' ' '共' newsTotalNum '条记录/"PageNum "页div class=' am-fr ' ' ' ul class=' am-pagining ' id=' page '；//判断前面是否还有页面if(page==1){ content=' Li class=' am-disabled ' a href=' # ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow '/a/Li；} else { content=' lia href=' JavaScript : show page('(page-1)')' rel=' external no follow '/a/Li '；} for(var I=1；I=PageNumi){ if(I==page){ content=' Li class=' am-active ' a href=' JavaScript : show page(' I ')' rel=' external no follow ' rel=' external no follow ' ' I '/a/Li '；} else { content=' lia href=' JavaScript : show page(' I ')' rel='外部不跟随' rel='外部不跟随' ' I '/a/Li '；} } //判断后面是否还有页面if(page==PageNum){ content=' Li class=' am-disabled ' a href=' # ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'/a/Li；} else { content=' lia href=' JavaScript : show page(' page 1 ')' rel=' external no follow '/a/Li '；}内容='/ul ' '/div ' '/div HR ' '/表单；$('#listTag ').empty()；$('#listTag ').追加（内容);} });}显示效果：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery常见经典特效汇总》 、 《jquery选择器用法总结》 及《jQuery常用插件及用法总结》

希望本文对大家的jQuery程序设计有所帮助。