js 分页插件_vue分页组件

js 分页插件_vue分页组件一、前言:分页功能在项目中时常用到,一款可以快速实现分页功能的插件非常有必要,pagination–这款插件功能非常完美,几乎我所有项目中使用到分页的地方都会第一时间考虑到这个插件,但是其实有能力的同学最好还是使用原生的JS或者JQuery来开发分页功能,毕竟插件很多源码比较复杂,也并不是所有功能都做到尽善尽美,仅仅是提供一个方便而已。二、具体使用方法:(1)第一步,导入jq

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

一、前言:

分页功能在项目中时常用到,一款可以快速实现分页功能的插件非常有必要,pagination–这款插件功能非常完美,几乎我所有项目中使用到分页的地方都会第一时间考虑到这个插件,但是其实有能力的同学最好还是使用原生的JS或者JQuery来开发分页功能,毕竟插件很多源码比较复杂,也并不是所有功能都做到尽善尽美,仅仅是提供一个方便而已。


二、具体使用方法:

(1)第一步,导入jquery和pagination.js

<script src="jquery.js"></script>

Jetbrains全家桶1年46,售后保障稳定

<script src="jquery.pagination.js"></script>



(2)第二步,HTML代码:

非常简单只需要一个div标签

<div class="M-box"></div>



(3)第三步,  JS代码:

$('.M-box').pagination({
    pageCount:50,
    jump:true,
    coping:true,
    homePage:'首页',
    endPage:'末页',
    prevContent:'上页',
    nextContent:'下页'
});


如图所示:

js 分页插件_vue分页组件


三、核心参数方法

使用方法是:

$('.M-box').pagination({option})

option的参数如下:

pageCount 9 总页数
totalData 0 数据总条数
current 1 当前第几页
showData 0 每页显示的条数
prevCls ‘prev’ 上一页class
nextCls ‘next’ 下一页class
prevContent ‘<‘ 上一页节点内容
nextContent ‘>’ 下一页节点内容
activeCls ‘active’ 当前页选中状态class名
count 3 当前选中页前后页数
coping false 是否开启首页和末页,值为boolean
isHide false 总页数为0或1时隐藏分页控件
keepShowPN false 是否一直显示上一页下一页
homePage 首页节点内容,默认为空
endPage 尾页节点内容,默认为空
jump false 是否开启跳转到指定页数,值为boolean类型
jumpIptCls ‘jump-ipt’ 文本框内容
jumpBtnCls ‘jump-btn’ 跳转按钮class
jumpBtn ‘跳转’ 跳转按钮文本内容
callback function(){} 回调函数,参数”index”为当前页

其中回调函数是最核心的参数,即点击分页的数字按钮时所执行的操作,回调函数中有一个参数叫api

callback:function(api){

//回调函数。。。

}


该api接口的方法有如下:

方法                                参数                           说明

getPageCount()               无                         获取总页数

setPageCount(page)      page:页数           设置总页数

getCurrent()                    无                           获取当前页

filling()                             无                         填充数据,参数为页数


四、AJAX动态分页

其实做分页最主要的就是通过AJAX来动态获取数据后进行分页显示,我们要明白的是,为什么分页??

首页,因为数据库的数据是不可估量的,如果某一个系统的数据库数据有几千条甚至几万条,难道一个网页要把全部的数据都全部的展示出来吗??那肯定是不合理的,因为这非常消耗系统内存和网络带宽,我们肯定都是在AJAX请求数据时,传入了要显示的条数和页数,服务器在根据条数和页数返回数据给我们,比如我们要显示10条数据,显示第一页的内容,那服务器就相应的把该条件下的数据传回给我们,仅仅10条,这对于数据库和网页显示来说毫无压力。所以这就有了分页功能的出现。如果有50条数据,每页只显示10条数据,那理所当然的就是有5页了,那问题又来了,难道这个分页怎么知道我每个页数需要显示什么内容呢???是我全部加载数据后平均分配到每一页10条数据,然后依次显示下去吗??当然不是,我每当点击页数按钮的时候都要去加载数据,重新发起AJAX请求到服务器,然后返回数据给我们,那我们就大概知道怎么使用这个分页功能了!!


(1).首页,你得知道你分页按钮上需要显示几页吗??例如5页的话就是5个按钮。

所以首先必须使用AJAX请求得到所有数据的长度是多少,例如:  总共50条数据,我需要每页显示10条数据,当前 显示第一页的数据。

$.ajax({

url:…

type:”post”,

data:{

rows:  10  //我把行数传回给服务器中

page:1  //显示第一页的数据

}

success:function(data){

//data.length  就是数据的长度 ,也就是上面的10,具体参数名看你们服务器的返回叫什么

//data.count   是数据的总长度,也就是50,具体参数名看你们服务器的返回叫什么

}

})


(2).然后我在success方法中写入pagination的方法进行分页

$.ajax({

url:…

type:”post”,

data:{

rows:  10  //我把行数传回给服务器中

page:1  //显示第一页的数据

}

success:function(data){

//获取总条数
var sumCount=data
.count;

//获取返回的条数

var count=data.length;


//重要的一步来了,需要获取我们按钮的个数,也就是分多少页,需要总条数除以返回数在向上取整

var pageCount=Math.ceil(sumCount/count);  //这里50除以10等于5,所以一共有5页

$(‘.M-box’).pagination({

               pageCount:pageCount, //总页数
               coping:true,//是否开启首页和尾页
               homePage:’首页’,
               endPage:’末页’,
               prevContent:’上页’,
               nextContent:’下页’,
               current:1,  //当前第几页
               callback:function(api){  //按钮
、回调函数

}

});

}

})


(3).现在最最关键的来了,就是分页中的回调函数的操作,也就是点击按钮需要做什么??上面第四点中分析到,点击按钮需要重新发起AJAX请求,需要把显示条数和当前的页数传回给服务器

$.ajax({

url:…

type:”post”,

data:{

rows:  10  //我把行数传回给服务器中

page:1  //显示第一页的数据

}

success:function(data){

//获取总条数
var sumCount=data
.count;

//获取返回的条数

var count=data.length;


//获取分页数

var pageCount=Math.ceil(sumCount/count);  //这里50除以10等于5,所以一共有5页

$(‘.M-box’).pagination({

               pageCount:pageCount, //总页数
               coping:true,//是否开启首页和尾页
               homePage:’首页’,
               endPage:’末页’,
               prevContent:’上页’,
               nextContent:’下页’,
               current:1,  //当前第几页
               callback:function(api){  //按钮
、回调函数

//再次发起AJAX请求

$.ajax({

url:…

type:”post”,

data:{

rows: 10, //依然显示10条数据

page: api.getCurrent()// 非常关键的一步,这里就要用到api接口的方法中获取当前页

的方法了,比如我点击第二页,当前页就是2,点击第三页,

当前页就是3,

}

success:function(data){

//ajax成功后的回调。。。

}

})


}

});

}

})



以上基本的一个流程就是这样。具体一些api方法和参数可以去试试。

一个很主要的流程就是,首先要发起ajax得到总条数和返回的条数然后在success回调中使用pagination的方法,在callback回调中再次发起ajax,就是为了点击分页按钮再次显示数据


推荐pagination插件下载地址:http://download.csdn.net/detail/baidu_25343343/9822636







版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234848.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Python多线程与多线程中join()的用法

    Python多线程与多线程中join()的用法Python多线程与多进程中join()方法的效果是相同的。下面仅以多线程为例:首先需要明确几个概念:知识点一:当一个进程启动之后,会默认产生一个主线程,因为线程是程序执行流的最小单元,当设置多

  • 求二叉树的最长路径_某完全二叉树按层次输出,从左到右

    求二叉树的最长路径_某完全二叉树按层次输出,从左到右Ural 大学有 N 名职员,编号为 1∼N。他们的关系就像一棵以校长为根的树,父节点就是子节点的直接上司。每个职员有一个快乐指数,用整数 Hi 给出,其中 1≤i≤N。现在要召开一场周年庆宴会,不过,没有职员愿意和直接上司一起参会。在满足这个条件的前提下,主办方希望邀请一部分职员参会,使得所有参会职员的快乐指数总和最大,求这个最大值。输入格式第一行一个整数 N。接下来 N 行,第 i 行表示 i 号职员的快乐指数 Hi。接下来 N−1 行,每行输入一对整数 L,K,表示 K 是 L 的直接

  • Java安全之初探weblogic T3协议漏洞

    Java安全之初探weblogicT3协议漏洞文章首发自安全客:Java安全之初探weblogicT3协议漏洞0x00前言在反序列化漏洞里面就经典的还是莫过于weblogic的反序列化漏洞

    2021年12月12日
  • node.js 安装详细步骤教程

    node.js 安装详细步骤教程 本机环境:Windows10专业版x64 1、下载安装包Node.js官方网站下载:https://nodejs.org/en/选择操作系统对应的包:下载完成,安装包如下: 2、安装打开安装,傻瓜式下一步即可:   选择安装位置,我这里装在D盘下:     安装成功,文件夹结构…

  • 计算机键盘最小化,电脑按哪个键可以使窗口最小化

    电脑上的快捷键有很多,那么你知道怎么才能快速最小化窗口吗?下面由学习啦小编为你整理了电脑按哪个键可以使窗口最小化的相关方法,希望对你有帮助!电脑最小化窗口的解决方法和步骤如下从某些方式来说,使用键盘上面的几个组合键也可以起到最小化当前页面的作用,当然,好东西都是要留在最后的嘛。所以先看看这个用途不广的方法吧,就是按下键盘上面的Alt键+Space(空格键),这个可以调出所谓的菜单选项,然后按下N键…

  • Mac基础操作教程:Mac电脑如何在录屏时录入声音?「建议收藏」

    Mac基础操作教程:Mac电脑如何在录屏时录入声音?「建议收藏」我们经常因为工作需要而对Mac电脑进行录屏操作,但有些新手用户录屏后发现,屏幕里没有声音,这是因为你没有打开麦克风,下面分享Mac电脑在录屏时录入声音教程。1、点击“启动台”,2、打开启动台里“其他”文件夹中的“截屏”,3、在屏幕下方,点击录制屏幕的图标;4、然后点击“选项”,在下拉菜单中选择“麦克风”;5、最后,点击“录制”按钮即可完成。以上就是小编给您带来的Mac基础操作教程:Mac电脑如何在录屏时录入声音,还有哪些关于Mac电脑的操作问题,欢迎来交流。Mac软件资源下载站http

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号