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="" />
