用ajax實現(xiàn)對數(shù)據(jù)庫的查詢以及對查詢數(shù)據(jù)進(jìn)行分頁，供大家參考，具體內(nèi)容如下
主頁面代碼
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>無標(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>代號/td>
td>名稱/td>
td>父級代號/td>
/tr>
tbody id="nr">
/tbody>
/table>
div id="xinxi">
/div>
/body>
js代碼
script type="text/javascript">
var page = 1; //當(dāng)前頁 定義一個變量 當(dāng)前頁
Load(); //加載數(shù)據(jù)
LoadXinXi(); //加載分頁信息
//查詢
$("#chaxun").click(function(){
page = 1;
Load(); //加載數(shù)據(jù)
LoadXinXi(); //加載分頁信息
})
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();
//查總頁數(shù)
$.ajax({
async:false,
url:"zys.php",
data:{key:key},
type:"POST",
dataType:"TEXT",
success: function(d){
maxys = d;
}
});
str += "span>總共："+maxys+"頁/span> nbsp;";
str += "span id='prev'>上一頁/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'>下一頁/span>";
$("#xinxi").html(str);
//給上一頁添加點擊事件
$("#prev").click(function(){
page = page-1;
if(page1)
{
page=1;
}
Load(); //加載數(shù)據(jù)
LoadXinXi(); //加載分頁信息
})
//給下一頁加點擊事件
$("#next").click(function(){
page = page+1;
if(page>maxys)
{
page=maxys;
}
Load(); //加載數(shù)據(jù)
LoadXinXi(); //加載分頁信息
})
//給中間的列表加事件
$(".list").click(function(){
page = parseInt($(this).attr("bs"));
Load(); //加載數(shù)據(jù)
LoadXinXi(); //加載分頁信息
})
}
/script>
處理頁面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);
處理頁面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);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- ajax分頁查詢詳解
- Ajax寫分頁查詢（實現(xiàn)不刷新頁面）
- ajax的分頁查詢示例（不刷新頁面）
- Ajax案例集下載：新增分頁查詢案例（包括《Ajax開發(fā)精要》中的兩個綜合案例） 下載
- Spring Data JPA+kkpager實現(xiàn)分頁功能實例
- kkpager 實現(xiàn)ajax分頁查詢功能
