iCoding项目题库页面设计

iCoding项目题库页面

1.填充页面
设计思路：
点击到题库页面，马上执行jquery入口函数中得ajax将第一页传回后台；
后台的sevlet中得到页号封装到实体类Page中，经过service层在Dao层与数据库连接，在数据库中拿到当前页面的Code数据（通过预先设计好的每页问题数和当前页计算可得）；
（通过id选择器，给设置class是否“active”）
最后返回完整的Page在ajax的success函数中填充代码如下：

					var $tbody = $(".questionContent");
					$tbody.empty();
					var queList = dataJson.queList;
					for(i=0;i<queList.length;i++)
					{
						var $tr = $("<tr></tr>");
						$tr.html(
								"<td></td>"+
                        		 "<td><span style='color: grey;'>"+queList[i].qid+"</span></td>"+
                        		 "<td><a href='editor.html'>"+queList[i].questionTitle+"</a></td>"+
                        		 "<td><span style='color: grey;'>简单</span></td>"+
                        		 "<td><span class='label label-success round'>100%</span></td>"
                        		);
                        $tbody.append($tr);
						
					}
				for(var j=1;j<=dataJson.pageNum;j++)
				{
					$("#"+j+"").attr("class","#");
				}
				$("#"+num+"").attr("class","active");

                        <tbody class="questionContent">
 
                        </tbody>

2.设计翻页
设计思路：
在上述ajax的success中得到了当前页面的Page，内涵页面总数（在Dao层计算出封装到Page），用页面总数做初值降序循环，把所有页设置到首页< li >后面，别忘了给页码加上id代表第几页。
代码如下：

					var maxPage = dataJson.pageNum;
					var $li = $(".flag");
					for(var i=maxPage;i>0;i--)
					{
						var $myli = $("<li class='#' id='"+i+"'></li>");
						$myli.html(
									"<a href = '#'>"+i+"</a>"
									);
						$myli.click(function(){
							
							changePage( $(this).text() );
							
						});
						$li.after($myli);
						
					}

<li class = "flag"><a name="page_turning" id="page_sta" href="#">&laquo;</a></li>

然后，在success中设置首页，尾页的点击事件，执行changePage函数传入‘1’或最大页
changePage内容与上述Ajax中内容除了currentPage其他相同，即重新加载页面。