1、可以通过iframe做局部刷新，这个比较简单。
2、可以通过ajax技术做动态刷新，这个很成熟，整个web2.0的技术基础就是ajax。
3、可以通过websocket长连接进行数据更新，这个由于是长连接，对服务端压力有一定要求。
希望对你有帮助。
第一种方法，在你的代码基础上：1、假设左边tree的html结构：
<ul id="tree">
<li><a href="javascript:void(0)" link="format.html">课表查询</a></li>
<li><a href="javascript:void(0)" link="1.html">信息修改</a></li>
</ul>
//注意以上a元素的link属性代表中间将要显示的页面的名称,根据需要自行修改
2、引入jquery库，在head之间添加如下代码：
$(function(){
var $tree_a = $("#tree").find("a")//获取tree中的a元素集合
var $main = $("#main")//获取中间部分元素
$tree_a.on("click", function(){
$main.empty()//初始化
var $frame =$("<iframe></iframe>")//定义框架对象
var $this = $(this)//当前被点击的tree的a
$frame.attr({//设置中间部分框架的属性
"src": $this.attr("link"),//框架引入的页面地址
"name": "main_frame",//框架名称
"width": $main.width() || "100%",//框架宽度
"height": $main.height() || "100%",//框架高度
"frameborder": "0",//框架边框
"scrolling": "auto"//框架滚动条设置
})
$frame.appendTo($main)//将框架插入到中间部分
})
})
第二种方法，改变你的代码结构：
1、修改html结构，将中间部分更改为iframe
将
<div id="main" style="width:82%background:yellowheight:500pxfloat:left">中间</div>
</div>
这段代码修改为
<ifame name="main" src="" id="main" frameborder="0" width="82%" height="500px" scrolling="auto"></iframe>
2、修改左侧tree的a元素
<a target="main" href="...">课表查询</a>
......
有问题请留言
你好， 楼主，我也是前两天才写过类似的例子， 也是实现分页效果的我的操作：
1、首先建两个层、一个存放显示数据、另一个存放分页的那几个按钮
2、写一个js方法，比如说是DataLoad(). 然后利用ajax去操作数据库并通过json返回对象。然后在拼装html， 最后将拼装好的html代码动态追加到数据显示层中，
3、分页操作 。 全局定义一个page 和pagesize 变量， 你点击各种分页操作的时候改变page值。 然后将数据显示层中的内容全部删除， 再调用一次DataLoad()方法就行了 。
这样就能实现无刷新页面分页操作
