ホームページ > 記事 > ウェブフロントエンド > ブートストラップを使用してページングを実装する方法
ブートストラップを使用してページングを実装する方法: 1. div 要素を使用して、ページをめくるときにクリアされるコンテンツをラップします; 2. nextpage メソッドと prevpage メソッドで a タグを使用して、前のページと次のページ; 3. 、ajax を使用して初期読み込みを実現するだけです。
このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター
1. ページをめくるたびに前のデータが上書きまたは消去されることがわかっているため、消去されるコンテンツを div を使用してラップできます。では、なぜ div に保持する必要があるのでしょうか? データを追加する必要があるため、参照オブジェクトと同じ効果を持つように保持します。コードは次のとおりです:
<div id="co"> <h1 class="h"></h1> <!-- 这里的标签都加上class="h",后面都要动态清空--> </div>
2。 a タグは、上記の「1 ページ、次のページ」機能を実現します。
このステップでは、nextpage メソッドを使用して次のページを実装し、前のページは prevpage を使用します。コードは次のとおりです:
<a href="javascript:prevpage(0)">上一页</a> <a href="javascript:nextpage(0)">下一页</a>
3. Ajax は初期読み込みを実装します
ここに来ました ロードするとき、 キーでレコード数、つまりレコードの開始データを指定します まずそれを考えます 他のページの動作が変わると、前のページとそのページのパラメータが変わります次のページのパラメータはキーに応じて変更されるはずです。
コードは次のとおりです:
//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='h'>"+result[k].title+"</2><p class='h'>"+result[k].name+"</p><p class='h'><a class='btn' href='javascript:clickA(0);'>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); } }
関連する推奨事項: ブートストラップ チュートリアル
以上がブートストラップを使用してページングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。