發一個昨天晚上新鮮出爐的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　　　　  最后拼接生成的代碼

 

調用的其他函數為

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

 

該函數返回一個給定了標簽名，class，id，name，以及標簽內容的的html字符串 

下面開始具體的實現

分為兩種情況：

1. 總頁數小於pager_length （如下圖）

   

2. 總頁數大於pager_length（如下圖）

   

首先給出

 情形1時的方法，這種情況很簡單，循環total_page次就可以了

if( total_page < pager_length )
{
    for(i = 0; i <     total_page; i++)
    {        
        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);
    }
}

 

 

 

而對於第二種情況，又可以分為三種子情況

分別如下

1. 不需要出現左邊的"..."；

   

2. 不需要出現右邊的"...“；

   

3. 兩邊都要出現"..."；

   

下面我們對每一種情況具體的分析：

首先我們需要算出整個pager的半長，我叫他offset

var offset = ( pager_length - 1) / 2;

 

這個變量的作用 我們后面再談。

為了方便說明，我們此處假設 

pager_length = 11;
header_length = tailer_length = 2；

 

此時offset = 5

1、不需要出現左邊的"..."；

先看一個圖

此圖中，帶X的方框表示當前頁，可以看出：

當前頁小於等於offset+1的時候，不需要出現左邊的...

if( current_page <= offset + 1)
{
    var tailer = '';
    //前header_length + main_length 個直接輸出之后加一個...然后輸出倒數的    tailer_length 個
    for( i = 0; i < header_length + main_length; i ++)
        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);
    code += fill_tag(a_tag, a_class, a_id, a_name, '...');
    for(i = total_page; i > total_page - tailer_length; i --)
        tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;        
    code += tailer;
}

 

此處由於對稱，需要繼續算出上圖中X后面的對應個數，同時還應該加上最后的tail（不知道tail 看看變量說明中的圖）

 

2、不需要出現右邊的"...“；

這個情況和上面的情況一致，我直接給出代碼

else if( current_page >= total_page - offset )
{
    var header = '';
    for( i = total_page; i >= total_page-main_length - 1; i --)
        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;
    code = fill_tag(a_tag, a_class, a_id, a_name, '...') + code;
    for( i = 0; i < header_length ; i++)
        header +=  fill_tag(a_tag, a_class, a_id, a_name, i + 1);
    code = header + code;
}

 

3、兩邊都要出現"..."；

除了上面兩種情況之外，剩下的就着一種情況了。

這種情況的head he tail 都是固定的，可以直接給出

var header = '';
var tailer = '';
//首先處理頭部
for( i = 0; i < header_length; i ++)
    header += fill_tag(a_tag, a_class, a_id, a_name, i + 1);
header += fill_tag(a_tag, a_class, a_id, a_name, '...');
//處理尾巴
for(i = total_page; i > total_page - tailer_length; i --)
    tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
tailer = fill_tag(a_tag, a_class, a_id, a_name, '...') + tailer;

中間的情況：

由於是對稱的 我們前半部分叫做partA ， 后半部分叫做partB

兩部分在同一個循環中處理

此時循環測次數應該為main的半長 + 當前頁；

因此有以下代碼

var offset_m = ( main_length - 1 ) / 2;
var counter = ( parseInt( current_page ) + parseInt( offset_m ) );

 

和

for(i = j = current_page ; i <= counter; i ++, j --)
{
    partA = (( i == j ) ? '' : fill_tag(a_tag, a_class, a_id, a_name, j)) + partA;
    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);
}

 

最后一步，將head tail main 拼接起來

code = header + partA + partB + tailer;

 

這樣三中情況都處理完了，可是prev和next在哪里？？？ 請接着看

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');
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');
code = prev + code + next;
document.getElementById(father).innerHTML=(code);

 

最后將他們放入父容器就OK啦。。。。

 

下面附上一個測試代碼，您可以直接把他復制到記事本中另存為html查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">
.disable {
    color:#FF0000;
    font-weight:bold;
}
.select {
    color:#00F;
    font-weight:bold;
}
</style>
<script type="text/javascript">
function update_page(total_page,current_page,father)
{
    var total_page = parseInt( total_page );
    var current_page = parseInt( current_page );
    var pager_length = 11;    //不包next 和 prev 必須為奇數
    var pager = new Array( pager_length );
    var header_length = 2; 
    var tailer_length = 2;
    //header_length + tailer_length 必須為偶數
    var main_length = pager_length - header_length - tailer_length; //必須為奇數
    
    var a_tag = 'li';
    var a_class = '';
    var a_id = '';
    var a_name = '';
    
    var disable_class = 'disable';
    var select_class = 'select';
                
    var i;
    var code = '';
    if( total_page < current_page )
    {
        alert('總頁數不能小於當前頁數');
        return false;    
    }    
    //判斷總頁數是不是小於 分頁的長度，若小於則直接顯示
    if( total_page < pager_length )
    {
        for(i = 0; i <     total_page; i++)
        {
            
            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);
        }
    }
    //如果總頁數大於分頁長度，則為一下函數
    else
    {
        //先計算中心偏移量
        var offset = ( pager_length - 1) / 2;
        //分三種情況，第一種左邊沒有...
        if( current_page <= offset + 1)
        {
            var tailer = '';
            //前header_length + main_length 個直接輸出之后加一個...然后輸出倒數的    tailer_length 個
            for( i = 0; i < header_length + main_length; i ++)
                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);
            code += fill_tag(a_tag, a_class, a_id, a_name, '...');
            for(i = total_page; i > total_page - tailer_length; i --)
                tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
                
            code += tailer;
        }
        //第二種情況是右邊沒有...
        else if( current_page >= total_page - offset )
        {
            var header = '';
            //后tailer_length + main_length 個直接輸出之前加一個...然后拼接 最前面的 header_length 個
            for( i = total_page; i >= total_page-main_length - 1; i --)
                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;
            code = fill_tag(a_tag, a_class, a_id, a_name, '...') + code;
            for( i = 0; i < header_length ; i++)
                header +=  fill_tag(a_tag, a_class, a_id, a_name, i + 1);
            
            code = header + code;
        }
        //最后一種情況，兩邊都有...
        else
        {
            var header = '';
            var tailer = '';
            //首先處理頭部
            for( i = 0; i < header_length; i ++)
                header += fill_tag(a_tag, a_class, a_id, a_name, i + 1);
            header += fill_tag(a_tag, a_class, a_id, a_name, '...');
            //處理尾巴
            for(i = total_page; i > total_page - tailer_length; i --)
                tailer = fill_tag(a_tag, a_class, a_id, a_name, i) + tailer;
            tailer = fill_tag(a_tag, a_class, a_id, a_name, '...') + tailer;
            //處理中間
            //計算main的中心點
            var offset_m = ( main_length - 1 ) / 2;
            var partA = '';
            var partB = '';
            var j;
            var counter = (parseInt(current_page) + parseInt(offset_m));
            for(i = j = current_page ; i <= counter; i ++, j --)
            {
                partA = (( i == j ) ? '' : fill_tag(a_tag, a_class, a_id, a_name, j)) + partA;
                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);
            }
            //拼接
            code = header + partA + partB + tailer;
            
            
        }
    }
    
    
    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');
    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');
    code = prev + code + next;
    document.getElementById(father).innerHTML=(code);
}
function fill_tag(a_tag, a_class, a_id, a_name, a_html){
    a_class = (a_class == '') ? '' : ' class="'+a_class+'"';
    a_id = (a_id == '') ? '' : ' id="'+a_id+'"';
    a_name = (a_name == '') ? '' : ' name="'+a_name+'"';
    var code = '<'+a_tag+a_class+a_id+a_name+' >'+a_html+'</'+a_tag+'>';
    return code;
}
</script>
總頁數：<input type="text" value="" id="total_page" /><br />
當前頁：<input type="text" value="" id="current_page" /><br />
<input type="button" value="test" id="test" />
<div><ul id="code"></ul></div>
<script type="text/javascript">
document.getElementById('test').onclick = function(){
    var total_page = document.getElementById('total_page').value;
    var current_page = document.getElementById('current_page').value;
    update_page(total_page, current_page, 'code');
//    var tem = (fill_tag('a','class','id','name','xxxx'));
//    alert(tem);
}
</script>
<body>
</body>
</html>

---

 

原創文章，轉載請注明出處  http://www.cnblogs.com/doug/archive/2012/06/23/2559568.html