简单的js分页源码

<!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>

<body>

<span id="spanFirstt"></span><span id="spanPret"></span> <span id="spanNextt"></span>
<span id="spanLastt"></span><span id="spanPageNumt" style="display:none"></span><span id="spanTotalPaget" style="display:none"></span>

<table width="500" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">
<tr>
    <th colspan="5">lishewen</th>
</tr>
<tbody id="tablelsw">
<tr>
    <td bgcolor="#FFFFFF">1</td>
    <td bgcolor="#FFFFFF">算神</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">2</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">3</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">4</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">5</td>
    <td bgcolor="#FFFFFF">黎摄文</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">6</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">7</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">8</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">9</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">10</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">11</td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
    <td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<span id="spanFirst">第一页</span>
<span id="spanPre">上一页</span>
<span id="spanNext">下一页</span>
<span id="spanLast">最后一页</span>
第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页

</body>

<script>
// JavaScript Document By lishewen
var theTable = document.getElementById("tablelsw");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");

var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");

var totalPaget = document.getElementById("spanTotalPaget");
var pageNumt = document.getElementById("spanPageNumt");

var spanPret = document.getElementById("spanPret");
var spanNextt = document.getElementById("spanNextt");
var spanFirstt = document.getElementById("spanFirstt");
var spanLastt = document.getElementById("spanLastt");

var numberRowsInTable = theTable.rows.length;
var pageSize = 4;
var page = 1;

//下一页
function next(){

    hideTable();

    currentRow = pageSize * page;
    maxRow = currentRow + pageSize;
    if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;
    for ( var i = currentRow; i< maxRow; i++ ){
        theTable.rows[i].style.display = '';
    }
    page++;

    if ( maxRow == numberRowsInTable ) { nextText(); lastText(); }
    showPage();
    preLink();
    firstLink();
}

//上一页
function pre(){

    hideTable();

    page--;

    currentRow = pageSize * page;
    maxRow = currentRow - pageSize;
    if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;
    for ( var i = maxRow; i< currentRow; i++ ){
        theTable.rows[i].style.display = '';
    }


    if ( maxRow == 0 ){ preText(); firstText(); }
    showPage();
    nextLink();
    lastLink();
}

//第一页
function first(){
    hideTable();
    page = 1;
    for ( var i = 0; i<pageSize; i++ ){
        theTable.rows[i].style.display = '';
    }
    showPage();

    preText();
    nextLink();
    lastLink();
}

//最后一页
function last(){
    hideTable();
    page = pageCount();
    currentRow = pageSize * (page - 1);
    for ( var i = currentRow; i<numberRowsInTable; i++ ){
        theTable.rows[i].style.display = '';
    }
    showPage();

    preLink();
    nextText();
    firstLink();
}

function hideTable(){
    for ( var i = 0; i<numberRowsInTable; i++ ){
        theTable.rows[i].style.display = 'none';
    }
}

function showPage(){
    pageNum.innerHTML = page;
    pageNumt.innerHTML = page;
}

//总共页数
function pageCount(){
    var count = 0;
    if ( numberRowsInTable%pageSize != 0 ) count = 1;
    return parseInt(numberRowsInTable/pageSize) + count;
}

//显示链接
function preLink(){ spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; spanPret.innerHTML = "<a href='javascript:pre();'></a>";}
function preText(){ spanPre.innerHTML = "上一页"; spanPret.innerHTML = ""; }

function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; spanNextt.innerHTML = "<a href='javascript:next();'></a>";}
function nextText(){ spanNext.innerHTML = "下一页"; spanNextt.innerHTML = "";}

function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; spanFirstt.innerHTML = "<a href='javascript:first();'></a>";}
function firstText(){ spanFirst.innerHTML = "第一页"; spanFirstt.innerHTML = "";}

function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; spanLastt.innerHTML = "<a href='javascript:last();'></a>";}
function lastText(){ spanLast.innerHTML = "最后一页"; spanLastt.innerHTML = "";}

//隐藏表格
function hide(){
    for ( var i = pageSize; i<numberRowsInTable; i++ ){
        theTable.rows[i].style.display = 'none';
    }

    totalPage.innerHTML = pageCount();
    pageNum.innerHTML = '1';

    totalPaget.innerHTML = pageCount();
    pageNumt.innerHTML = '1';

    nextLink();
    lastLink();
}

hide();
</script>
      </div>
     </div>
    </div>
   </div>
</div>

<script>
  $('.toggle').on('click', function() {
   $('.menu').toggleClass('open');
   $('.w3nav').toggleClass('show-w3nav');
   $('.w3nav a').toggleClass('show-w3nav-link');
   $('.toggle').toggleClass('close');
  });
</script>


<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
   jQuery(document).ready(function($) {
    $(".scroll").click(function(event){
     event.preventDefault();

   $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
    });
   });
</script>


<script type="text/javascript">
  $(document).ready(function() {
   /*
   var defaults = {
    containerID: 'toTop', // fading element id
    containerHoverID: 'toTopHover', // fading element hover id
    scrollSpeed: 1200,
    easingType: 'linear'
   };
   */

   $().UItoTop({ easingType: 'easeOutQuart' });

  });
</script>


<script src="js/jquery.desoslide.js"></script>
<script>
  $('#demo1_thumbs').desoSlide({
   main: {
    container: '#demo1_main_image',
    cssClass: 'img-responsive'
   },
    effect: 'sideFade',
   caption: true
  });
</script>


    
    <script src="js/bootstrap.js"></script>
</body>
</html>

简单的js分页源码

猜你喜欢