使用js实现HTML静态页面表格数据分页(表头保持不变)

这是最终实现的效果图

下面是Html代码


	
		
			...
			...
			...
			...
		
		
			...
			...
			...
			...
		
		
			...
			...
			...
			...
		
	
	
		
			...
			...
			...
			...
		
		
			...
			...
			...
			...
		
		
			...
			...
			...
			...
		
	


   首页
    上一页
    下一页
    尾页
    第页/共
    页

...	...	...	...
...	...	...	...
...	...	...	...
...	...	...	...

下面是js代码块

	var theUL = document.getElementById("pageListTableBody");
    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 = theUL.getElementsByTagName("tr").length; //记录总条数
    var pageSize = 10; //每页显示的记录条数
    var page = 1; //当前页，默认第一页

    //下一页
    function next(){
        hideTable();
        currentRow = pageSize * page;
        maxRow = currentRow + pageSize;
        if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;
        for ( var i = currentRow; i< maxRow; i++ ){
            theUL.getElementsByTagName("tr")[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++ ){
            theUL.getElementsByTagName("tr")[i].style.display = '';
        }
        if ( maxRow == 0 ){
            preText();
            firstText();
        }
        showPage();
        nextlink();
        lastlink();
    }

    //第一页
    function first(){
        hideTable();
        page = 1;
        for ( var i = 0; i 
参考链接

...	...	...	...
...	...	...	...
...	...	...	...
...	...	...	...
...	...	...	...
...	...	...	...

...	...	...	...
...	...	...	...
...	...	...	...
...	...	...	...
...	...	...	...
...	...	...	...

使用js实现HTML静态页面表格数据分页(表头保持不变)

Python相关栏目本月热门文章

...	...	...	...
...	...	...	...
...	...	...	...
...	...	...	...
...	...	...	...
...	...	...	...