ブートストラップ ページングの実装方法

ブートストラップ ページングの実装方法: 最初に div を使用してクリアされるコンテンツをラップし、次に a タグを使用して前のページと次のページの機能を実装し、最後に初期ローディングと前のページを実装します。 ajax を介したページ そして、次のページの効果は十分です。

このチュートリアルの動作環境: Windows 7 システム、ブートラップ バージョン 3.3.7、Dell G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。

推奨: 「bootstrap ビデオ チュートリアル 」 「css ビデオ チュートリアル 」

##bootstrap はページングを実装します アルゴリズムの改善: [前ページと次ページを実現するために主に mysql 制限付きの js を使用]

#[データをクエリするときに制限を使用します。現在は、1 ページに 3 レコードを表示します。ページング]

まず、ajax はサーブレットへのリクエストを開始し、次に json データをリクエストします。ここで、ajax と html の設計を開始します。

1. ページをめくるたびに、前のデータは上書き/消去されます。したがって、div を使用して、クリアされるコンテンツをラップします。

なぜ div を保持する必要があるのでしょうか? 参照オブジェクトと同様に、div にデータを追加して保持する必要があるからです。

<div id="co">
        <h1 class="h"></h1>  <!-- 这里的标签都加上class="h"，后面都要动态清空-->
</div>

データが保存される基本的な設計フレームワークがあるので、次は、前のページ、次のページなど、データに対して操作を行う必要があります。

2. a タグを使用して、前ページと次ページの機能を実現します。

ここでは、nextpage メソッドを使用して次のページを実装し、前のページは prevpage を使用します。まずこのようなアイデアがあります

<a href="javascript:prevpage(0)">上一页</a><a href="javascript:nextpage(0)">下一页</a>

今回の場合、データローディングを実装するのはajaxです

3. Ajaxは初期ローディング、前ページ、次ページを実装します。

keyはレコード数、つまりレコードの開始データを表します まずこれを考えます 他のページの動作が変わると、前のページのパラメータと次のページのパラメータが変化しますキーを使って そして変わります。

はおおよそ次のとおりです:

//1、默认加载第一页
clickA(0);
//2、加载数据的函数
function clickA(key){
$(".h").empty();
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "Page", //请求发送到Page处
data : {'key':key},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
for(var k in result){
//将获得的数据加入col-md-12 column
$("#con").before("<h2 class=&#39;h&#39;>"+result[k].title+"</2><p class=&#39;h&#39;>"+result[k].name+"</p><p class=&#39;h&#39;><a class=&#39;btn&#39; href=&#39;javascript:clickA(0);&#39;>View details »</a>"+"</p>");
//改变a标签prev的属性，下面这两句是重点
$("#prev").attr("href","javascript:prevpage("+key+")");
$("#next").attr("href","javascript:nextpage("+key+")");
} 
},
error : function(XMLHttpRequest, textStatus,errorMsg) {
//请求失败时执行该函数
alert("错误码:"+XMLHttpRequest.status);
alert("错误状态:"+XMLHttpRequest.readyState);
alert("数据请求数据失败!"+errorMsg);
}
});
}
//3、实现上一页功能:
function prevpage(prev){
if(prev==0){clickA(0);}else{
prev = prev-3;
clickA(prev);
}
//4、实现下一页功能
var numa=0;
function nextpage(numa){
//获取当前的key 
//将key+3，然后交给clickA
//获取后台带到的key，在key的基础上增加
numa=numa+3;
clickA(numa);
}
}

主にアイデアの実装を記録します。コードは最適化する必要がありますが、アイデアはすでに非常に明確です。では、各ページに n 個のデータを表示するにはどうすればよいでしょうか?おそらくそれほど時間はかかりません。

それでは、ここで提起された問題をどのように実装し、独自のものにパッケージ化するかを自分で考えてください。この手順については書きません。

では、例外を防ぐためにバックグラウンド サーブレットを制御するにはどうすればよいでしょうか? それが値の問題で、null や ""、

以上がブートストラップ ページングの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。