html按照字数分页,纯javascript实现分页(两种方法)
先给大家贴效果图:
网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了。其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页。
因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用
这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值获取到,点击首页/下一页等传值正确的话,基本上分页是不会出什么问题的
纯js实现分页方法一:
废话不多说,直接上代码了!
注:本项目是全程使用js来写的,前台的数据通过ajax进行获取,然后再进行拼装,动态加载到页面。
1.先把上一页,下一页等的代码附上(里面的值都是伪值,下面会在js里进行重新赋值的!)
首 页
上一页
- 1
- 2
- 3
- ...
- 13855
下一页
尾 页
共13855页 到第页
2.首先在页面放两个隐藏域,一个是当前页码,一个是总页码,总页码是页面加载完,从后台查询出来后直接附上值的,当前页码是没操作一个,就要对当前页码赋值
3.写一个页面加载完的function,给总页码和当前页码赋值
$(function(){
$('#jiazai').val(1);//给当前页码进行赋值,默认为第一页
ajaxfunction(page,arg,chipssort,'');//这个方法是抽取的ajax后台访问的方法
});
4.抽取的ajax方法,此页面会用到好几次这个方法,所有把它收取了出来,因为页面的数据时通过ajax从后台获取到的,后台返回的是一个List集合
//抽取ajax的方法
function ajaxfunction(page,arg,chipssort,fontval){
$.ajax({
type:'POST',
url:'/admin/receptionchips/showlist',//请求的url地址
data:{
page:page,
sort:arg,
chipssort:chipssort,
fontval:fontval
},
dataType:'json',
contentType:'application/x-www-form-urlencoded; charset=utf-8',
success:function(data){
//返回值在进行访问抽取的方法,从后台返回
commonfunction(data);
}
});
}
5.代码看到这也不是很多,最后一个了
//抽取拼串的方法
function commonfunction(data){
$('#projectlist').find("li").remove();
for (var i=0;i
{
/*****因为此页面是动态加载的,这里主要就是进行拼串,代码也不少,就不漏出来占空间了*****/
}
//开始是分页的核心了
if(data.length>0){
//设置页码
var pading = data[0].padingnum;//总页码
$('#totalpage').val(pading);
var page = $('#jiazai').val();//当前页
$('#countpage').html(""+page+"/"+pading+"");
$('#span_number').html("共"+pading+"页 到第页")
}else{
$('#countpage').html(""+0+"/"+0+"");
}
//设置分页的底部 就是 首页 1 2 3 4 5 6 尾页
var pading = data[0].padingnum;//总页码href="javascript:void(0);"
var nowpage = $('#jiazai').val();//当前页
//one two three five fore
//下面代码看着是比较麻烦,但是也不难理解 全是一样的代码,只不过是加了些判断
if(nowpage<5 ){
$('#one').text(1);
$('#one').attr('href','javascript:pagenum("'+1+'");');
$('#two').text(2);
$('#two').attr('href','javascript:pagenum("'+(2)+'");');
$('#three').text(3);
$('#three').attr('href','javascript:pagenum("'+(3)+'");');
$('#five').text(4);
$('#five').attr('href','javascript:pagenum("'+(4)+'");');
$('#fore').text(5);
$('#fore').attr('href','javascript:pagenum("'+(5)+'");');
$('#five').parent().show();
$('#fore').parent().show();
}else{
//alert("已经不是第五页了");
//设置中间的为当前页
$('#one').text(Number(nowpage)-2);
$('#one').attr('href','javascript:indexpage("'+(Number(nowpage)-2)+'");');
$('#two').text(Number(nowpage)-1);
$('#two').attr('href','javascript:indexpage("'+(Number(nowpage)-1)+'");');
$('#three').text(nowpage);
$('#three').attr('href','javascript:indexpage("'+(nowpage)+'");');
$('#five').parent().show();
$('#fore').parent().show();
//判断下一页是否超过了总页数
if(Number(nowpage)+1>pading){
$('#five').parent().hide();
$('#fore').parent().hide();
}else{
$('#five').parent().show();
$('#five').text(Number(nowpage)+1);
$('#five').attr('href','javascript:indexpage("'+(Number(nowpage)+1)+'");');
}
//判断下一页的第二页是否超过了总页数
if(Number(nowpage)+2>pading){
$('#fore').parent().hide();
}else{
$('#fore').parent().show();
$('#fore').text(Number(nowpage)+2);
$('#fore').attr('href','javascript:indexpage("'+(Number(nowpage)+2)+'");');
}
}
//如果总页数小于5,这块代码主要就是设置 1 2 3 4 5 这些的显示和隐藏的
if(pading==0){
$('#one').parent().hide();
$('#two').parent().hide();
$('#three').parent().hide();
$('#five').parent().hide();
$('#fore').parent().hide();
}else if(pading==1){
$('#shouye').hide();
$('#weiye').hide();
$('#one').parent().hide();
$('#two').parent().hide();
$('#three').parent().hide();
$('#five').parent().hide();
$('#fore').parent().hide();
}else if(pading==2){
$('#one').parent().show();
$('#two').parent().show();
$('#three').parent().hide();
$('#five').parent().hide();
$('#fore').parent().hide();
}else if(pading==3){
$('#one').parent().show();
$('#two').parent().show();
$('#three').parent().show();
$('#five').parent().hide();
$('#fore').parent().hide();
}else if(pading==4){
$('#one').parent().show();
$('#two').parent().show();
$('#three').parent().show();
$('#five').parent().show();
$('#fore').parent().hide();
}else{
$('#one').parent().show();
$('#two').parent().show();
$('#three').parent().show();
$('#five').parent().show();
$('#fore').parent().show();
}
//设置高亮显示的,就是是第一页时,1亮,第二页时 2亮
$('#page a').each(function() {
$(this).parent().removeClass("current");
if($(this).text()==nowpage){
$(this).parent().addClass("current");
}
});
//分页完返回页面顶端
$("html,body").animate({scrollTop:0}, 500);
//最后,给当前页码加1
$('#jiazai').val(Number(bianlaing)+Number(1));
}
纯js实现分页方法二:
function goPage(pno,psize){
var itable = document.getElementById("idData");
var num = itable.rows.length;//表格行数
var totalPage = 0;//总页数
var pageSize = psize;//每页显示行数
if((num-1)/pageSize > parseInt((num-1)/pageSize)){
totalPage=parseInt((num-1)/pageSize)+1;
}else{
totalPage=parseInt((num-1)/pageSize);
}
var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行
var endRow = currentPage * pageSize+1;//结束显示的行
endRow = (endRow > num)? num : endRow;
//前三行始终显示
for(i=0;i<1;i++){
var irow = itable.rows[i];
irow.style.display = "block";
}
for(var i=1;i
var irow = itable.rows[i];
if(i>=startRow&&i
irow.style.display = "block";
}else{
irow.style.display = "none";
}
}
var pageEnd = document.getElementById("pageEnd");
var tempStr = "";
if(currentPage>1){
tempStr += " "
}else{
tempStr += " ";
}
for (var i = 1; i <= totalPage; i++) {
if (i == currentPage) {
tempStr += i+" ";
} else {
tempStr += ""+i+" "
}
}
if(currentPage
tempStr += " ";
}else{
tempStr += " ";
}
tempStr +="";
document.getElementById("barcon").innerHTML = tempStr;
}
var base='';
window.onload = function(){
goPage(1,10);
}
温馨提示:js代码中上一页 下一页定义的图片根据自己需求可以改的
好了,到这里分页就完成了,如果你们需要使用的话,可能会话费一会去理解我的代码,其实代码不难,我是使用了两个小时把它写完的,只要一行一行代码看,并且自己再加注释,把这块弄过去,不出半小时绝对搞定!
好了,到此为止用两种方法给大家介绍纯js实现分页就结束了,有不明白的地方,欢迎提出,交流,共同学习进步,谢谢。
html按照字数分页,纯javascript实现分页(两种方法)相关推荐
- HTML5动态加载资源方式,动态加载JavaScript文件的两种方法
这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...
- php javascript分页,纯javascript实现分页(两种方法)
有的时候页面需要很多不同的表组成的数据,该怎么分页呢?使用数据库分页很简单,那么如何使用js实现分页呢?接下来,小编帮大家解决这个问题,需要的朋友一起来学习吧 先给大家贴效果图: 网上确实有很多分页的 ...
- JavaScript创建对象的两种方法和遍历对象的属性
创建新对象有两种不同的方法: 定义并创建对象的实例 使用函数来定义对象,然后创建新的对象实例 1.定义并创建对象的实例 var person=new Object(); person.firstnam ...
- JS教程之 识别 JavaScript 数据类型:两种方法就足够了
Primitive type原始类型: Null.Undefined.Number.String.Boolean.Symbol.BigInt vObject type 对象类型: Object 你知道 ...
- Yii实现分页的两种方法
Yii实现分页的两种方法,一种是用DAO实现,另外一种是在widget实现. 各有优点吧,第一种效率会高一点, 第二种可以使用自带的表格,方便一些. 一. DAO实现分页. [Controller层] ...
- php title限制字数,dedecms:title解决字数限制的两种方法
织梦title字数怎样限制呢?相信对织梦cms熟悉的朋友来说,这真不是一个问题.当然了,有些方法并不能通用,在特殊情况下,是没有效果的哦.好了,别的不说了,给大家贴两种常用的方法吧. 织梦cms限制t ...
- javascript控制页面控件隐藏显示的两种方法
javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: document.all<"PanelSMS">.styl ...
- 知识点2:js(javascript)中检测是否为数组的两种方法【翻转数组案例】
javascript基础知识 文章目录 javascript基础知识 前言 一.翻转数组案例 二.检测数组的两种方法 1.如果传输的参数不是数组 2.instanceof 运算符 可以用来检测是否满足 ...
- 【VUE】vue实现登录滑动拼图验证的两种方法,纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
最新文章
- StingBuffer
- python3多线程----锁机制
- URI,URL与URN的区别
- 将win7笔记本电脑变身WiFi热点,让手机、ipad共享上网!
- angularjs指令(一)
- java 生成txt日志方法,java定向输出程序日志(输出到txt文件中)
- scapy:收发数据包
- Msmq设计文档(赋源代码)
- Atitit 文档资料处理重要类库与工具 跨语言api和第三方api跨语言 类库工具	大概功能	功能 Curl	httpclient	文件上传下载 数据传输rest doctotext.exe
- Atitit 爬虫发展历史 在互联网发展初期,网站相对较少,信息查找比较容易。然而伴随互联网爆炸性的发展,普通网络用户想找到所需的资料简直如同大海捞针,这时为满足大众信息检索需求的专业搜索网站便应运
- MySQL 5.6版本二进制包多实例安装
- 媒体查询加上rem实现页面字体大小自适应
- 帅帅什么意思_帅帅帅是什么意思
- vue炫酷好看的登陆界面
- word文档没保存就关了怎么恢复?别慌!试试这个操作
- 2019中国网络作家影响力榜乌贼排第一,烽火第二十,让人不解
- HTML常见的扩展名,HTML文件通常带有.html或.htm的文件扩展名
- 1 Microservice 简介
- 工程图学及计算机绘图第二版答案,工程图学及计算机绘图第3版答案
- 李炎恢ecshop2.7.2安装教程与PHP5.5x不兼容的处理方法
热门文章
- php 织梦模板 防盗,织梦DedeCMS模板怎么防盗
- matlab立体坐标定位_【光电视界】视觉导航定位系统工作原理及过程
- eclipse中run运行不了_Springboot专辑:运行 Spring Boot 应用的 3 种方式!
- jdialog 数据量大加载出现白板_王者荣耀:队友真的有人机?白板熟练进排位,资料面都是假的...
- C++新特性探究(18.3):C++11 weak_ptr智能指针
- PHP编写增功能思路,php ztree如何实现增 删 改
- word排版插件_8款堪称神器的Office插件,让你工作效率直线飙升!
- linux内核兼容性,各种glibc和Linux内核版本的兼容性
- 刀片服务器虚拟化哪家好,刀片服务器TOP5 细数虚拟化时代利器
- C++11多线程实现银行存取款案例