`

js 实现客户端无刷新分页效果

    博客分类：
  • JS
htmljavascripttablejs 
阅读更多
[/size]问题：

实现如下功能需求



1.table 按行数 分页

2.js 实现客户端无刷新效果

3.分页脚注 比较美观

4.可扩展 维护性比较好



Html代码  收藏代码

    <span style="font-size: x-small;"><html version="-//W3C//DTD HTML 4.01 Transitional//EN"> 
     
        <head> 
            <style type="text/css">     
                .pg-normal { 
                    color: black; 
                    font-weight: normal; 
                    text-decoration: none;     
                    cursor: pointer;     
                } 
                .pg-selected { 
                    color: black; 
                    font-weight: bold;         
                    text-decoration: underline; 
                    cursor: pointer; 
                } 
            </style> 
             
            <script type="text/javascript" src="paging.js"></script> 
        </head> 
         
        <body> 
            <form action="" method="get" enctype="application/x-www-form-urlencoded"> 
            <table id="results"> 
                <tr> 
                    <th>#</th> 
                    <th>field</th> 
                </tr> 
                <tr> 
                    <td>1</td> 
                    <td><input type="text" name="field-name" value="rec1"></td> 
                </tr> 
                <tr> 
                    <td>2</td> 
                    <td><input type="text" name="field-name" value="rec2"></td> 
                </tr> 
                <tr> 
                    <td>3</td> 
                    <td><input type="text" name="field-name" value="rec3"></td> 
                </tr> 
                <tr> 
                    <td>4</td> 
                    <td><input type="text" name="field-name" value="rec4"></td> 
                </tr> 
                <tr> 
                    <td>5</td> 
                    <td><input type="text" name="field-name" value="rec5"></td> 
                </tr> 
                <tr> 
                    <td>6</td> 
                    <td><input type="text" name="field-name" value="rec6"></td> 
                </tr> 
                <tr> 
                    <td>7</td> 
                    <td><input type="text" name="field-name" value="rec7"></td> 
                </tr> 
                <tr> 
                    <td>8</td> 
                    <td><input type="text" name="field-name" value="rec8"></td> 
                </tr> 
                <tr> 
                    <td>9</td> 
                    <td><input type="text" name="field-name" value="rec9"></td> 
                </tr> 
                <tr> 
                    <td>10</td> 
                    <td><input type="text" name="field-name" value="rec10"></td> 
                </tr> 
            </table> 
            <div id="pageNavPosition"></div> 
            <div><input type="submit" onclick="alert('Hey, this is just a sample!'); return false;" />&nbsp;<input type="reset" /></div> 
        </form> 
         
        <script type="text/javascript"><!-- 
            var pager = new Pager('results', 3);  
            pager.init();  
            pager.showPageNav('pager', 'pageNavPosition');  
            pager.showPage(1); 
        //--></script> 
         
        </body> 
    </html> 
    </span> 


Html代码  收藏代码

    <span style="font-size: x-small;">function Pager(tableName, itemsPerPage) { 
        this.tableName = tableName; 
        this.itemsPerPage = itemsPerPage; 
        this.currentPage = 1; 
        this.pages = 0; 
        this.inited = false; 
         
        this.showRecords = function(from, to) {         
            var rows = document.getElementById(tableName).rows; 
            // i starts from 1 to skip table header row 
            for (var i = 1; i < rows.length; i++) { 
                if (i < from || i > to)   
                    rows[i].style.display = 'none'; 
                else 
                    rows[i].style.display = ''; 
            } 
        } 
         
        this.showPage = function(pageNumber) { 
            if (! this.inited) { 
                alert("not inited"); 
                return; 
            } 
     
            var oldPageAnchor = document.getElementById('pg'+this.currentPage); 
            oldPageAnchor.className = 'pg-normal'; 
             
            this.currentPage = pageNumber; 
            var newPageAnchor = document.getElementById('pg'+this.currentPage); 
            newPageAnchor.className = 'pg-selected'; 
             
            var from = (pageNumber - 1) * itemsPerPage + 1; 
            var to = from + itemsPerPage - 1; 
            this.showRecords(from, to); 
        }    
         
        this.prev = function() { 
            if (this.currentPage > 1) 
                this.showPage(this.currentPage - 1); 
        } 
         
        this.next = function() { 
            if (this.currentPage < this.pages) { 
                this.showPage(this.currentPage + 1); 
            } 
        }                         
         
        this.init = function() { 
            var rows = document.getElementById(tableName).rows; 
            var records = (rows.length - 1);  
            this.pages = Math.ceil(records / itemsPerPage); 
            this.inited = true; 
        } 
     
        this.showPageNav = function(pagerName, positionId) { 
            if (! this.inited) { 
                alert("not inited"); 
                return; 
            } 
            var element = document.getElementById(positionId); 
             
            var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> &#171 Prev </span> | '; 
            for (var page = 1; page <= this.pages; page++)  
                pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | '; 
            pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next &#187;</span>';             
             
            element.innerHTML = pagerHtml; 
        } 
    } 
     
    </span> 



如果要实现美观效果 可自己加入css

实例扩展如下



相应css代码


Html代码  收藏代码

    #pageNavPosition{ 
        margin: 20px 0 0; 
        padding: 3px; 
        text-align: center; 
    } 
    .pg-normal { 
        border: 1px solid #DDDDDD; 
        cursor:pointer; 
        color: #61AF3F; 
        margin-left: 2px; 
        padding: 2px 5px; 
        text-decoration: none; 
    } 
    .pg-selected { 
        background-color: #A1D888; 
        border: 1px solid #B2E05D; 
        color: #638425; 
        padding: 2px 5px; 
        cursor:pointer; 
    } 
分享到：
| jsp乱码解决
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics