ajax實(shí)現(xiàn)分頁(yè)和分頁(yè)查詢
之前有寫過(guò)ajax的加載頁(yè)面,是非常簡(jiǎn)單的,而且不需要重新刷新頁(yè)面,寫起來(lái)也是非常的方便,今天寫的分頁(yè)是不用封裝page.class.php的,是單純的js和ajax寫出來(lái)的
首先為了頁(yè)面的整齊與美觀,我用到了bootstrap,需要引進(jìn)所需要的文件包
<link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="../jquery/jquery-1.11.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script>
下面是頁(yè)面顯示的內(nèi)容
<div><input type="text" id="name" /> <input type="button" value="查詢" id="chaxun" /></div> <br /> <table class="table table-striped"> <thead> <tr> <th width="30%">國(guó)家代號(hào)</th> <th width="30%">國(guó)家名稱</th> <th width="40%">父級(jí)代號(hào)</th> </tr> </thead> <tbody id="tb"> </tbody> </table> <br /> <div><ul class="pagination" id="fenye"> </ul></div>
下面是js部分了,用的ajax來(lái)寫
<script type="text/javascript"> var page = 1; //當(dāng)前頁(yè) //加載數(shù)據(jù) Load(); //加載分頁(yè)信息 LoadFenYe(); //給查詢加點(diǎn)擊事件 $("#chaxun").click(function(){ //將當(dāng)前頁(yè)重置 page = 1; //加載數(shù)據(jù) Load(); //加載分頁(yè)信息 LoadFenYe(); }) //加載分頁(yè)信息的方法 function LoadFenYe() { var s = ""; var name = $("#name").val(); var minys = 1; var maxys = 1; $.ajax({ async:false, data:{name:name}, type:"POST", url:"zys.php", dataType:"TEXT", success: function(data){ maxys = data; } }); //加載上一頁(yè) s += "<li class='syy'><a>«</a></li>"; //加載分頁(yè)列表 for(var i=page-4;i<page+5;i++) { if(i>=minys && i<=maxys) { if(i==page) { s += "<li class='active list'><a>"+i+"</a></li>"; } else { s += "<li class='list'><a>"+i+"</a></li>"; } } } //加載下一頁(yè) s += "<li class='xyy'><a>»</a></li>"; //顯示分頁(yè)列表 $("#fenye").html(s); //給列表加點(diǎn)擊事件 $(".list").click(function(){ //改變當(dāng)前頁(yè) page = $(this).text(); //加載數(shù)據(jù) Load(); //加載分頁(yè)信息 LoadFenYe(); }) //上一頁(yè)加點(diǎn)擊事件 $(".syy").click(function(){ //改變當(dāng)前頁(yè) if(page>1) { page = parseInt(page)-1; //加載數(shù)據(jù) Load(); //加載分頁(yè)信息 LoadFenYe(); } }) //下一頁(yè)加點(diǎn)擊事件 $(".xyy").click(function(){ //改變當(dāng)前頁(yè) if(page<maxys) { page = parseInt(page)+1; //加載數(shù)據(jù) Load(); //加載分頁(yè)信息 LoadFenYe(); } }) }
//加載數(shù)據(jù)的方法 function Load() { var name = $("#name").val(); $.ajax({ url:"jiazai.php", data:{page:page,name:name}, type:"POST", dataType:"TEXT", success: function(data){ var str = ""; var hang = data.split("|"); for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td></tr>"; } $("#tb").html(str); } }); }
jiazai.php頁(yè)面的代碼如下:
<?php include("DADB.class.php"); $db=new DADB(); $page=$_POST["page"]; $key=$_POST["name"]; $num=20; $tiao=($page-1)*$num; $sql="select * from chinastates WHERE areaname like '%{$key}%' limit {$tiao},{$num}"; echo $db->StrQuery($sql,1);
zys.php代碼如下:
<?php include("DADB.class.php"); $db=new DADB(); $key=$_POST["name"]; $sql="select count(*) from chinastates where areaname like '%{$key}%'"; //顯示總共有多少條內(nèi)容 $zts=$db->StrQuery($sql); echo ceil($zts/20);
這樣分頁(yè)和查詢功能就可以完全實(shí)現(xiàn)了
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表(可搜索、可分頁(yè))
- ajax分頁(yè)查詢?cè)斀?/a>
- Ajax寫分頁(yè)查詢(實(shí)現(xiàn)不刷新頁(yè)面)
- ajax實(shí)現(xiàn)數(shù)據(jù)分頁(yè)查詢
- AJAX +SpringMVC 實(shí)現(xiàn)bootstrap模態(tài)框的分頁(yè)查詢功能
- ajax的分頁(yè)查詢示例(不刷新頁(yè)面)
- JQuery+Ajax實(shí)現(xiàn)數(shù)據(jù)查詢、排序和分頁(yè)功能
- Ajax案例集下載:新增分頁(yè)查詢案例(包括《Ajax開(kāi)發(fā)精要》中的兩個(gè)綜合案例) 下載
- ajax實(shí)現(xiàn)分頁(yè)查詢功能
相關(guān)文章
探討.get .post .ajax ztree 還有后臺(tái)servlet傳遞數(shù)據(jù)的相關(guān)知識(shí)
這篇文章主要介紹了探討.get .post .ajax ztree 還有后臺(tái)servlet傳遞數(shù)據(jù)的相關(guān)知識(shí),需要的朋友可以參考下2015-12-12基于ajax實(shí)現(xiàn)點(diǎn)擊加載更多無(wú)刷新載入到本頁(yè)
本文給大家介紹通過(guò)ajax技術(shù)實(shí)現(xiàn)無(wú)刷新加載更多載入到本頁(yè),感興趣的朋友一起學(xué)習(xí)吧2015-10-10Ajax實(shí)現(xiàn)頁(yè)面自動(dòng)刷新實(shí)例解析
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。接下來(lái)通過(guò)本文給大家介紹Ajax實(shí)現(xiàn)頁(yè)面自動(dòng)刷新實(shí)例解析,感興趣的朋友一起看看吧2016-04-04Ajax 高級(jí)功能之a(chǎn)jax向服務(wù)器發(fā)送數(shù)據(jù)
這篇文章主要介紹了Ajax 高級(jí)功能之a(chǎn)jax向服務(wù)器發(fā)送數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-08-08layui Ajax請(qǐng)求給下拉框賦值的實(shí)例
今天小編就為大家分享一篇layui Ajax請(qǐng)求給下拉框賦值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08