JS分頁組件和配套的CSS樣式（由JS計算分頁）

------------------------------------------JS--------------------------------------------------
 function createPage(showCount ,  pageCount ,  count){
    var html = '<div class="pages">';
    html += '<a href="javascript:void(0)" onclick="firstPage()" id="firstPage" class=".prev">首頁</a>';
    html += '<a href="javascript:void(0)" onclick="upPage()" id="upPage">上一頁</a>';
    html += '<a href="javascript:void(0)" id="downPage" onclick="next()">下一頁</a>';
    html += '<a href="javascript:void(0)" onclick="lastPage()" id="lastPage">尾頁</a>';
    html += '<label>&nbsp; &nbsp;每頁顯示:';
    html += '<select id="showCount" value="'+ showCount +'" onchange="changCount(this)"><option value="10">10</option></select>條 ';
    html += '</label>&nbsp;&nbsp; &nbsp;';
    html += '<label>總記錄：<label id="count">'+ count +'</label> 條</label><label>&nbsp;&nbsp;當前第<label id="pageCount">'+ pageCount +'</label>頁</label>';
    html += '</div>';
    return html;
 }

 

 function tobottom(){
    document.documentElement.scrollTop =  1500 + "px";
   }
  

 

   //此方法為顯示表單，通過Ajax擷取資料
   function showPageView(start , end){

    //顯示的表單區域（dispatchRiskTable）

    dispatchRiskTable.clearData();
    var jsonData = eval( '(' + dataList + ')');
    var jsonDataList =  jsonData['baseInfoList'];
   
    var length =  jsonDataList.length > end ? end : jsonDataList.length ;
   
    for(var i = start; i < length; i++){
     dispatchRiskTable.addDataObject(jsonDataList[i]);
    }
    dispatchRiskTable.showAll();   

 }

 function firstPage(){
    getElement('pageCount').innerText = '1';
    showPageView(0 , Number( getElement('showCount').value));
  
 }

 function upPage(){
    if( (Number(getElement('pageCount').innerText) -1)  <= 0 ){
     return;
    }
    getElement('pageCount').innerText =  ( Number(getElement('pageCount').innerText) - 1);
    showPageView( (Number(getElement('pageCount').innerText) -1) * Number(getElement('showCount').value)
      ,(Number(getElement('pageCount').innerText)) * Number(getElement('showCount').value)  );
 }

 function next(){
    if( (Number(getElement('pageCount').innerText) ) * Number(getElement('showCount').value) >=  Number( getElement('count').innerText )){
     return;
    }
    getElement('pageCount').innerText = Number(getElement('pageCount').innerText) + 1;
    showPageView( (Number(getElement('pageCount').innerText) -1) * Number(getElement('showCount').value)
      ,(Number(getElement('pageCount').innerText)) * Number(getElement('showCount').value)  );
 }

 function lastPage(){
    var text = Number(getElement('count').innerText)  / Number( getElement('showCount').value ) + "";
    text = text.substring( 0 , text.indexOf('.')  );
   
    if( Number(getElement('count').innerText)  % Number( getElement('showCount').value ) == 0) {
   
     getElement('pageCount').innerText = text ;
    }else {
     getElement('pageCount').innerText = Number(text ) + 1;
    }
   
    showPageView( (Number(getElement('pageCount').innerText) -1)* Number(getElement('showCount').value) , (Number(getElement('pageCount').innerText) )* Number(getElement('showCount').value) );
 }

 function changCount(element){
    getElement('pageCount').innerText = 1;
    showPageView( (Number(getElement('pageCount').innerText) -1) * Number(element.value) , (Number(getElement('pageCount').innerText))* Number(element.value) );
 }

  function getElement(id){
    return document.getElementById(id);
 }
 

 

 

 

-----------------------------------------CSS---------------------------------------------------
.pages {width:972px; height:25px; overflow:hidden; text-align:center; line-height:25px; font-family:Verdana; }
.pages a, .pages strong { margin:0 1px; padding:2px 6px; border:1px solid #E4E4E4; text-decoration:none!important; }
.pages a:hover { border-color:#369; }
.pages strong { border-color:#369; background:#369; color:#FFF; }
.pages .prev { padding:4px 6px 2px 20px!important; padding:4px 6px 0 20px; background:url(images/arrow_left.gif) no-repeat 9% 50%; font-family:simsun; }
.pages .next { padding:4px 20px 2px 6px!important; padding:4px 20px 0 6px; background:url(images/arrow_right.gif) no-repeat 91% 50%; font-family:simsun; }
.pages label{ color:#0063DC; text-decoration:none; }