天天看點

js控制表格靜态分頁顯示

    <div class="page"></div>

<script src="static/script/jquery.js"></script>

<script src="static/script/jquery.table.js"></script>

<script language="javascript" type="text/javascript">

$(function(){

    var $table=$("table");

    var currentPage=0;

    var pageSize=19;

    $table.bind( 'paging', function(){

        $table.find('tbody tr').hide().slice(currentPage*pageSize, (currentPage+1)*pageSize).show();

    });

    var sumRows=$table.find('tbody tr').length;

    var sumPages=Math.ceil(sumRows/pageSize);

    var $pager=$('<div></div>');

    for( var pageIndex=0;pageIndex<sumPages;pageIndex++) {

        $('<a  href="#" target="_blank" rel="external nofollow" ><span>'+(pageIndex+1)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){

            currentPage=event.data["newPage"];

            $table.trigger("paging");

        }).appendTo($pager);

        $pager.append(" ");

    }

    $pager.insertAfter($table);

    $table.trigger("paging");

});

</script>

表格必須有tbody

繼續閱讀