原生js实现分页

Html

Css


    
        
            1
             
             
             
             
        
        
            2
             
             
             
             
        
        
            3
             
             
             
             
        
        
            4
             
             
             
             
        
        
            5
             
             
             
             
        
        
            6
             
             
             
             
        
        
            7
             
             
             
             
        
        
            8
             
             
             
             
        
        
            9
             
             
             
             
        
        
            10
             
             
             
             
        
        
            11
             
             
             
             
        
    

第一页 上一页 下一页 最后一页 第页/共页

var theTable = document.getElementById("table2");
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 numberRowsInTable = theTable.rows.length;
var pageSize = 3;
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[0].style.display = '';
        theTable.rows[i].style.display = 'none';
    }
}

function showPage() {
    pageNum.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>";
}

function preText() {
    spanPre.innerHTML = "上一页";
}

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

function nextText() {
    spanNext.innerHTML = "下一页";
}

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

function firstText() {
    spanFirst.innerHTML = "第一页";
}

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

function lastText() {
    spanLast.innerHTML = "最后一页";
}

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

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

nextLink();
    lastLink();
}
hide();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js实现分页



代码描述：原生js table实现分页

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

歪歪侯123

相关代码

原生js实现分页

最新