jQuery技术

Ajax+JSON+jQuery环境使用的多功能页码栏

字号+ 作者: 来源: 2014-11-16 22:49 我要评论( )

下面是这个插件在项目中必须满足的几个功能要求 : 1、页数不确定,根据记录条数和每页显示记录数自动生成 2、样式不确定,必须可以根据页面需要应用不同样式 3、必须可以自动缩

下面是这个插件在项目中必须满足的几个功能要求:

1、页数不确定,根据记录条数和每页显示记录数自动生成

2、样式

不确定,必须可以根据页面需要应用不同样式

3、必须可以自动缩略多余的页码,比如总共有100页,当浏览第50页时,可以省略1-49及51-100之间的部分页码,并且这个延伸显示的页码数量可

以由自己设定

4、提供“上一页”“下一页”按钮,并且可以自己设定对应的值或图形

5、记录为空时,隐藏页栏,显示友好的空记录信息

6、属于附加要求:由于该空间可能用

于不提供AJAX/JSON数据的页面或者由于配合SEO需要,同时兼顾POST+AJAX方式和GET直接请求页面(如.aspx)两种方式,并且逻辑和输出尽量分离以便日后需要直接HTML输出时(SEO需要),由js转换

为C#语言。

7、同一页面中可以多次重复调用,互不影响,并兼容IE/FF

这里先列出完成以上几点必须提供的API,然后我会把源代码全部发上来:

调用:ShowPageBar

([containerId] ,[url] , [attr]);

解释:
参数名称 类型 说明
containerId 字符串 提供装载页码栏的容器标签的客户端ID(用于定位,如div)
url 字符

串 如果使用GET方法请求页面(最普通的页码栏换页方式),提供需要请求的URL(如果为POST,此url可为空值,有页面指定,稍后源代码中可见)
attr hashtable 页码栏参数,为

hash数据具体包括如下表“表二”

表二 attr hash参数说明:
[attr]参数名称 类型 说明
style 字符串 css样式,默认”technorati”等,可自己设置(我的示例中

使用了网上提供的一套Web2.0的样式,大家也可以自己定制)
totalCount 整数 总记录条数
pageCount 整数 没页显示记录条数,默认为20
showPageNumber 整数

缩略显示页码的阀值(如页码为50,则相邻只显示50 – showPageNumber到50 +showPageNumber的页码),默认为3
currentPageIndex 整数 当前页码
onclick 字符串 页码

单击事件(如果采用单击事件,并且包含“return false”字段,则url将被忽略),插件会把“{pageindex}”自动替换为当前页码
barMark 字符串 数据显示区域的Mark标签(<a

name=[ barMark]></a>),备用
noRecordTip 字符串 如果没有记录,显示的友好提示
preWord 字符造 “上一页”按钮显示的字样
nextWord 字符串 “

下一页”按钮显示的字样

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评