ejajax就是觸發ajax的函數,所以上面無論是change、click、以及keyup都是用選擇符指定哪個物件透過什麼動作觸發ejajax的函式。
change用在下拉選單,而keyup或keydown就是在搜尋欄位每輸入一個字就觸發。
sSearch則是全欄位搜尋,其餘sSearch_1 5則是自訂多少欄位可以單獨搜尋。
而資料倒出則透過 .each(aaData, function() 這函式進行組合。
最後決定輸出什麼資料就是在該區將json的資料篩出後組合出html。
當然也可以使用get傳遞,要改成get傳遞就是在組合送出的位址,那每次行為改變網址即可。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.4");
google.load("jqueryui", "1.5.2");
</script>
<script type="text/javascript" charset="utf-8">
(document).ready(function() {
("#per").change(function(){
ejajax();
})
("input.os").keyup(function(){
ejajax();
})
("a#first").click(
function () {
ejajax("first");
}
)
("a#last").click(
function () {
ejajax("last");
}
)
("a#next").click(
function () {
ejajax("+");
}
)
("a#prev").click(
function () {
ejajax("-");
}
)
("#sub").click(function(){
("tr").remove(".db_list");
("tr").remove(".s_list");
ejajax();
})
("#2page").click(function(){
("tr").remove(".db_list");
("tr").remove(".s_list");
ejajax("to");
})
function ejajax(type){
("tr").remove(".db_list");
("tr").remove(".s_list");
var sSearch = ("#sSearch").val();
var sSearch_1 = ("#sSearch_1").val();
var sSearch_2 = ("#sSearch_2").val();
var sSearch_3 = ("#sSearch_3").val();
var sSearch_4 = ("#sSearch_4").val();
var sSearch_5 = ("#sSearch_5").val();
switch(type){
default:
var dis_st = (parseInt(("#dis_st").val())<=0)?0:parseInt(("#dis_st").val());
var data = {
"sSearch": sSearch,
"sSearch_1" : sSearch_1,
"sSearch_2" : sSearch_2,
"sSearch_3" : sSearch_3,
"sSearch_4" : sSearch_4,
"sSearch_5" : sSearch_5,
"dis_st" : ("#dis_st").val(),
"dis_len" : ("#per").val()
}
break;
case "+":
//大為總數為總數
var dis_st = (parseInt(("#dis_st").val()) + parseInt(("#per").val())>("#total").text())?parseInt(("#dis_st").val()):parseInt(("#dis_st").val()) + parseInt(("#per").val());
var data = {
"sSearch": sSearch,
"sSearch_1" : sSearch_1,
"sSearch_2" : sSearch_2,
"sSearch_3" : sSearch_3,
"sSearch_4" : sSearch_4,
"sSearch_5" : sSearch_5,
"dis_st" : dis_st,
"dis_len" : ("#per").val()
}
break;
case "-":
//小於0仍為0
var dis_st = ((parseInt(("#dis_st").val()) - parseInt(("#per").val()))<0)?0:parseInt(("#dis_st").val()) - parseInt(("#per").val());
var data = {
"sSearch": sSearch,
"sSearch_1" : sSearch_1,
"sSearch_2" : sSearch_2,
"sSearch_3" : sSearch_3,
"sSearch_4" : sSearch_4,
"sSearch_5" : sSearch_5,
"dis_st" : dis_st,
"dis_len" : ("#per").val()
}
break;
case "first":
//小於0仍為0
var dis_st = 0;
var data = {
"sSearch": sSearch,
"sSearch_1" : sSearch_1,
"sSearch_2" : sSearch_2,
"sSearch_3" : sSearch_3,
"sSearch_4" : sSearch_4,
"sSearch_5" : sSearch_5,
"dis_st" : dis_st,
"dis_len" : ("#per").val()
}
break;
case "last":
//小於0仍為0
var a1 = parseInt(("#total_page").text());
var a2 = ("#per").val();
var dis_st = (a1*a2)-a2;
var data = {
"sSearch": sSearch,
"sSearch_1" : sSearch_1,
"sSearch_2" : sSearch_2,
"sSearch_3" : sSearch_3,
"sSearch_4" : sSearch_4,
"sSearch_5" : sSearch_5,
"dis_st" : dis_st,
"dis_len" : ("#per").val()
}
break;
case "to":
var a1 = ("#per").val();
var a2 = (("#goto").val()>parseInt(("#total_page").text()))?parseInt(("#total_page").text()):("#goto").val();
var dis_st = a1*a2-a1;
("#dis_st").val(dis_st);
var data = {
"sSearch": sSearch,
"sSearch_1" : sSearch_1,
"sSearch_2" : sSearch_2,
"sSearch_3" : sSearch_3,
"sSearch_4" : sSearch_4,
"sSearch_5" : sSearch_5,
"dis_st" : dis_st,
"dis_len" : ("#per").val()
}
break;
};
("#loading").fadeIn("slow");
.ajax({
url: "ejquery.php",
data:data,
type: "POST",
dataType: "json",
success: function(Ddata) {
var i = 0;
var total = Ddata["iTotalRecords"];
var total = Ddata["iTotalDisplayRecords"];
var aaData = Ddata["aaData"];
.each(aaData, function() {
("#test").append("<tr class=\"s_list\">" +
"<td>" + (i+1) + "-" + aaData[i][0] + "</td>" +
"<td> <a target=\"_blank\" href=\"" + aaData[i][4] + "\">" + aaData[i][1] + "</a></td>" +
"<td>" + aaData[i][2] + "</td>" +
"<td>" + aaData[i][3] + "</td>" +
"<td>" + aaData[i][5] + "</td>" +
"</tr>");
i++;
});
("#dis_st").val(dis_st);
("#total").text(total);
var p = Math.ceil(total / ("#per").val());
var per = parseInt(("#per").val());
var st = parseInt(("#dis_st").val());
var page = Math.ceil(st / per)+1;
("#total").text(total);
("#page").text(page);
("#total_page").text(p);
},
Error: function() {
alert("ERROR!!!");
}
});
("#loading").ajaxStart(function(){
(this).fadeIn("slow");}
).ajaxStop(function(){
(this).fadeOut("slow");
});
}//end function
})
</script>
<body>
<p> </p>
<div id="loading" style="display:none" >載入中....</div>
<table cellspacing="0" cellpadding="0" id="test">
<tr bgcolor="#FFE9C8" height="24">
<td><select name="select" id="per">
<option value="10">顯示10筆</option>
<option value="30">顯示30筆</option>
<option value="50">顯示50筆</option>
<option value="100">顯示100筆</option>
</select></td>
<td><input name="sSearch_1" type="text" id="sSearch_1" class="os"/></td>
<td><input name="sSearch_2" type="text" id="sSearch_2" class="os"/></td>
<td><input name="sSearch_3" type="text" id="sSearch_3" class="os"/></td>
<td><input name="sSearch_5" type="text" id="sSearch_5" class="os"/></td>
</tr>
<tr bgcolor="#FFE9C8" height="24">
<td width="10%">欄位一</td>
<td width="40%">欄位二</td>
<td width="20%">欄位三</td>
<td width="20%">欄位四</td>
<td width="10%">欄位五</td>
</tr>
<tr bgcolor="#FFFFFF" height="24">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<input id="sSearch" name="sSearch" size="30" type="text" value="" />
<input id="sub" type="submit" name="Submit" value="送出" />
<tr bgcolor="#FFFFFF" height="24">
<td colspan="5">查無資料!</td>
</tr>
</table>
<input name="tt_str" size="10" type="hidden" value="" />
<input name="dis_st" id="dis_st" size="10" type="hidden" value="0" />
<a id="first" href="#">最前頁</a>
<a id="prev" href="#">上一頁</a>
<a id="next" href="#">下一頁</a>
<a id="last" href="#">最後一頁</a>,目前在第<a id="page" href="#"></a>頁/共<a id="total_page" href="#"></a>頁,總筆數:<a id="total"></a>
前往<input id="goto" name="goto" size="2" type="text" value="" /> 頁 <input id="2page" type="submit" name="2page" value="前往" />
<input name="post" size="10" type="hidden" value="" />
