网页分页
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));
}
});
}
运行结果