ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery: Ajax は関数 code_jquery を更新せずにページめくりを実現します
Jquery: Ajax は関数 code_jquery を更新せずにページめくりを実現します
- WBOYオリジナル
- 2016-05-16 17:26:551327ブラウズ
これ以上の手間は省き、コードを貼り付けるだけです:
以下は 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 ; i
"
"
"
"
""
$("#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(currentPage
}
queryForPages();
}); >//最後のページ
$(" #last").click(function(){
currentPage = totalPage;
queryForPages();
}); ;
以下は HTML コード部分です:
コードをコピーします
コードは次のとおりです。