您的当前位置:首页正文

Jquery分页插件之JqueryPagination_jquery

2023-12-05 来源:站点网
导读pagination分页插件也是在项目中实际需要才出来的,插件实现也借鉴了网上开源的一些代码,并根据我这边项目的实际需要,基本上都是一字一行重新编写的,希望大家也一如既往的提出宝贵意见。 随着前后端分离模式的逐渐流行,我们在项目中也经常通过局部刷新方式(ajax、fetch)请求远程数据,带来的好处显而易见。但是,前后端分离后原本应用的很多逻辑也带到了前端,导致前端复杂化,故也出现了Vue、React等类似于MVVM的一大堆前端框架,前端工程化开始在最近几年已经成为趋势,且已非常成熟
实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进。

有同学问道jquery的简单分页插件,原来有同事写过一个简单[Javascript 使用回调函数的自定义分页插件--自带样式]。

今天分享一个功能比较强大的jquery分页插件:jquery.pagination。

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

简介与说明

此Jquery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。

原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持text-align的定位。

对原js文件注释进行了中文翻译,demo页面也是汉化了的,demo页面的js与原demo有一些出入,但核心不变。

使用方法

跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是pagination,例如$("#page").pagination(100);,这里的100参数是必须的,表示显示项目的总个数,这是最简单的使用,得到的显示如下:

还有一点值得一提的是分页列表需要放在class类为pagination的标签内,您可以使用text-align属性控制分页居中显示还是居右显示。

回调函数一般用来装载对应分页显示的内容,具体参见demo源文件。

参数

使用举例

例如下面的使用代码:

项目demo:

定义分页相关参数:

html:

获取数据并调用分页函数:

示例二:

Jquery Pagination插件代码:


站点网还为您提供以下相关内容希望对您有帮助:

jQuery分页插件pagination具体怎么用?求详细教程

一、引用CSS和JS: 二、HTML: 三、JS:(function () { var total =

怎么用 Jquery 做 无限分页

jQuery Pagination分页插件 使用方法 跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是pagination,例如$("#page").pagination(100);("#Pagination").pagination(56, { num_edge_entries: 2,num_display_entries: 4...

继etable受到朋友们支持,又一款pagination分页插件开源奉上

pagination分页插件也是在项目中实际需要才独立出来的,插件实现也借鉴了网上开源的一些代码,并根据我这边项目的实际需要,基本上都是一字一行重新编写的,希望大家也一如既往的提出宝贵意见。随着前后端分离模式的逐渐流行,我们...

jquery怎么动态实现表格分页

jquery动态实现表格分页的方法是利用自带的分页插件jQuery.page.js。下面是使用方法:(".tcdPageCode").createPage({ pageCount:10,current:1,backFn:function(p){ //单击回调方法,p是当前页码 } });pageCount:总页数...

如何理解Jquery插件

1.基础版jQuery插件知道了上面这些知识,我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色,就可以按下面的方式来实现这个插件:$.fn.changeStyle = function(colorStr){ this....

在jQuery中如何实现动态数据分页

$("#PageCon li").slice((page-1)*pagesize,page*pagesize).show(); } }); });具体的看这里:twbs-pagination分页插件的实际应用实例

jquery.pagination.js 如何用

1,下载3个文件 分别为:jquery-1.7.1.js、jquery.pagination.js、pagination.css //详见附件 2,准备好服务器端返回结果 主要代码如下:Php代码 members = array(array()...); //详见附件 total = count($memb...

jquery easyui 分页控件怎么写

如果你是使用easyui里的datagrid插件,只需要将pagination属性设为true即可,例如:1234567891011

jquery.pagination.js 分页插件,一直执行回调方法,死循环了

listresult(page_id+1, psize);请粘贴这个方法的方法体

jquery ajax分页插件 怎么写

具体jquery.kun_page.js: /*---参数config: dataCount:数据总数 pageSize:页数据条数 maxButton:页码按钮数目 showCustom:是否能手动输入页码 pageChange:页变更事件参数:(i,s,c)i:pageIndex,当前页s:pageSize,页数据条数c:pageC...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top