网页分页

网页分页

1.后台读取数据

response.setContentType("text/json;charset=utf-8");
		response.setCharacterEncoding("utf-8");
		String typeid = request.getParameter("type");
		String pageindex = request.getParameter("pageindex");
		int index = Integer.parseInt(pageindex);
		index = (index - 1) * 3;
		int pagesize = 3;
		if("-1".equals(typeid)) {
			String sql = "select t1.id,t1.author_id,t1.title,t1.input_time,t1.read_num,t2.content_type as type "
				    + "from t_news t1 left join t_contenttype t2 on t1.content_type = t2.id order by t1.id desc limit "
					+ index + "," + pagesize;
			String json = MysqlUtil.getJsonBySql(sql, new String[] {"id","author_id","title","type","read_num","input_time"});
			StringBuffer stringBuffer = new StringBuffer(json);
			//stringBuffer.insert(json.lastIndexOf("]"), ',');
			String cc = "select count(*) as count from t_news";
			String count = MysqlUtil.getJsonBySql(cc, new String[]{"count"});
			count = count.substring(count.lastIndexOf("["), count.length() - 2);
			StringBuffer temp = new StringBuffer(count);
			temp.insert(0, ","); 
			count = temp.toString();
			stringBuffer.insert(json.lastIndexOf("]"), count);
			json = stringBuffer.toString();
			response.getWriter().append(json);
		}else {
			String sql = "select t1.id,t1.author_id,t1.title,t1.input_time,t1.read_num,t2.content_type as type "
				    + "from t_news t1 left join t_contenttype t2 on t1.content_type = t2.id "
    		  +"where t1.content_type="+ typeid +" order by t1.id desc limit " + index + "," + pagesize;
			String json = MysqlUtil.getJsonBySql(sql, new String[] {"id","author_id","title","type","read_num","input_time"});
			StringBuffer stringBuffer = new StringBuffer(json);
			String cc = "select count(*) as count from t_news where content_type="+ typeid +"";
			String count = MysqlUtil.getJsonBySql(cc, new String[]{"count"});
			count = count.substring(count.lastIndexOf("["), count.length() - 2);
			StringBuffer temp = new StringBuffer(count);
			temp.insert(0, ",");
			count = temp.toString();
			stringBuffer.insert(json.lastIndexOf("]"), count);
			json = stringBuffer.toString();
			response.getWriter().append(json);
		}
	}

由于需要将计数和文章信息同时发送到前端，所以设计到json类型的字符串的拼接，其中使用到了stringbuilder
2.前端显示页数

function pageshow(pageindex,datanum){
		var html = "";
		html += '<div style="width:13%;height:30px;text-align:center;line-height:30px;float:left" onclick="listnews(1)">首页</div>';
		html += '<div style="width:14%;height:30px;text-align:center;line-height:30px;float:left" onclick="listnews('+ (pageindex - 1 > 0?pageindex - 1:1) +')">上一页</div>';
		html += '<div style="width:14%;height:30px;text-align:center;line-height:30px;float:left" onclick="listnews('+ (pageindex + 1) +')">下一页</div>';
		html += '<div style="width:20%;height:30px;text-align:center;line-height:30px;float:left" onclick="listnews('+ (pageindex + 1) +')">当前页：'+ pageindex +'</div>';
		//html += '<div style="width:6%;height:30px;text-align:center;line-height:30px;float:left" >跳转到</div>';
		//html += '<div style="width:6%;height:28px;text-align:center;line-height:28px;float:left;margin-left:4px">';
		//html += '<input type="text" style="width:90%" id="page_index"/>'
		//html += '<div style="width:6%;height:30px;text-align:center;line-height:30px;float:left">页</div>';
		//var index = parseInt( $("#page_index").val() );
		//html += '<input style="width:6%;height:27px;text-align:center;line-height:27px;float:left" type="button" οnclick="listnews('+ parseInt( $("#page_index").val() ) +')" value="跳转" />';
		html += '<div style="width:20%;height:30px;text-align:center;line-height:30px;float:left">共20页，</div>';
		html += '<div style="width:16%;height:30px;text-align:center;line-height:30px;float:left">共'+ datanum +'条</div>';
		$("#page").html(html);
	}

网页展示

function listnews(pageindex){
		var url = "http://localhost:8080/NewServlet/getNewList";
		 $.ajax({
		        type: "get",
		        url: url,
	//	      data: "para="+para,  此处data可以为 a=1&b=2类型的字符串 或 json数据。
				headers:{},
		        data: {
		        	"type":$("#act_type").val(),
		        	"pageindex":pageindex
		        },
		        cache: false,
		        async : false,
		      //  dataType: "JSON",
		        success: function (data,textStatus, jqXHR)
		        {
		        	var html = "";
		        	html += '<table>' + '<tr>';
		        	//"id","author","title","content_type","read_num","input_time"
		        	html += '<td>作者</td>';
		        	html += '<td>标题</td>';
		        	html += '<td>文章类型</td>';
		        	html += '<td>阅读量</td>';
		        	html += '<td>上传时间</td>';
		        	html += '</tr>';
		        	for(var i = 0;i < data.data.length - 1;i++){
		        		html += '<tr>';
		        		html += '<td>"'+ data.data[i][1] +'"</td>';
		        		html += '<td><a href="text.html?acticleid='+ data.data[i][0] +'">'+ data.data[i][2] +'</a></td>';
		        		html += '<td>"'+ data.data[i][3] +'"</td>';
		        		html += '<td>"'+ data.data[i][4] +'"</td>';
		        		html += '<td>"'+ data.data[i][5] +'"</td>';
		        		html += '</tr>';
		        	}
		        	html += '</table>';
		        	$("#listnews").html(html);
		        	pageshow(pageindex,parseInt(data.data[data.data.length - 1][0]));
		        },
		        error:function (XMLHttpRequest, textStatus, errorThrown) {      
			           
		            alert(typeof(errorThrown));
		        }
		     });
		} 

运行结果