jquery分页效果

[html]
昨天在腾讯视频里看中国好声音，看到下面的视频列表，有个分页，顿时就去探测了下，看看是怎么实现的。我开始以为是ajax来分页的，谁知道是数据全部读取出来的，只是分条件显示数据而已，所以这个效果我就想要实现，由于昨晚时间不够，早点睡了，今天抽空还是把它实现了，下面我就分享下代码，顺便截个腾讯的效果加深大家的印象。
原文地址：<a target="_blank" href="http://www.dayday28.com/post/2012-09-11/40039431075" rel="nofollow">http://www.dayday28.com/post/2012-09-11/40039431075</a>
Demo演示地址：<a target="_blank" href="http://www.osctools.net/jsbin/jemosxvn/1/edit#preview" rel="nofollow">http://www.osctools.net/jsbin/jemosxvn/1/edit#preview</a>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery伪分页效果</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
            $("ul li:gt(3)").hide();//初始化，前面4条数据显示，其他的数据隐藏。
            var total_q=$("ul li").index()+1;//总数据
            var current_page=4;//每页显示的数据
            var current_num=1;//当前页数
            var total_page= Math.round(total_q/current_page);//总页数
            var next=$(".next");//下一页
            var prev=$(".prev");//上一页
            $(".total").text(total_page);//显示总页数
            $(".current_page").text(current_num);//当前的页数

            //下一页
            $(".next").click(function(){
                if(current_num==7){
                        return false;//如果大于总页数就禁用下一页
                    }
                    else{
                        $(".current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
                        $.each($('ul li'),function(index,item){
                            var start = current_page* (current_num-1);//起始范围
                            var end = current_page * current_num;//结束范围
                            if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐
                                $(this).show();
                            }else {
                                $(this).hide();
                            }
                        });
                    }
            });
            //上一页方法
            $(".prev").click(function(){
                    if(current_num==1){
                        return false;
                    }else{
                        $(".current_page").text(--current_num);
                        $.each($('ul li'),function(index,item){
                            var start = current_page* (current_num-1);//起始范围
                            var end = current_page * current_num;//结束范围
                            if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐藏
                                $(this).show();
                 &n

补充：web前端 , JavaScript ,