使用纯js写的一个分页

上图晒效果：

网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用limit进行分页。

因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用

这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问题的

废话不多说，直接上代码了！      注：本项目是全程使用js来写的，前台的数据通过ajax进行获取，然后再进行拼装，动态加载到页面。

1.先把上一页，下一页等的代码附上(里面的值都是伪值，下面会在js里进行重新赋值的！)


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<ul class="page" id="page">

        <li id="shouye" class="p-prev disabled">

            <a href=‘javascript:indexpage(1);‘>首 页</a>

        </li>

        <li id="shangyiye" class="p-prev disabled" >

            <a href=‘javascript:indexpage(-1);‘><i></i>上一页</a>

        </li>

        <li ><a id="one" href="javascript:void(0);"  >1</a></li>

        <li><a id="two" href="javascript:void(0);" >2</a></li>

        <li><a id="three" href="javascript:void(0);" >3</a></li>

        <li class="more"><a id="five" href="javascript:void(0);" >...</a></li>

        <li><a id="fore" href="javascript:void(0);" >13855</a></li>

        <li class=‘p-next‘>

            <a href=‘javascript:indexpage(-3);‘ onclick="jumpToPage(‘2‘,‘/goods/ajaxqueryGoodsList.do.html‘,‘‘,‘goodsListContainer‘,‘13855‘, listPageCallback);">下一页<i></i></a>

        </li>

        <li id="weiye" class=‘p-next‘>

            <a href=‘javascript:void(0);‘ onclick="indexpage(0);">尾 页</a>

        </li>

        <li class="total">

                        <span id="span_number">共13855页 到第<input type="text" id="input_number" class="page-txtbox" />页

                            <input name="" value="确定" type="button" onclick="jumpToPage(jQuery(‘#input_number‘).val(),‘/goods/ajaxqueryGoodsList.do.html‘,‘‘,‘goodsListContainer‘,‘13855‘, listPageCallback);" class="page-btn"/>

                        </span>

        </li>

    </ul>

2.首先在页面放两个隐藏域，一个是当前页码，一个是总页码，总页码是页面加载完，从后台查询出来后直接附上值的，当前页码是没操作一个，就要对当前页码赋值

　　<input id="jiazai" type="hidden" ></input><!-- 当前页码 -->
    <input id="totalpage" type="hidden" ></input><!-- 总页码 -->

3.写一个页面加载完的function，给总页码和当前页码赋值


1

2

3

4

5

$(function(){

     $(‘#jiazai‘).val(1);//给当前页码进行赋值，默认为第一页

     ajaxfunction(page,arg,chipssort,‘‘);//这个方法是抽取的ajax后台访问的方法

    

});

4.抽取的ajax方法，此页面会用到好几次这个方法，所有把它收取了出来，因为页面的数据时通过ajax从后台获取到的，后台返回的是一个List集合


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

//抽取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);

        }

    });

}

3.代码看到这也不是很多，最后一个了


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

//抽取拼串的方法

function commonfunction(data){

    $(‘#projectlist‘).find("li").remove();

      for (var i=0;i<data.length;i++ )

     { 

        /*****因为此页面是动态加载的，这里主要就是进行拼串，代码也不少，就不漏出来占空间了*****/<br>　　　　　　　　　　

         

     }<br>　　　　　　//开始是分页的核心了

      if(data.length>0){

          //设置页码

            var pading =  data[0].padingnum;//总页码

            $(‘#totalpage‘).val(pading);

            var page = $(‘#jiazai‘).val();//当前页

             $(‘#countpage‘).html("<b id=‘currentPageNo‘>"+page+"</b>/"+pading+"");

             

             $(‘#span_number‘).html("共"+pading+"页 到第<input type=‘text‘ id=‘input_number‘ class=‘page-txtbox‘ />页<input name=‘‘ value=‘确定‘ type=‘button‘ onclick=‘indexpage(-2)‘/goods/ajaxqueryGoodsList.do.html‘,‘‘,‘goodsListContainer‘,‘"+pading+"‘, listPageCallback);‘ class=‘page-btn‘/>")

      }else{

          $(‘#countpage‘).html("<b id=‘currentPageNo‘>"+0+"</b>/"+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<br>　　　　　　//下面代码看着是比较麻烦，但是也不难理解  全是一样的代码，只不过是加了些判断

      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)); 

}

好了，到这里分页就完成了，如果你们需要使用的话，可能会话费一会去理解我的代码，其实代码不难，我是使用了两个小时把它写完的，只要一行一行代码看，并且自己再加注释，把这块弄过去，不出半小时绝对搞定！

时间： 2024-10-13 00:17:41

使用纯js写的一个分页的相关文章

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 1 var defaultPra = { 2 mainMenuId: "ArcMenu",//主菜单id 3 menuBoxId:"menuBox",//菜单包裹id 4 position: "",//弧形菜单 5 customPosition:"0

用js写的一个路由

前几天在院子里看了一个大牛用js写了一个路由的,有一句代码一直不知道怎么回事,后来就自己写了一个,写的比较的粗糙,我觉得把面向对象的思想都搞得乱七八糟的,不过功能实现了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现路由</title> </head> <body> &

wg_pagenation 1.0 自己写的一个分页插件_基于Jquery

前言: 现在这个分页插件也不少,感觉缺点什么,所以自己就写了一个,喜欢的人就拿去用......有bug和建议可以回复,我有空就修改和答复..... 感谢我的基友,刘总...他主要给本插件写配套主题css; 特点: 整合ajax可以异步和后台交互数据,定制化选项多.和Jquery的pagenation比较类似,但是功能更多,选择性更多. 当前版本:1.0 完成日期:20150815 效果图: White.css的效果图: default.css效果图: 上图上向下的箭头表示的是每一个可选择和更改的

Js写的一个倒计时效果实例

我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果:另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf

纯js写的分页表格数据为json串

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String basePath = request.getSchem

自己写的一个分页查询前台页码控制

<!doctype html> <%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%> <%@ include file="/pages/common/taglibs.jsp"%> <html> <head> <meta http-equiv=Co

纯JS写的2048游戏，分享之

这几天玩儿着2048这个游戏,突然心血来潮想练习下敲代码的思路.于是乎就模仿做了一个,到眼下位置还没有实现动态移动,不是非常好看,只是玩儿着自己模仿的小游戏还是蛮爽的,哈哈 假设没有玩儿过这个游戏,最好先试玩儿下,这样看起下边的代码来easy些 用的是event.临时不支持firefox下玩儿... 试玩儿>> 里边好多步骤写得不够简单介绍明了.欢迎指正 两个小时构思,主要构思用什么形式存表格,以及当中用到的几个比較关键的方法,比方:是否须要移动,是否须要合并,移动方法.合并方法等,然后開始编

js写随机一个颜色

绘制图表时,多条数据后台不会规定颜色,so 前台需要自己使用随机色,记录一个小方法: function randomColor() { var arr = ['a', 'b', 'c', 'd', 'e', 'f', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; var chars = ''; for(var i = 0; i < 6; i ++) { chars += arr[Math.round(Math.random() * 100

自己写了一个分页类

第一次发文章,格式不太规范,不过以后会逐渐改正的,请大家多多指正 ? public class Pager     {         private string _pageurl;         private int _pagecount;         private int _currentpage;         public Pager(string pageurl, int pagecount, int currentpage)         {