javascript : 客户端分页脚本

一般我们认为分页有服务器分页和客户端分页两种。如果数据行本身不多，那么其实我更倾向于将数据一次性读取过来，然后通过下面的脚本在页面里面实现分页效果。

其实主要思路就是将部分行隐藏起来。

<script src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

    var current = 1;

    function SetNavigationButton(current, total) {
        //如果是第一页，则前两个按钮是要隐藏的

        $("#first,#next,#prev,#last").css("display", "inline");
        if (current == 1) {
            $("#prev,#first").css("display", "none");
            return;
        }
        //如果是最后一页，则后两个按钮是要隐藏的
        if (current == total) {
            $("#next,#last").css("display", "none");
            return;
        }

    }

    function SetRowStatus(current,pagesize,pagecount) {
        //先将所有的隐藏掉，
        $("tr").css("display", "none").css("background-color","white");

        //显示第一页

        for (var i =((current-1)*pagesize+1); i < (current*pagesize + 1); i++) {
            $("tr[Id=" + i + "]").css("display", "block");
        }

        SetNavigationButton(current, pagecount);

    }

    $(function() {
        //为所有的行加一个编号

        var rowId = 1;
        $("tr").each(function() {
            $(this).attr("Id", rowId++);
        });

        var rowcount = parseInt(rowId - 1);
        var pagesize = parseInt($("table#result").attr("pagesize"));
        var pagecount = Math.ceil(rowcount / pagesize); //向上取整

        if (pagecount > 1) {

            //显示第一页
            current = 1;
            SetRowStatus(current, pagesize, pagecount);

            $("div#pager").css("display", "block");

            $("#currentPage").text("1");
            $("#totalPage").text(pagecount.toString());

            $("#first").click(function() {
                current = 1;
                SetRowStatus(current, pagesize, pagecount);
            });

            $("#prev").click(function() {
                current = current - 1;
                SetRowStatus(current, pagesize, pagecount);

            });

            $("#next").click(function() {
                current = current + 1;
                SetRowStatus(current, pagesize, pagecount);

            });

            $("#last").click(function() {
                current = pagecount;
                SetRowStatus(current, pagesize, pagecount);

            });

        }

    });
</script>