JavaScript分页问题

小弟是新手，下面有一个JavaScript分页  看的很是头晕 各位高手能不能帮我讲解一下hide()和show()方法是如何实现的
  谢谢大家<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>13-1  可以按不同列排序、支持分页的表格</title>
<script>
//声明全局变量：分页大小，当前分页号码, 分页导航链接数量，最后一次排序的列
var page_size, current_page, nav_len, last_sort_col;//函数“format_number”将数字格式化为需要的字符串
function format_number(i, len){
    var pre = new Array(len-String(i).length+1);
    pre = pre.join("0");
    return(pre + i);
}//函数“hide”隐藏相应的HTML元素
function hide(obj)
{
    alert("hide_obj:" + obj);
obj.style.display = "none"; 
}//分页导航跳转函数
function nav_first(){ showPage(0); }
function nav_previous(){ showPage(current_page-1); }
function nav_next(){ showPage(current_page+1); }
function nav_last(){ showPage(parseInt($("hutia").rows.length/page_size)+1); }//快速排序算法
function quick_sort(ary){
    var ary1, ary2, mid, re;
    if(ary.length<2){
        return(ary);
    }else if(ary.length==2){
        if(ary[0].key>ary[1].key)return(ary.reverse());
        return(ary);
    }else{
        ary1 = new Array();
        ary2 = new Array();
        mid = ary[0];
        for(var i=1; i<ary.length; i++){
            if(ary[i].key < mid.key){
                ary1.push(ary[i]);
            }else{
                ary2.push(ary[i]);
            }
        }
        return(quick_sort(ary1).concat(mid, quick_sort(ary2)));
    }
}//刷新分页导航栏
function refresh_nav(pageNo, page_count){
    var str_nav, iStart, iEnd;
    //刷新导航链接的可用性
    if(pageNo == 0){
        $("nav0").disabled = $("nav1").disabled = true;
        $("nav2").disabled = $("nav3").disabled = false;
    }else if(pageNo == page_count - 1){
        $("nav0").disabled = $("nav1").disabled = false;
        $("nav2").disabled = $("nav3").disabled = true;
    }else{
        $("nav0").disabled = $("nav1").disabled = false;
        $("nav2").disabled = $("nav3").disabled = false;
    }
    //处理导航栏分页链接
    str_nav = "";
    //计算导航分页的起始和结束位置
    iStart = pageNo-nav_len/2+1>0 ? pageNo-nav_len/2+1:0;
    if(iStart+nav_len-1>page_count && page_count>nav_len-1)iStart = page_count - nav_len + 1;
    iEnd = iStart+nav_len-1>page_count?page_count:iStart+nav_len-1;
    //生成分页链接
    for(var i=iStart; i<iEnd; i++){
        str_nav += "<a href=\"#\" onclick=\"showPage(" + i + ");\" ";
        str_nav += (i==pageNo?"disabled":"") + " >";
        str_nav += (i+1) + "</a>";
    }
    //输出分页链接
    $("nav_page").innerHTML = str_nav;
    //处理分页跳转下拉列表框
    //解除跳转事件绑定
    $("nav_jumper").onchange = null;
    //清空下拉列表框
    while($("nav_jumper").options.length>0)$("nav_jumper").removeChild($("nav_jumper").options[0]);
    //生成新的下列列表框
    for(var i=0; i<page_count; i++){
        $("nav_jumper").options[i] = new Option(i+1, i);
        if(i==pageNo)$("nav_jumper").options[i].selected = true;
    }
    //绑定跳转事件
    $("nav_jumper").onchange = function(){ showPage(parseInt(this.value)); }
}//设置分页大小
function setPageSize(iSize){
    //隐藏原来显示的条目
    for(var i=current_page*page_size; i<(current_page+1)*page_size && i<$("hutia").rows.length-1; i++){
        hide($("hutia").rows[i+1]);
    }
    page_size = iSize;
    showPage(current_page);
}//函数“show”显示相应的HTML元素
function show(obj){ obj.style.display = "block"; }//函数“showPage”切换表格分页
function showPage(pageNo){
        
//-----------------定义局部变量
//总记录数
var item_count;
//总页数
var page_count; //判断入口参数是否正确
    if(pageNo==undefined || isNaN(pageNo))return;
    //计算总页数
    item_count = $("hutia").rows.length; //模拟为124
    alert("总记录数:" + item_count); page_count = item_count / page_size;
    
//alert("总页数:" + page_count); //处理非整数页数
    if(page_count != Math.round(page_count))
{
page_count = parseInt(page_count) + 1;

//处理完是13页
alert("处理非整数页数:"+page_count);

}

    //判断页面号是否在范围内
    if(pageNo > page_count - 1)
{
alert("页号不再范围之内");
pageNo = page_count - 1;
}

    //如果当前页<0 就默认为第一页
if(pageNo < 0)
{
pageNo = 0;
}

    alert("开始:" + current_page*page_size );
alert("条件:" + (current_page + 1)*page_size);    
/*
 *隐藏原来显示的条目
 * 条件是 从 0 到 10   默认页面显示大小也是10
 *  i < item_count - 1 意思: 因为默认下标从0开始 所以item_count-1是最大下标
   * 1： 0  
 * 2:  1    
 */
    for(var i=current_page*page_size; i<(current_page+1)*page_size && i<item_count-1; i++)
{
alert("隐藏:"+ $("hutia").rows[i+1]);
        hide($("hutia").rows[i+1]);
    }    //将当前的分页号保存在全局变量中
    current_page = pageNo;
    //显示当前的条目
    for(var i=current_page*page_size; i<(current_page+1)*page_size && i<item_count-1; i++){
        show($("hutia").rows[i+1]);
    }
    //处理导航栏
    refresh_nav(current_page, page_count);
}//函数“table_sort”将表格按指定列排序
function table_sort(colIndex){
    //定义局部变量
    var arySorter, len, obj, tbody;
    //获得指定列的表头单元格
    obj = $("hutia").rows[0].cells[colIndex];
    //隐藏原来显示的条目
    for(var i=current_page*page_size; i<(current_page+1)*page_size && i<$("hutia").rows.length-1; i++){
        hide($("hutia").rows[i+1]);
    }
    //获取表格的“tbody”对象
    tbody = $("hutia").getElementsByTagName("tbody")[0];
    //获取需要排序的表格行数
    len = $("hutia").rows.length-1;
    //开始排序
    if(obj.sorted){
        //如果此列已排序，只需表格按行反转即可
        for(var i=0; i<len; i++){
            tbody.insertBefore(tbody.childNodes[0], tbody.childNodes[len-i]);
        }
    }else{
        //如果此列未排序
        //如果有已排序的列，将该列的排序标志设为“假”
        if(last_sort_col)last_sort_col.sorted=false;
        //将此列表头单元格存入全局变量
        last_sort_col = obj;
        //将此列排序标志设为“真”，存入此列表头单元格的自定义属性“sorted”中
        obj.sorted = true;
        //初始化数组作为排序的容器
        arySorter = new Array(len);
        //循环访问表格的各行，将其存入数组中
        for(var i=1; i<len+1; i++){
            arySorter[i-1] = $("hutia").rows[i];
            //将每行的排序列HTML内容存入数组元素的自定义属性“key”中
            arySorter[i-1].key = $("hutia").rows[i].cells[colIndex].innerHTML;
        }
        //调用排序函数对此数组排序
        arySorter = quick_sort(arySorter);
        //按顺序将表格各行重整
        for(var i=0; i<len; i++){
            tbody.insertBefore(arySorter[i], tbody.childNodes[i]);
        }
    }
    //恢复显示条目
    for(var i=current_page*page_size; i<(current_page+1)*page_size && i<$("hutia").rows.length-1; i++){
        show($("hutia").rows[i+1]);
    }
}function $(str){ return(document.getElementById(str)); }window.onload = function(){
     //页面大小
    page_size = 10;
    //当前页 第0页
current_page = 0;
    //生成连接的数量
nav_len = 10;
    
//显示默认分页
    showPage(0);
}
</script>
</head>
<body>
<table id="hutia">
    <thead><tr>
        <script>
            for(var j=0; j<5; j++){
                document.write("<th onclick=\"table_sort(" + j + ");\">表头第"+format_number(j+1, 3)+"列</th>");
            }
        </script>
    </tr></thead>
    <tbody>
        <script>
            for(var i=0; i<123; i++){
                document.write("<tr>");
                for(var j=0; j<5; j++){
                    document.write("<td>排序用随机号：" + format_number(parseInt(Math.random()*10000), 4) +"<br>第");
                    document.write(format_number(i+1, 3)+"行，第"+format_number(j+1, 3)+"列</td>");
                }
                document.write("</tr>");
            }
        </script>
    </tbody>
</table>
<div id="nav_bar">
    <a id="nav0" href="#" onclick="nav_first();">第一页</a>
    <a id="nav1" href="#" onclick="nav_previous();">上一页</a>
    <span id="nav_page"></span>
    <a id="nav2" href="#" onclick="nav_next();">下一页</a>
    <a id="nav3" href="#" onclick="nav_last();">最后页</a>
    |
    跳转到第<select id="nav_jumper"></select>页
    |
    每页显示数量
    <select onchange="setPageSize(parseInt(this.value));">
        <option value="5">5</option>
        <option value="10" selected >10</option>
        <option value="20">20</option>
        <option value="50">50</option>
    </select>
</div>
</body>
</html>