用ajax實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的查詢以及對(duì)查詢數(shù)據(jù)進(jìn)行分頁(yè)，供大家參考，具體內(nèi)容如下
主頁(yè)面代碼
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>無(wú)標(biāo)題文檔/title>
script src="jquery-1.11.2.min.js">/script>
style type="text/css">
.dangqian{ background-color:#69F}
/style>
/head>
body>
div>
input type="text" id="key" />
input type="button" value="查詢" id="chaxun" />
/div>
table width="100%" border="1" cellpadding="0" cellspacing="0">
tr>
td>代號(hào)/td>
td>名稱/td>
td>父級(jí)代號(hào)/td>
/tr>
tbody id="nr">
/tbody>
/table>
div id="xinxi">
/div>
/body>
js代碼
script type="text/javascript">
var page = 1; //當(dāng)前頁(yè) 定義一個(gè)變量 當(dāng)前頁(yè)
Load(); //加載數(shù)據(jù)
LoadXinXi(); //加載分頁(yè)信息
//查詢
$("#chaxun").click(function(){
page = 1;
Load(); //加載數(shù)據(jù)
LoadXinXi(); //加載分頁(yè)信息
})
function Load()
{
var key = $("#key").val(); //查詢條件
$.ajax({
url:"chuli.php",
data:{page:page,key:key},
type:"POST",
dataType:"JSON",
success: function(data){
var str = "";
for(var k in data)
{
str +="tr>td>"+data[k].AreaCode+"/td>td>"+data[k].AreaName+"/td>td>"+data[k].ParentAreaCode+"/td>/tr>";
}
$("#nr").html(str);//把數(shù)據(jù)返回表格
}
});
}
functionLoadXinXi()
{
var str = "";
var minys = 1;
var maxys = 1;
var key = $("#key").val();
//查總頁(yè)數(shù)
$.ajax({
async:false,
url:"zys.php",
data:{key:key},
type:"POST",
dataType:"TEXT",
success: function(d){
maxys = d;
}
});
str += "span>總共："+maxys+"頁(yè)/span> nbsp;";
str += "span id='prev'>上一頁(yè)/span>";
for(var i=page-2;ipage+3;i++)
{
if(i>=minys i=maxys)
{
if(i==page)
{
str += "span class='dangqian' bs='"+i+"'>"+i+"/span> nbsp;";
}
else
{
str += "span class='list' bs='"+i+"'>"+i+"/span> nbsp;";
}
}
}
str += "span id='next'>下一頁(yè)/span>";
$("#xinxi").html(str);
//給上一頁(yè)添加點(diǎn)擊事件
$("#prev").click(function(){
page = page-1;
if(page1)
{
page=1;
}
Load(); //加載數(shù)據(jù)
LoadXinXi(); //加載分頁(yè)信息
})
//給下一頁(yè)加點(diǎn)擊事件
$("#next").click(function(){
page = page+1;
if(page>maxys)
{
page=maxys;
}
Load(); //加載數(shù)據(jù)
LoadXinXi(); //加載分頁(yè)信息
})
//給中間的列表加事件
$(".list").click(function(){
page = parseInt($(this).attr("bs"));
Load(); //加載數(shù)據(jù)
LoadXinXi(); //加載分頁(yè)信息
})
}
/script>
處理頁(yè)面1
?php
include("DBDA.class.php");
$db = new DBDA();
$key = $_POST["key"];
$num = 20;
$sql = "select count(*) from chinastates where areaname like '%{$key}%'";
$zts = $db->StrQuery($sql);
echo ceil($zts/$num);
處理頁(yè)面2
?php
include("DBDA.class.php");
$db = new DBDA();
$page = $_POST["page"];
$key = $_POST["key"];
$num = 20;
$tiao = ($page-1)*$num;
$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiao},{$num}";
echo $db->JSONQuery($sql);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- ajax分頁(yè)查詢?cè)斀?/li>
- Ajax寫分頁(yè)查詢（實(shí)現(xiàn)不刷新頁(yè)面）
- ajax的分頁(yè)查詢示例（不刷新頁(yè)面）
- Ajax案例集下載：新增分頁(yè)查詢案例（包括《Ajax開發(fā)精要》中的兩個(gè)綜合案例） 下載
- Spring Data JPA+kkpager實(shí)現(xiàn)分頁(yè)功能實(shí)例
- kkpager 實(shí)現(xiàn)ajax分頁(yè)查詢功能
