jquery实现联想词搜索框和搜索结果分页的示例(2)
result.jsp
<%@page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<link href="css/suggest.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
<link href="css/pagination.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
<style type="text/css">
em{font-style:normal;color: red;font-weight: bold}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/suggest.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript">
$(function(){
<%
request.setCharacterEncoding("utf-8");
String isearch = "";
isearch = request.getParameter("isearch");
if(isearch!=null&&isearch!=""){
%>
doSearch();
<%
}
%>
// $('.isearchSug').bind('keypress',function(event){
// if(event.keyCode == "13"){
// doSearch();
// }
// });
});
/**
* 对象转json数组
*/
function arrayToJson(o) {
var r = [];
if (o==undefined||o==null) return "null";
if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
if (typeof o == "object") {
if (!o.sort) {
for (var i in o)
r.push("\""+ i +"\""+ ":" + arrayToJson(o[i]));
if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
r.push("toString:" + o.toString.toString());
}
r = "{" + r.join() + "}";
} else {
for (var i = 0; i < o.length; i++) {
r.push(arrayToJson(o[i]));
}
r = "[" + r.join() + "]";
}
return r;
}
return o.toString();
}
function page(page_id){
var total = pageselectCallback(page_id);
if(total==0){
$("#Pagination").html("");
}
else{
//调用分页函数，将分页插件绑定到id为Pagination的div上
$("#Pagination").pagination(total, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数
callback: pageselectCallback, //点击分页时，调用的回调函数
prev_text: '<上一页', //显示上一页按钮的文本
next_text: '下一页>', //显示下一页按钮的文本
items_per_page:10, //每页显示的项数
num_display_entries:6, //分页插件中间显示的按钮数目
current_page:page_id, //当前页索引
num_edge_entries:2 //分页插件左右两边显示的按钮数目
});
}
}
//点击分页时调用的函数，page_id为当前页的索引
function pageselectCallback(pageIndex)
{
var temp="";
var total=0;
var q = $("#isearch").val();
var t = $("#type").val();;
var p = pageIndex+1;
// var p = pageIndex;
$.ajax({
async:false,
dataType: "json",
type: "post",
url: "http://10.18.224.102/edusearch/search/search",
data: {
"q":q,
"t":t,
"n":10,
"p":p
},
//发送请求前，显示加载动画
beforeSend:function(){$("#divload").show();$("#datas #Pagination").hide()},
//请求完毕后，隐藏加载动画
complete:function(){$("#divload").hide();$("#datas #Pagination").show()},
success: function(data,textStatus,jqXHR) {
// alert(data);
if(data!=null&&data!=""){
var obj = eval(data);
if(obj.retCode==0){
var items = obj.items;
// for(var i=0;i<items.length;i++){
// if(items[i]!=null){
// alert(items[i].name);
// }
// }
var json=items;//json数据
total=obj.total;//记录总数
if(json==null||json==undefined){
$("#datas").html("");
}
else{
$.each(json,function(index,item){
// temp+="<div id='datas' classdivclass=\"d_out\" onmouseover=\"this.className='d_over'\" "+
// "onmouseout=\"this.className='d_out'\" style='padding: 10px 15px 12px 15px;'>"+
// "<strong> <a style='font-size: 20px;font-famliy: 宋体;color:#333;' href='"+item.user_id+"' target='_blank'>"+
// item.user_name+"</a></strong>"+
// "<div style='font-size: 12px; font-famliy: 宋体; '>"+"part_id:"+item.part_id+" </div>"+
// "<div style='font-size: 14px; font-famliy: 宋体; text-indent: 2em; margin-top: 5px;'>"+
// "user_id:"+item.user_id+" </div></div><hr />";
temp+=arrayToJson(item)+"<hr />";
});
$("#datas").html(temp); //将创建的新行附加在DIV中
}
}
}
},
error : function() {
alert("搜索失败！");
}
});
return total;
}
function pageClick(pageIndex, total, spanInterval){
var total = pageselectCallback(pageIndex);
if(total!=0){
var intPageIndex = parseInt(pageIndex);
//创建分页
//将总记录数结果 得到 总页码数
var pageS = total;
if (pageS % 10 == 0)
pageS = pageS / 10;
else
pageS = parseInt(total / 10) + 1;
var $pager = $("#Pagination");
//清楚分页div中的内容
$("#Pagination span").remove();
$("#Pagination a").remove();
//添加第一页
if (intPageIndex == 1)
$pager.append("<span class='disabled'>第一页</span>");
else {
var first = $("<a href='javascript:void(0)' first='" + 1 + "'>第一页</a>").click(function () {
pageClick($(this).attr('first'), total, spanInterval);
return false;
});
$pager.append(first);
}
//添加上一页
if (intPageIndex == 1)
$pager.append("<span class='disabled'>上一页</span>");
else {
var pre = $("<a href='javascript:void(0)' pre='" + (intPageIndex - 1) + "'>上一页</a>").click(function () {
pageClick($(this).attr('pre'), total, spanInterval);
return false;
});
$pager.append(pre);
}
//设置分页的格式 这里可以根据需求完成自己想要的结果
var interval = parseInt(spanInterval); //设置间隔
var start = Math.max(1, intPageIndex - interval); //设置起始页
var end = Math.min(intPageIndex + interval, pageS)//设置末页
if (intPageIndex < interval + 1) {
end = (2 * interval + 1) > pageS ? pageS : (2 * interval + 1);
}
if ((intPageIndex + interval) > pageS) {
start = (pageS - 2 * interval) < 1 ? 1 : (pageS - 2 * interval);
}
//生成页码
for (var j = start; j < end + 1; j++) {
if (j == intPageIndex) {
var spanSelectd = $("<span class='current'>" + j + "</span>");
$pager.append(spanSelectd);
} //if
else {
var a = $("<a href='javascript:void(0)'>" + j + "</a>").click(function () {
pageClick($(this).text(), total, spanInterval);
return false;
});
$pager.append(a);
} //else
} //for
//上一页
if (intPageIndex == total) {
$pager.append("<span class='disabled'>下一页</span>");
}
else {
var next = $("<a href='javascript:void(0)' next='" + (intPageIndex + 1) + "'>下一页</a>").click(function () {
pageClick($(this).attr("next"), total, spanInterval);
return false;
});
$pager.append(next);
}
//最后一页
if (intPageIndex == pageS) {
$pager.append("<span class='disabled'>最后一页</span>");
}
else {
var last = $("<a href='javascript:void(0)' last='" + pageS + "'>最后一页</a>").click(function () {
pageClick($(this).attr("last"), total, spanInterval);
return false;
});
$pager.append(last);
}
}
}
function doSearch(){
// var total = pageselectCallback(1);
// pageClick(1, total, 3);
page(0);
}
</script>
</head>
<body>
<div id="content">
<form autocomplete="off" action="result.jsp" method="post">
<p>
<label>search:</label>
<input type="text" id="isearch" name="isearch" class="isearchSug" value="<%=isearch%>"/>
<select id="type" name="type">
<option value="00" <c:if test="${param.type=='00'}">selected</c:if>>全部</option>
<option value="01" <c:if test="${param.type=='01'}">selected</c:if>>用户</option>
<option value="02" <c:if test="${param.type=='02'}">selected</c:if>>圈子</option>
<option value="03" <c:if test="${param.type=='03'}">selected</c:if>>消息动态</option>
<option value="04" <c:if test="${param.type=='04'}">selected</c:if>>门户</option>
<option value="05" <c:if test="${param.type=='05'}">selected</c:if>>--资源--</option>
<option value="0521" <c:if test="${param.type=='0521'}">selected</c:if>> -教案</option>
<option value="0522" <c:if test="${param.type=='0522'}">selected</c:if>> -学案</option>
<option value="0523" <c:if test="${param.type=='0523'}">selected</c:if>> -课件</option>
<option value="0525" <c:if test="${param.type=='0525'}">selected</c:if>> -同步试卷</option>
<option value="0526" <c:if test="${param.type=='0526'}">selected</c:if>> -录课通</option>
<option value="0527" <c:if test="${param.type=='0527'}">selected</c:if>> -微视频</option>
<option value="06" <c:if test="${param.type=='06'}">selected</c:if>>作业</option>
<option value="07" <c:if test="${param.type=='07'}">selected</c:if>>问答</option>
<option value="08" <c:if test="${param.type=='08'}">selected</c:if>>课程</option>
<option value="09" <c:if test="${param.type=='09'}">selected</c:if>>问答</option>
</select>
<input type="submit" value="用户搜索"/>
</p>
</form>
<div class="page">
<div style="margin: 10px 0;"></div>
<div id="datas">
</div>
<div id="divload" style="text-align: center">
</div>
<div id="Pagination" class="digg"></div>
</div>
</div>
</body>
</html>
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：http://www.heiqu.com/84.html