JS分页组件和配套的CSS样式

最新推荐文章于 2025-08-06 09:16:03 发布

转载最新推荐文章于 2025-08-06 09:16:03 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lus/blog/117753

本文介绍了一个简单的前端分页组件的实现方式，包括JavaScript部分的功能实现及CSS样式设计。通过自定义函数完成首页、上一页、下一页及尾页等基本操作，并可根据用户选择调整每页显示的数据数量。

为什么80%的码农都做不了架构师？>>>

------------------------------------------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>   每页显示:';
    html += '<select id="showCount" value="'+ showCount +'" onchange="changCount(this)"><option value="10">10</option></select>条 ';
    html += '</label>    ';
    html += '<label>总记录：<label id="count">'+ count +'</label> 条</label><label>  当前第<label id="pageCount">'+ pageCount +'</label>页</label>';
    html += '</div>';
    return html;
}

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

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

转载于:https://my.oschina.net/lus/blog/117753