var pagination_default_config = {
	img_none_first: "firs_button.gif",
	img_none_prev : "prev_button.gif",
	img_none_next : "next_button.gif",
	img_none_last : "last_button.gif",
	
	img_first: "firs_button2.gif",
	img_prev : "prev_button2.gif",
	img_next : "next_button2.gif",
	img_last : "last_button2.gif",
	
	el: '',
	page: 1,
	count: 0,	
	
	border: 0,		
	leftWidth: '80%',	
	leftTextAlign: 'center',
	rightTextAlign: 'right',
	
	submit: function(num){ alert('To implemented: go to page ' + num + ' !'); },		
	norecord: ''
};

function Pagination(config) {
	config = config || new Object();
	for(var prop in pagination_default_config)
		if(config[prop]==null) config[prop]=pagination_default_config[prop];
	
	config.count = parseInt(config.count);
	config.page = parseInt(config.page);	
	if(!config.count || config.count<1) config.count = 0;
	if(!config.page || config.page<1) config.page = 1;
	if(config.page>config.count) config.page = config.count;
		
	var table = document.createElement('TABLE');
	table.style.width = "100%";	
	table.border = config.border;
	var tbody = document.createElement('TBODY');
	table.appendChild(tbody);
	
	var tr = document.createElement('TR');
	var td1 = document.createElement('TD');
	var td2 = document.createElement('TD');
	td1.style.textAlign = config.leftTextAlign;
	td2.style.textAlign = config.rightTextAlign;
	td1.width = config.leftWidth;
	
	if(config.count==0) {
	tr.appendChild(td1);
	td1.appendChild(document.createTextNode(config.norecord));	
	tbody.appendChild(tr);
	document.getElementById(config.el).appendChild(table);
	return;
	}
	
	tr.appendChild(td1);	
	tr.appendChild(td2);
	tbody.appendChild(tr);
	
	var a1 = document.createElement('A');
	var a2 = document.createElement('A');
	var a3 = document.createElement('A');
	var a4 = document.createElement('A');
	
	var img1 = new Image();
	var img2 = new Image();
	var img3 = new Image();
	var img4 = new Image();
	
	if(config.page>1){
		img1.src = config.img_first;
		img2.src = config.img_prev;
		a1.appendChild(img1);
		a2.appendChild(img2);
		a1.onclick = function(){config.submit(1)};		
		a2.onclick = function(){config.submit(config.page-1)};
		a1.style.cursor = 'pointer';
		a2.style.cursor = 'pointer';
	}else{
		img1.src = config.img_none_first;
		img2.src = config.img_none_prev;
		a1 = img1;
		a2 = img2;
	}
	
	if(config.page<config.count){
		img3.src = config.img_next;
		img4.src = config.img_last;
		a3.appendChild(img3);
		a4.appendChild(img4);
		a3.onclick = function(){config.submit(config.page+1)};		
		a4.onclick = function(){config.submit(config.count)};
		a3.style.cursor = 'pointer'
		a4.style.cursor = 'pointer'
	}else{
		img3.src = config.img_none_next;
		img4.src = config.img_none_last;
		a3 = img3;
		a4 = img4;
	}
	
	td1.appendChild(a1);
	td1.appendChild(document.createTextNode(' '));
	td1.appendChild(a2);
	td1.appendChild(document.createTextNode(' '));
	td1.appendChild(a3);
	td1.appendChild(document.createTextNode(' '));
	td1.appendChild(a4);
	
	var select = document.createElement('SELECT');
	var option = null;
	for(var i=0;i<config.count;i++){
		option = document.createElement('OPTION');
		option.value = i+1;
		option.text = i+1;
		//if(config.page==i+1) option.selected = true;
		//use: select.value = config.page;
		//select.appendChild(option);
		select.options.add(option);		
	}
	select.value = config.page;
	select.onchange = function(){config.submit(select.value)};
	td2.appendChild(document.createTextNode('第'));
	td2.appendChild(select);
	td2.appendChild(document.createTextNode('页，共' + config.count + '页'));	
	
	
	document.getElementById(config.el).appendChild(table);
}

<%@ page language="java" contentType="text/html; charset=GBK" %>
<%@ page import="java.util.List"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="com.yourcompany.CourseDao"%>
<%@ page import="com.yourcompany.TraCourse"%>
<%@ page import="com.yourcompany.util.Page"%>


<%      
        Page coursePage=new Page();
        page.setIndex(request.getParameter("page"));
        page.set(查询条件);
        coursePage= CourseDao.getPageCourses(coursePage);
        int index=coursePage.getIndex();//当前页号
        int count=coursePage.getTotal();//总的记录条数	
%>
<form name="thisForm" action="course_manager.jsp" method="post">
  <table>
     <tr >
	 <td width="7%"><strong>编号</strong></td>
	 <td width="40%"><strong>课程列表</strong></td>
	 <td width="23%"><strong>发布时间</strong></td>
	 <td width="23%"><strong>课程状态</strong></td>
     </tr>
<%
        int i=0;
	while(it.hasNext()){
	    TraCourse tc=(TraCourse)it.next();
            i++;
%>
     <tr>
	<td ><%=count+i%></td>
	<td><%=tc.getCourseTitle(), 22)%></td>
	<td><%=tc.getPostDate()%></td>
	<td><%=status%></td>
     </tr>
<%
	}
%>
     <tr>
        //将js分页脚本生成的内容写入到页面中
	<td colspan="4" align="right">
          <div>     
        </td>
     </tr>
</table>
<input type="hidden" name="page"  value="<%=index%>"/>
<input type="hidden" name="count" value="<%=count()%>"/> 
<input type="hidden" name="url" value="course_manager.jsp"/> 

</form>
//将分页用的js引入进来
<script language="javascript" src="pagination.js"></script>
<script langage="javascript" type="text/javascript">
   var config = {	
		el: 'pagination',
		submit: function(num){
            document.thisForm.page.value = num;
			document.thisForm.submit();			
		},
		page: 2,
		count: 20,
		
		//leftWidth: '95%',
		
		norecord: '没有符合条件的记录!'
	}
	
	function pageaction(){
		config.page = parseInt(document.getElementById('page').value);
		config.count = parseInt(document.getElementById('count').value);
		Pagination(config);		
    }
	
    pageaction();
</script>