私は、jquery タブと jPages という 2 つの一般的なテクノロジを使用しています。残念ながら、以下のターゲットは協力していないようです。これは、以下に示した 3 つのページの現在の設定で修正できますか?
$("div.holder").jPages({containerID : "card-row"});
ページ 1 (jquery タブを使用):
<script>
$(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
});
}
});
});
</script>
<div id="tabs">
<ul><li><a href="pages/page-2.php">Your Collection</a></li>
</ul>
</div>
ページ 2 (ajax を使用):
<script>
$(document).ready(function(){
$.get("/pages/page-3.php",{}, function(data, statusTxt){
$('#collection-table .search-results').html(data);
});
});
</script>
<div id="#collection-table">
<div class="search-results">
<!-- get page 3 contents-->
</div>
</div>
ページ 3:
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="../scripts/jpage.js"></script>
<script>
$(function(){
$("div.holder").jPages({
containerID : "card-row",
previous : "?",
next : "?",
perPage : 20,
delay : 20
});
});
</script>
<div class="holder">
<!-- pagination pages-->
</div>
<tbody id="card-row">
<!--rows-->
</tbody>