实用的jquery分页特效插件jQuery paging是基于jQuery实现的，可以根据pageselectCallback函数的回调调用，通过ajax调用动态数据。目前的方法是生成JSON数据到JS文件，调用的数据是JSON格式的数据。缺点是数据只读出一次，效率会比较低。插件支持很多参数的自定义配置功能，相当不错，大家可以根据自己的想法进行改进。

一些学生询问jquery的简单分页插件。原来，一个同事写了一个简单的【Javascript使用了一个带有回调函数的自定义分页插件——自带风格】。

今天，我将分享一个强大的jquery分页插件：jquery.pagination。

官方地址：http://esimakin.github.io/twbs-pagination/

导言和说明

这个Jquery插件是一个Ajax分页插件，可以一次加载，所以在分页切换时没有刷新和延迟。如果数据量很大，不建议使用这种方法，因为加载会很慢。

原来的插件CSS不合理，使用浮动，不能方便的左右定位，浮动不清除。我在中文修改版中对其进行了优化，以支持文本对齐的定位。

原始js文件的注释被翻译成中文，演示页面也是中文。演示页面的js和最初的演示有一些不同，但是核心保持不变。

施用方式

像一般的jQuery插件一样，这个插件使用起来简单方便。方法是分页，例如$('#page ')。分页(100)；这里需要100参数，表示显示项目的总数，这是最简单的用法，显示如下：

还值得一提的是，分页列表需要放在类是分页的标签中。您可以使用文本对齐属性来控制分页是显示在中间还是右边。

回调函数一般用于加载相应分页显示的内容。有关详细信息，请参见演示源文件。

参数

用例子

例如，以下使用代码：

$('#Pagination ')。分页(56，{ num _ edge _ entries: 2，num _ display _ entries: 4，callback : page selectcallback，items _ per _ page :1 })；项目演示：

定义寻呼相关参数：

var pageSize=10var all count=0；var CurrentPage=1；var ajaxUrl='././Service/actiehandler . ashx '；var oper=' listhtml:

表ID=' sample-table-2 ' class=' table table-stripped table-bordered table-hover ' THAD TR TH number/th title/th缩略图/th海报/TH%-TH社区/TH商品/Th - % th开始时间/TH结束时间/TH幻灯片放映与否/TH操作/TH/TR/the ad tbbody ID=' tbbody list '/tbbody/tablediv ID=' paging ' class=' row '/div获取数据并调用分页函数：

函数GetList(page index){ var search name=$(' # TxTsearchname ').val()；var city id=Gettcity()；var endTimevar beginTimevar community name var标题；$.ajax({ type: 'post '，dataType: 'json '，url: ajaxUrl，data : {页面大小：页面大小，Operate: 'list '，currentPageIndex:页面索引，end time : $(' # TxtReadTime ').val()，Cityid: cityId，beginTime: $('#txtStartTime ').val()，CommunitY name : $(' # txt sqname ').val()，title: $('#txttitle ').val() }，成功：函数（数据，textStatus) { if(数据！=null) { var模型=eval(数据);如果（模型！=空模型！='undefined') { var data=eval(模型。实例);全部计数=模型TotalCountvar html=ListActive=数据；$.每一个（数据、函数(key、val){ html=html ' tr '；html=html ' TD width=' 100px ' class=' text-primary ' ' val。id '/TD '；html=html ' TD class=' left ' ' val。标题'/TD '；html=html ' TD class=' left ' img width=' 80px ' height=' 60px ' src=' http : ' val。小photo URL ' '/img/TD '；html=html ' TD class=' left ' img width=' 80px ' height=' 60px ' src=' http : ' val。bigfoportrl ' '/img/TD '；html=html ' td class=' left .格式化日期(' yyyy-MM-DD hh :MM '，数据。开始时间)'/TD '；html=html ' td class=' left .格式化日期(' yyyy-MM-DD hh :MM '，数据。结束时间)'/TD '；html=html ' TD class=' left ' ' ' a href=' # modal-form ' onclick=' SetHomeIndex( ' ' val。id ' '，val。标题' ')；返回false ' class=' BTN BTN-xs BTN-success ' data-toggle=' modal ' I class=' icon-key '/I首页幻灯设置/a ' '/TD '；html=html ' TD class=' left f(oper==' list '){ html=html ' a href=' add。aspx？刚性=0Id=' val。id ' ' class=' green ' title='编辑I class='图标-编辑大-130 '/I/a '；html=html ' a href=' # ' onclick=' delete active( ' ' val。id ' '，val。' title ' ')' class=' red ' title='注销'';html=html ' I class='图标-垃圾桶big-130 '/I/a '；} else if(oper==' msg '){ html=html '输入类型=' checkbox ' on change= ' SetCheckedPro(' val。id ' '，val。标题' ')；返回false“id=”seelctactive _”val。id ' '值=' val。标题' '/'；} html=html ' a href=' # ' onclick=' previewURl( ' http://sq。慧命。cn/index。PHP？g=Wapm=Homeactivityeda href=' http://www .如此如此。com/编程器/程学远-段子-Bug-王上。html ' class=' key link ' title=' Bug '修复target=' _ blank ' bug/a=1a=showid=' val。id ' ')' class=' blue ' title='查看' i class='图标-放大-放大-130 '/I/a '；html=html '/TD/tr '；});$('#tBodyList ').html(html)；//设置分页if(CurrentPage==1){ var initPagination=function(){//创建分页$(' #分页').分页(allCount，{ num _ edge _ entries: 1，//边缘页数num _ display _ entries: 2，//主体页数prev_text: ' '，next_text: ' '，回调： page selectcallback，items_per_page: pageSize //每页显示一项});}();current page=100 if(all count==0)$(' # DivNuminFo ').html('0-0条共0条');} } else { alert('加载数据失败！');返回；} } }，完成：函数(XMLHttpRequest，textStatus) { }，error:函数{ alert('加载数据错误！');返回；} });}示例二：

Jquery分页插件代码：

div id=' page 2 ' class=' m-pagination '/div脚本类型=' text/JavaScript '//请求格式：/GetPageData？query=TestPageIndex=0 page size=10//返回数据：{'data':[1，2，3，4，5，6，7，8，9，10]，' total':800}$('#page2 ').页面({ remote : { URL : '/getpage data '，//请求地址params: { query: ' test ' }，//自定义请求参数发送前：函数(XMLHttpRequest){ //.}，成功：函数（结果，页面索引){ //回调函数//结果为请求返回的数据，呈现数据}，完成：函数(XMLHttpRequest，textStatu){ //.}页面索引名称： '页面索引',//请求参数，当前页数，索引从0开始页面大小名称： '页面大小',//请求参数，每页数量totalName: 'total' //指定返回数据的总数据量的字段名}});/script以上内容是本文针对Jquery分页插件之Jquery分页的全部叙述，希望大家喜欢。