超好用的一个jquery分页器-jpaginate

gaohj gaohj     2022-08-28     227

关键词:

jpaginate是一个自带滑动动画效果的jQuery分页插件,用户可以通过单击或只是悬停在箭头上的使页码滑动显示。

你可以用下面的方式调用插件:

$(elementID).paginate()

 

您可以通过一下属性来配置插件:

count:页面总数
start:默认选中页码
display:可见页码数量
border:边框(true/false)
border_color:边框颜色:
text_color:文本的颜色/号码
background_color:背景颜色
border_hover_color:边框悬停时颜色
text_hover_color:文本悬停时颜色
background_hover_color:背景悬停时颜色
images:箭头的背景图片(true/false)
mouse:鼠标拿下的动画效果(press/slide)
onChange:当点击一个网页。作为参数,单击“单击”的页面的数目可以被使用。

 

来个直接点的代码,更容易看。

$("#pagination0").paginate({
    count                 : 50,            
    start                 : 1,        
    display                 : 7,        
    border            : false,    
    text_color          : ‘#888‘,    
    background_color        : ‘#EEE‘,    
    text_hover_color      : ‘black‘,    
    background_hover_color    : ‘#CFCFCF‘,    
    rotate              : true,        
    images            : false,     
        mouse            : ‘press‘,
    onChange             : function(page){
                    list(page-1,pageSize);
                   }
});

本站下载链接:jpaginate

 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。互联网+时代,时刻要保持学习,携手千锋PHP,Dream It Possible。

一个swiper两个分页器的写法总结

写项目的时候,使用的是swiper插件呈现的效果是一个swiper要实现两个分页器,下面就来总结一下以swiper3为例来写,在页面中引入jquery、swiper.min.js和swiper.min.css文件。HTML结构: <divclass="bannerswiper-container"><divclass="swiper-wr... 查看详情

jQuery Lightslider 插件分页器 onclick 事件

】jQueryLightslider插件分页器onclick事件【英文标题】:jQuerylightsliderpluginpageronclickevent【发布时间】:2015-12-0423:16:05【问题描述】:我想获取jquerylightslider插件的pager元素的onclick事件,我试过下面的代码,var$slide=$(\'#light-slider\').paren... 查看详情

Jquery 循环 - 在不破坏缩略图分页器的情况下将图像包装在 div 标签中

...题描述】:我正在使用jquery循环插件并将每个图像包装在一个div标签中以使每张幻灯片居中,所有这些都是不同的宽度:<div><imgsrc="img1.jp 查看详情

jquery tablesorter 寻呼机不工作

...每个分页器。单击按钮时显示表和相应的分页器。单击第一个和第二个按钮时,表的分页器工作正常。但是在点击第三个和第四个按钮时,我得到了以下错误“UncaughtTypeError:Cann 查看详情

UIScrollView 一个分页器

】UIScrollView一个分页器【英文标题】:UIScrollViewanPaginator【发布时间】:2011-11-2507:42:13【问题描述】:我考虑了新应用的UI设计的可能性。我想做的是:拥有三个视图,用户可以在其中水平分页。在每个视图中都有一个UIScrollView... 查看详情

超简单实用的前端分页---jquery插件

...是模糊不清,就是显示不是自己想要的,所以想自己动手写一个属于自己的插件这是一个面向对象思想的插件.第一次用面向对象的思想,肯定有很多不足的地方.希望能互 查看详情

javascript如何在jquery循环插件中更改分页器文本(代码片段)

查看详情

多个 Drupal 分页器模块

...Drupal7)上安装了Drupalpagerermodule。当我在我的页面上加载了一个寻呼机时,它可以正常工作。但由于我的页面上有很多类别,Drupal加载4个分页器,只有一个是功能性的。我需要重新加载页面,以便可以在同一页面上使用其他页面... 查看详情

分页器

分页器这里使用的是github上的一个开源包,github上搜索pure_pagination,找到那个star最多的就可以了安装pipinstalldjango-pure-pagination将pure-pagination增加到配置文件INSTALLED_APPS下边INSTALLED_APPS=(...‘pure_pagination‘,)后端代码fromdjango.shortcutsim 查看详情

片段被视图分页器布局切割

...布时间】:2018-12-1515:34:56【问题描述】:首先,我想制作一个tablayout片段,在片段One中我想添加recyclerview,但是recyclerview的顶部被视图分页器或顶部的标签布局切割。gettingcutatthetoprecyclerview的顶部被视图分页器剪切。工具栏在其... 查看详情

带有 findAll() 方法的 Knp 分页器

...l()method【发布时间】:2014-10-0416:18:38【问题描述】:我有一个问题,knp分页器只能这样工作:$em=$this->get(\'doctrine.orm.entity_manager\');$dql="SELECTaFROMMainArtBundle:Arta";$query=$em->create 查看详情

Django:分页器 + 原始 SQL 查询

...】:我在我的网站上到处都在使用DjangoPaginator,甚至写了一个特殊的模板标签,以使其更方便。但是现在我遇到了一个状态,我需要进行一个复杂的自定义原始SQL查询,如果没有LIMIT将返回大约100K记录。如何将DjangoPagintor与自定... 查看详情

react分页器基于react-virtualized组件的分页器(代码片段)

...-virtualized实现的表格添加分页器功能,需要自己手动实现一个分页器,网上有一个参考代码:https://codesandbox.io/s/mm3kvjo0z9 分页器代码:Paginator.jsimportReactfrom‘react‘importButtonfrom‘semantic-ui-react‘constBetweenButton=()=><Buttonconte... 查看详情

admin分页器

...,form表单下的按钮在没有指定type类型的时候,button会有一个默认的type=”submit”解决办法:给button设置一个类型type="button",这样button的类型就不是默认的submit了,就不会自动提交表单了模版语言里面不能用___去调用 查看详情

php分页器的问题

...2010-12-0421:05:36【问题描述】:我在php中为我的项目制作了一个带有寻呼机的简单表格类。如果页面地址不包含GET方法传递的任何参数,它就可以正常工作。这是我用寻呼机创建表格的方式$tbl=newtable();$tbl->headers(array("Header1","Head... 查看详情

视图分页器中的视图在上一个视图和下一个视图之间重叠

】视图分页器中的视图在上一个视图和下一个视图之间重叠【英文标题】:Viewintheviewpageroverlapbetweenpreviousandnextview【发布时间】:2015-12-1222:01:20【问题描述】:我在我的应用程序中使用ViewPager来实现滑动效果。我有pager.setPageMargi... 查看详情

自定义角材料分页器输入(代码片段)

..."></mat-paginator>我的分页器看起来像这样问题是我有一个庞大的数据列表,可以显示很多页面给分页器,我正在寻找一种自定义分页器并添加输入以指示我要显示的页面数的方法,是否有解决方案来编码它?答案分页器没有... 查看详情

具有垫表初始化的角度材料2分页器

...组件(mat-table指令)一起使用。我按照mat-table文档添加了一个分页器,试图让他们的示例与我现有的工作mat表一起工作。在component.html 查看详情