ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery: Ajax は関数 code_jquery を更新せずにページめくりを実現します

Jquery: Ajax は関数 code_jquery を更新せずにページめくりを実現します

WBOY
リリース: 2016-05-16 17:26:55
オリジナル
1336 人が閲覧しました

これ以上の手間は省き、コードを貼り付けるだけです:
以下は js 部分です:

コードをコピーします コードは次のとおりです。

var pageSize = "10";//ページごとの行数
var currentPage = "1";//現在のページ
var totalPage = "0";/ /総ページ数
var rowCount = "0";//総アイテム数
var params="";//パラメータ
var url="activity_list.action";//アクション
$(document).ready(function( ){//ドキュメントが読み込まれると jquery コードが読み込まれます
//ページング クエリ
function queryForPages(){
$.ajax({
url:url,
type:'post ',
dataType:'json',
data:"qo.currentPage=" currentPage "&qo.pageSize=" pageSize params,
success:function callbackFun (data){
//json を解析
var info = eval("(" data ")")
//データをクリア
clearDate();
}
});
}
//データを埋める
function fillTable(info){
if(info.length>1){
totalPage = info[info] .length-1].totalPage;
var tbody_content=""; //文字列 "" を初期化しないでください。デフォルトでは "unknown" になります。
for(var i=0 ; itbody_content =" "" (i 1 (currentPage-1)*pageSize) " "" info[i].title.substr(0,20) ""
"" info[i].address.substr( 0,6) ""
"" info[i].quota_sign "人"
"" info[i].type ""
"編集"
""
$("#t_body").html(tbody_content);
}
}else{
$("#t_head").html(" ");
$("#t_body") .html("
" info.msg "
");
}
}

//データをクリア
function clearDate(){
$("#t_body").html("") ;
}

// 検索アクティビティ
$("#searchActivity").click(function(){ queryForPages(); });
//ホームページ
$( "#firstPage").click(function(){
currentPage="1";
queryForPages();
}); ).click(function(){
if (currentPage>1){
currentPage-- ;
}
queryForPages();
}); 🎜>$("#next").click (function(){
if(currentPagecurrentPage ;
}
queryForPages();
}); >//最後のページ
$(" #last").click(function(){
currentPage = totalPage;
queryForPages();
}); ;


以下は HTML コード部分です:




コードをコピーします

コードは次のとおりです。

id="前">前のページ

番号 タイトル 登録済み カテゴリ
/th>
オペレーション


!-- ajax リストを作成-->