zoukankan      html  css  js  c++  java
  • Javascript(js)分页程序

    发一个昨天晚上新鲜出炉的Javascript(js)分页程序,带详解,业余水平。。。。 不用任何jquery 之类的库

    发一个昨天晚上刚写好的js分页程序。
    较早之前写过一个,不过后来发现有问题,不好用,所以在端午节前夜,我把它重新写了一遍。
    下面开始正题:
    目标:写一个JS分页函数,函数能够根据给出的总页数和当前页自动生成相应的html代码并且插入的到给定的父容器中。
    实现:

    分页原理:分页就是将很长的内容按规定长度分开,在PHP中是通过 mysql数据库语言中 LIMIT来实现获取指定部分的数据。
    LIMIT的用法简要在这简要介绍下,详细用法 请见 MySQL 5.5 Reference Manual。(我这里用的是5.5,当然也可以看看其他版本的)
    LIMIT 有两个参数(我不知道叫参数对不对)
    LIMIT [offset,] rows
    第一个为偏移量,第二个为返回的行数。
    例如,我们要查询时间最新的6条记录可以这样写
    SELECT * FROM `table` WHERE 1 ORDER BY `date` DESC LIMIT 0, 6
    了解了这个,分页就变得简单了。。。
    无论您使用AJAX 还是什么,改变的只是 数据库的语句的LIMIT 中的 [offset]
    页码算法
    我们先对定义的变量进行下说明

    1、函数参数 total_page, current_page, father    分别为总页数,当前页,父容器的id
    2、pager_length    pager 的长度 (具体见下图)
    3、head_length     head 长度(具体见下图)
    4、tail_length    tali的长度 (具体见下图)(tail_length 需要和 head_length 相等 )

    5、a_tag     插入的标签名
    6、a_class    插入标签的类名
    7、a_id      插入标签的id
    8、a_name    插入标签的name
    9、disable_class 不可用时的样式的类( 比如当前页为第一页的时候,prev则为disable)
    10、select_class 选中状态的样式的类(当前页显示的样式,譬如换个背景啥的)
    11、code     最后拼接生成的代码

    调用的其他函数为

    1 function fill_tag(a_tag, a_class, a_id, a_name, a_html){
    2 a_class = (a_class == '') ? '' : ' class="'+a_class+'"';
    3 a_id = (a_id == '') ? '' : ' id="'+a_id+'"';
    4 a_name = (a_name == '') ? '' : ' name="'+a_name+'"';
    5 var code = '<'+a_tag+a_class+a_id+a_name+' >'+a_html+'</'+a_tag+'>';
    6 return code;
    7 }


    该函数返回一个给定了标签名,class,id,name,以及标签内容的的html字符串
    下面开始具体的实现
    分为两种情况:
    总页数小于pager_length (如下图)

    总页数大于pager_length(如下图)

    首先给出
    情形1时的方法,这种情况很简单,循环total_page次就可以了

    1 if( total_page < pager_length )
    2 {
    3 for(i = 0; i < total_page; i++)
    4 {
    5 code += (i+1 != current_page) ? fill_tag(a_tag, a_class, a_id, a_name, i+1) : fill_tag(a_tag, select_class, a_id, a_name, i+1);
    6 }
    7 }




    而对于第二种情况,又可以分为三种子情况
    分别如下
    不需要出现左边的"...";

    不需要出现右边的"...“;

    两边都要出现"...";

    下面我们对每一种情况具体的分析:
    首先我们需要算出整个pager的半长,我叫他offset
    1 var offset = ( pager_length - 1) / 2;

    这个变量的作用 我们后面再谈。
    为了方便说明,我们此处假设
    1 pager_length = 11;
    2 header_length = tailer_length = 2;

    此时offset = 5
    1、不需要出现左边的"...";
    先看一个图

    此图中,带X的方框表示当前页,可以看出:
    当前页小于等于offset+1的时候,不需要出现左边的...

    1 if( current_page <= offset + 1)
    2 {
    3 var tailer = '';
    4 //前header_length + main_length 个直接输出之后加一个...然后输出倒数的 tailer_length 个
    5 for( i = 0; i < header_length + main_length; i ++)
    6 code += (i+1 != current_page) ? fill_tag(a_tag, a_class, a_id, a_name, i+1) : fill_tag(a_tag, select_class, a_id, a_name, i+1);
    7 code += fill_tag(a_tag, a_class, a_id, a_name, '...');
    8 for(i = total_page; i > total_page - tailer_length; i --)
    9 tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
    10 code += tailer;
    11 }


    此处由于对称,需要继续算出上图中X后面的对应个数,同时还应该加上最后的tail(不知道tail 看看变量说明中的图)

    2、不需要出现右边的"...“;
    这个情况和上面的情况一致,我直接给出代码

    1 else if( current_page >= total_page - offset )
    2 {
    3 var header = '';
    4 for( i = total_page; i >= total_page-main_length - 1; i --)
    5 code = (( current_page != i ) ? fill_tag(a_tag, a_class, a_id, a_name, i) : fill_tag(a_tag, select_class, a_id, a_name, i)) + code;
    6 code = fill_tag(a_tag, a_class, a_id, a_name, '...') + code;
    7 for( i = 0; i < header_length ; i++)
    8 header += fill_tag(a_tag, a_class, a_id, a_name, i + 1);
    9 code = header + code;
    10 }


    3、两边都要出现"...";
    除了上面两种情况之外,剩下的就着一种情况了。
    这种情况的head he tail 都是固定的,可以直接给出

    1 var header = '';
    2 var tailer = '';
    3 //首先处理头部
    4 for( i = 0; i < header_length; i ++)
    5 header += fill_tag(a_tag, a_class, a_id, a_name, i + 1);
    6 header += fill_tag(a_tag, a_class, a_id, a_name, '...');
    7 //处理尾巴
    8 for(i = total_page; i > total_page - tailer_length; i --)
    9 tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
    10 tailer = fill_tag(a_tag, a_class, a_id, a_name, '...') + tailer;

    中间的情况:
    由于是对称的 我们前半部分叫做partA , 后半部分叫做partB
    两部分在同一个循环中处理
    此时循环测次数应该为main的半长 + 当前页;
    因此有以下代码
    1 var offset_m = ( main_length - 1 ) / 2;
    2 var counter = ( parseInt( current_page ) + parseInt( offset_m ) );


    1 for(i = j = current_page ; i <= counter; i ++, j --)
    2 {
    3 partA = (( i == j ) ? '' : fill_tag(a_tag, a_class, a_id, a_name, j)) + partA;
    4 partB += ( i == j ) ? fill_tag(a_tag, select_class, a_id, a_name, i) : fill_tag(a_tag, a_class, a_id, a_name, i);
    5 }

    最后一步,将head tail main 拼接起来
    code = header + partA + partB + tailer;

    这样三中情况都处理完了,可是prev和next在哪里??? 请接着看
    1 var prev = ( current_page == 1 ) ? fill_tag(a_tag, disable_class, a_id, a_name, 'prev') : fill_tag(a_tag, a_class, a_name, a_name, 'prev');
    2 var next = ( current_page == total_page ) ? fill_tag(a_tag, disable_class, a_id, a_name, 'next') : fill_tag(a_tag, a_class, a_name, a_name, 'next');
    3 code = prev + code + next;
    4 document.getElementById(father).innerHTML=(code);

    最后将他们放入父容器就OK啦。。。。

    下面附上一个测试代码,您可以直接把他复制到记事本中另存为html查看

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5 <title>无标题文档</title>
    6 </head>
    7 <style type="text/css">
    8 .disable {
    9 color:#FF0000;
    10 font-weight:bold;
    11 }
    12 .select {
    13 color:#00F;
    14 font-weight:bold;
    15 }
    16 </style>
    17 <script type="text/javascript">
    18 function update_page(total_page,current_page,father)
    19 {
    20 var total_page = parseInt( total_page );
    21 var current_page = parseInt( current_page );
    22 var pager_length = 11; //不包next 和 prev 必须为奇数
    23 var pager = new Array( pager_length );
    24 var header_length = 2;
    25 var tailer_length = 2;
    26 //header_length + tailer_length 必须为偶数
    27 var main_length = pager_length - header_length - tailer_length; //必须为奇数
    28
    29 var a_tag = 'li';
    30 var a_class = '';
    31 var a_id = '';
    32 var a_name = '';
    33
    34 var disable_class = 'disable';
    35 var select_class = 'select';
    36
    37 var i;
    38 var code = '';
    39 if( total_page < current_page )
    40 {
    41 alert('总页数不能小于当前页数');
    42 return false;
    43 }
    44 //判断总页数是不是小于 分页的长度,若小于则直接显示
    45 if( total_page < pager_length )
    46 {
    47 for(i = 0; i < total_page; i++)
    48 {
    49
    50 code += (i+1 != current_page) ? fill_tag(a_tag, a_class, a_id, a_name, i+1) : fill_tag(a_tag, select_class, a_id, a_name, i+1);
    51 }
    52 }
    53 //如果总页数大于分页长度,则为一下函数
    54 else
    55 {
    56 //先计算中心偏移量
    57 var offset = ( pager_length - 1) / 2;
    58 //分三种情况,第一种左边没有...
    59 if( current_page <= offset + 1)
    60 {
    61 var tailer = '';
    62 //前header_length + main_length 个直接输出之后加一个...然后输出倒数的 tailer_length 个
    63 for( i = 0; i < header_length + main_length; i ++)
    64 code += (i+1 != current_page) ? fill_tag(a_tag, a_class, a_id, a_name, i+1) : fill_tag(a_tag, select_class, a_id, a_name, i+1);
    65 code += fill_tag(a_tag, a_class, a_id, a_name, '...');
    66 for(i = total_page; i > total_page - tailer_length; i --)
    67 tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
    68
    69 code += tailer;
    70 }
    71 //第二种情况是右边没有...
    72 else if( current_page >= total_page - offset )
    73 {
    74 var header = '';
    75 //后tailer_length + main_length 个直接输出之前加一个...然后拼接 最前面的 header_length 个
    76 for( i = total_page; i >= total_page-main_length - 1; i --)
    77 code = (( current_page != i ) ? fill_tag(a_tag, a_class, a_id, a_name, i) : fill_tag(a_tag, select_class, a_id, a_name, i)) + code;
    78 code = fill_tag(a_tag, a_class, a_id, a_name, '...') + code;
    79 for( i = 0; i < header_length ; i++)
    80 header += fill_tag(a_tag, a_class, a_id, a_name, i + 1);
    81
    82 code = header + code;
    83 }
    84 //最后一种情况,两边都有...
    85 else
    86 {
    87 var header = '';
    88 var tailer = '';
    89 //首先处理头部
    90 for( i = 0; i < header_length; i ++)
    91 header += fill_tag(a_tag, a_class, a_id, a_name, i + 1);
    92 header += fill_tag(a_tag, a_class, a_id, a_name, '...');
    93 //处理尾巴
    94 for(i = total_page; i > total_page - tailer_length; i --)
    95 tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
    96 tailer = fill_tag(a_tag, a_class, a_id, a_name, '...') + tailer;
    97 //处理中间
    98 //计算main的中心点
    99 var offset_m = ( main_length - 1 ) / 2;
    100 var partA = '';
    101 var partB = '';
    102 var j;
    103 var counter = (parseInt(current_page) + parseInt(offset_m));
    104 for(i = j = current_page ; i <= counter; i ++, j --)
    105 {
    106 partA = (( i == j ) ? '' : fill_tag(a_tag, a_class, a_id, a_name, j)) + partA;
    107 partB += ( i == j ) ? fill_tag(a_tag, select_class, a_id, a_name, i) : fill_tag(a_tag, a_class, a_id, a_name, i);
    108 }
    109 //拼接
    110 code = header + partA + partB + tailer;
    111
    112
    113 }
    114 }
    115
    116
    117 var prev = ( current_page == 1 ) ? fill_tag(a_tag, disable_class, a_id, a_name, 'prev') : fill_tag(a_tag, a_class, a_name, a_name, 'prev');
    118 var next = ( current_page == total_page ) ? fill_tag(a_tag, disable_class, a_id, a_name, 'next') : fill_tag(a_tag, a_class, a_name, a_name, 'next');
    119 code = prev + code + next;
    120 document.getElementById(father).innerHTML=(code);
    121 }
    122 function fill_tag(a_tag, a_class, a_id, a_name, a_html){
    123 a_class = (a_class == '') ? '' : ' class="'+a_class+'"';
    124 a_id = (a_id == '') ? '' : ' id="'+a_id+'"';
    125 a_name = (a_name == '') ? '' : ' name="'+a_name+'"';
    126 var code = '<'+a_tag+a_class+a_id+a_name+' >'+a_html+'</'+a_tag+'>';
    127 return code;
    128 }
    129 </script>
    130 总页数:<input type="text" value="" id="total_page" /><br />
    131 当前页:<input type="text" value="" id="current_page" /><br />
    132 <input type="button" value="test" id="test" />
    133 <div><ul id="code"></ul></div>
    134 <script type="text/javascript">
    135 document.getElementById('test').onclick = function(){
    136 var total_page = document.getElementById('total_page').value;
    137 var current_page = document.getElementById('current_page').value;
    138 update_page(total_page, current_page, 'code');
    139 // var tem = (fill_tag('a','class','id','name','xxxx'));
    140 // alert(tem);
    141 }
    142 </script>
    143 <body>
    144 </body>
    145 </html>


    原创文章,转载请注明出处 http://www.cnblogs.com/doug/archive/2012/06/23/2559568.html

    分类: My Javascript
    标签: js

  • 相关阅读:
    AtCoder Beginner Contest 167
    AtCoder Beginner Contest 166
    AtCoder Beginner Contest 165
    AtCoder Beginner Contest 164
    AtCoder Beginner Contest 163
    AtCoder Beginner Contest 162
    AtCoder Beginner Contest 161
    AtCoder Beginner Contest 160
    AtCoder Beginner Contest 159
    自定义Mybatis自动生成代码规则
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2559721.html
Copyright © 2011-2022 走看看