• 分页器的作用
2021-01-12 18:35:10

#from ..models import Article, ArticleUpDown, Article2Tag, Comment, Category, UserInfo, Blog, Tag

importcopyclassPagination(object):def __init__(self, current_page, all_count, request, per_page=10, max_pager_num=11):""":param current_page:当前页

:param all_count: 所有数据总数

:param request:

:param per_page: 每一页显示的数据条数

:param max_pager_num: 这个页面最多显示的页码数量

num_pages:总数据所分页的总页面数"""

#减少小于的时候，让其展示页面1的数据

try:

current_page=int(current_page)exceptException as e:

current_page= 1

if current_page < 1:

current_page= 1self.current_page=current_page

self.all_count=all_count

self.per_page= per_page #每一页显示的数据条数

#计算总页数

print("计算",all_count,per_page)

num_pages, tmp= divmod(all_count, per_page) #多的一条数据也展示一页

print(num_pages,tmp)iftmp:

num_pages+= 1self.num_pages=num_pages

self.max_pager_num= max_pager_num #最大显示的页数

self.page_count_half = int((self.max_pager_num - 1) / 2) #最多显示页数的一半

self.params =copy.deepcopy(request.GET)print("urlencode", self.params.urlencode())

@propertydefstart(self):return (self.current_page - 1) *self.per_page

@propertydefend(self):return self.current_page *self.per_pagedefpage_html(self):#如果总页数小于11

if self.num_pages <=self.max_pager_num:

pager_start= 1pager_end= self.num_pages + 1

else:if self.current_page <=self.page_count_half:

pager_start= 1pager_end= self.max_pager_num + 1

#当前页大于5

elif (self.current_page + self.page_count_half) >self.num_pages:

pager_start= self.num_pages - self.max_pager_num + 1pager_end= self.num_pages + 1

else:

pager_start= self.current_page -self.page_count_half

pager_end= self.current_page + self.page_count_half + 1page_html_list=[]#首页 上一页标签

self.params["page"] = 1first_page= '

self.params.urlencode(),)

page_html_list.append(first_page)if self.current_page <= 1:

prev_page= '

上一页'

else:

self.params["page"] = self.current_page - 1prev_page= '

上一页' %(self.params.urlencode(),)

page_html_list.append(prev_page)#每一页显示页码

for i inrange(pager_start, pager_end):

self.params["page"] =iif i ==self.current_page:

temp= '

%s' %(self.params.urlencode(), i,)print("1>>",temp)else:

temp= '

%s' %(self.params.urlencode(), i)print("2>>", temp)

page_html_list.append(temp)#尾页 下一页

self.params["page"] = self.current_page + 1

if self.current_page >=self.num_pages:

next_page= '

下一页'

else:

next_page= '

下一页' %(self.params.urlencode(),)

page_html_list.append(next_page)

self.params["page"] =self.num_pages

last_page= '

尾页' %(self.params.urlencode())

page_html_list.append(last_page)print("=======", ''.join(page_html_list))return ''.join(page_html_list)

更多相关内容
• 主要为大家详细介绍了Vue实现简单分页器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
• Swiper自定义分页器使用详解

千次阅读 2021-02-04 21:50:36
Swiper自定义分页，供大家参考，具体内容如下最终实现效果图：HTML DEMO(官网例子)Slide 1Slide 2Slide 31.设置导航按钮注：Sweiper 的导航按钮及其他一些DOM结构是可以放到“.swiper-container”之外的。只需要按钮...

Swiper自定义分页，供大家参考，具体内容如下

最终实现效果图：

HTML DEMO(官网例子)

Slide 1
Slide 2
Slide 3

1.设置导航按钮

注：Sweiper 的导航按钮及其他一些DOM结构是可以放到“.swiper-container”之外的。

只需要按钮的class对应起来就OK。

var mySwiper = new Swiper ('.swiper-container', {

// 如果需要前进后退按钮

nextButton: '.button-next',//对应"下一题"按钮的class

prevButton: '.button-prev',//对应"上一题"按钮的class

pagination: '.pagination',//分页容器的css选择器

paginationType : 'custom',//自定义-分页器样式类型(前提)

//设置自定义分页器的内容

paginationCustomRender: function (swiper, current, total) {

var _html = '';

for (var i = 1; i <= total; i++) {

if (current == i) {

_html += '

' + i + '';

}else{

_html += '

' + i + '';

}

}

return _html;//返回所有的页码html

}

})

//给每个页码绑定跳转的事件

$('.swiper-pagination').on('click','li',function(){ var index = this.innerHTML; mySwiper.slideTo(index-1, 500, false);//切换到第一个slide，速度为1秒 }) 2.设置自定义分页器(参见上面配置) 1.pagination: '.pagination' 给分页器一个容器，css类名选择器 2.paginationType : 'custom' 设置分页器自定义 3.paginationCustomRender:function(){} 设置自定义分页器的内容 4.给每个页码绑定跳转到对应页码的事件 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。 本文标题: Swiper自定义分页器使用详解 本文地址: http://www.cppcns.com/ruanjian/java/216098.html 展开全文 • mybatis分页拦截(自动封装版)剖析.pdfmybatis分页拦截(自动封装版)剖析.pdfmybatis分页拦截(自动封装版)剖析.pdfmybatis分页拦截(自动封装版)剖析.pdfmybatis分页拦截(自动封装版)剖析.pdfmybatis分页拦截... • Swiper 分页器点快了，或者切换几次，就会出现乱跳，跳的图跟点击的圆点不对应，怎么办？使用touchEventsTarget... 问题描述 Swiper 分页器点快了，或者切换几次，就会出现乱跳，跳的图跟点击的圆点不对应，怎么办？ 解决方案 添加：touchEventsTarget: 'wrapper'  var mySwiper = new Swiper('.swiper',{ // threshold：拖动的临界值（单位为px），如果触摸距离小于该值滑块不会被拖动。 threshold : 100, // touchEventsTarget：接受touch事件的目标，可以设为container或者wrapper。 touchEventsTarget: 'wrapper', })  解决思路 去github的 nolimits4web/swiper查看Issue，发现有人遇到和我一样的问题。 查看点赞量👍🏻高的评论： 为什么这样子可以解决分页器指示不准确的问题？具体我们可以拉取swiper的源代码去研究一下。 end！ 展开全文 • 1.background：为分页按钮添加背景色 2.current-page：为当前页 3.page-sizes：控制每页可以显示多少条数据， 4.page-size:每页的条数，对应上面 page-sizes 里面的条数 5.layout：total共多少条、sizes：控制每... 1.background：为分页按钮添加背景色 2. current-page：为当前页 3.page-sizes：控制每页可以显示多少条数据， 4.page-size:每页的条数，对应上面 page-sizes 里面的条数 5.layout：total共多少条、sizes：控制每页显示数据、prev上一页、pager页码、next下一页、jumper跳转 的显示 6.total：总共多少条 7.size-change：每页显示条数改变时处理函数 8.current-change：当前页显示条数改变时处理函数  <!-- 分页器 --> <el-row class="pagination"> <el-col :span="24"> <el-pagination :background="true" :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination> </el-col> </el-row> methods: { // 每页展示条数 handleSizeChange(val) { this.pageSize = val // 再次请求数据 this.getGoodsList() }, // 当前页改变，处理函数 handleCurrentChange(newPage) { this.currentPage = newPage // 再次请求数据 this.getGoodsList() }, }, 展开全文 • Swiper的分页器是靠mounted()挂载到Vue组件上而不是直接写在template里，所以在style scoped中写的样式无法作用分页器的点上。解决办法是把重写的样式写在scoped之外。(以下截图不完整，仅用做说明) template： ... • 因此，您当然可以在分页器作用域之前或之后链接任何其他条件。 基于可定制引擎的I18n感知帮助器 由于整个分页助手基本上只是链接和非链接的集合，因此Kaminari通过Engine内部的其自己的局部模板来呈现每个链接。 ... • 分页器的样式的时候 直接类名更改样式无效 • 由 Ant Design of Vue 提供的Table表格组件自身是带有pagination分页功能的，用于获取到后台返回的全部数据时很适用。但是项目需求需要用到分页查询以及条数查询时，就需要我们对代码做出改变 设置pagination属性为... • vue中使用swiper 修改分页器更颜色失效问题 • antd分页器的bug以及解决方案 千次阅读 2021-02-28 12:14:10 我在审查同事开发的分页器的时候，发现了几个bug。经过排查后发现，这个bug是因为antd引用第三方组件rc-pagination就有的bug，因此，我在github还给antd提了两个issue，一个被确认标记为了bug，另一个被关闭了，其实... • pageSizeOptions 指定每页可以显示多少条 string[] ['10', '20', '30', '40'] 这个需要string类型，需要加 '引号'，默认是['10','20','30','40']，可以自己更改配置 不加就会出现下面的情况 ... • 之前没用过Swiper，专门去官网看了一下demo和API。 楼主的问题不是Swiper插件出现Bug，而是你在createSwiper()函数中，用一个局部变量"var swiper = Swiper()"去创建一个Swiper实例后，再次调用createSwiper()函数... • 1.输入defaultPageSize: '5',pageSizeOptions: ['5', '10', '15', '20']等时，需要是String的形式，否则只会展示具体数字，而不是以5条/页的形式 正确样式 错误样式 • 主要是因为在建立swiper对象时，未在数据请求结束后初始化swiper对象，若对象数据还在请求过程中，初始化swiper对象，会导致创建多个swiper对象，而小白点分页器的时间轴则是一条，多个时间点上创建的swiper对象会... • 分页器中页数显示 1条/页，但是表格中数据有5条。这个分页器失效了嘛？ 代码奉上： <div class="pagination-container"> <el-pagination :current-page.sync="listQuery.page" :page-sizes="[1,20,30,50... • layui数据表格开启分页器不管用，page:true，如果直接请求数据渲染，开启分页器是无效，页面渲染了，但功能不上效，通过data:data渲染数据，limit设置初始每页数据数。 • mybatis拦截器分页 • 目录静态组件界面 1、表格（Table）2、分页器 （Pagination） 3、展示列表数据4、$API表格和分页器外观图： 首先利用ElementUI搭建静态组件界面Element - The world's most popular Vue UI framework 主要属性 ...
• 很多人看到django自带的分页器涉及的属性和方法那么多，一下子就懵住了，还有些直接放弃了内置的分页器，直接用pagination了，可问题是，面对10000+多条的数据时，pagination用不上啊。乖乖学会用paginator吧！ 三...
• vue elementUI el-pagination 分页器的使用细节
• 结合Vue使用的简单分页器

千次阅读 2018-03-12 11:47:22
提前说明：这原本是一个Jquery分页器，因为公司项目前后端不分离，以前的分页用的是基于.net的分页器。后来我引入了jquery分页器，在我掌握Vue之后,又自己写了一些基于Vue的插件（为什么不用成熟的Vue插件库，还是...
• i++) { //判断哪个分页器此刻应该被激活 if (i == current - 1) { customPaginationHtml += ''; } else { customPaginationHtml += ''; } } return ''+customPaginationHtml+''; } } }); } } }; 以上转载自：...
• 分页器不显示的问题，并没有解决，我是降低了版本。因为我看最新版本是近半个月才升级，swiper的官网api尚不完善，再加上项目并非一定要使用最新版本，所以就降低了版本。 降低后： vue-awesome-swiper v3.1.3 ...
• MybaisPlus3.2.0版本的分页器配置,因为使用3.4.3版本的代码生成器会出现版本不兼容的问题,所以选择低版本配置
• 最近用Vue做项目需要加个轮播效果，结果分页器死活出不来，但轮播效果和前进后退箭头以及滚动栏都是正常显示的。 基础代码如下： <div class="swiper-container"> <div class="swiper-wrapper"> <...
• mybatis-plus中的分页拦截器

千次阅读 2022-02-27 14:39:32
import org.spring... /** * mybatis-plus分页拦截，实现它自带的分页功能 */ @SpringBootConfiguration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor paginationInnerInterceptor(){ ...
• 本篇文章主要介绍了SSM使用mybatis分页插件pagehepler实现分页示例，使用分页插件的原因，简化了sql代码的写法，实现较好的物理分页，非常具有实用价值，需要的朋友可以参考下
• Ant Design Vue 是蚂蚁金服推出的后台服务组件库，目前有...二、举个栗子，定义一个带分页器的table组件： <a-table ref="table" :columns="columns" :dataSource="lists" :pagination="pagination" @chan..

...