Ajaxの結果のページングの方法

質問

テキストボックスに文字を入力中に情報を検索し、同一ページに非同期で検索結果を表示する
ページを作っています。

ページ自体はPHPで、javascript で XmlHttpRequestを使い、データ検索用のPHPに情報を送り
検索用のページで結果を整形するprint文を作り、xmlhttp.responseText　で結果を表示しています。

この検索結果をページングしようと思い、
jquery.pagination.js　を利用しようと思っております。
http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_pagenation　　(このサイトの下側の物です)

実装してみたところ、なかなか良いところまで行ったのですが、ページを表示した最初の時に、
一件目の結果が反映されません。
ページングで次を押せば二件目が表示され、前のページを押せば一件目の表示がされているので、
結果は取得できているようですが、それぞれの処理のタイミングで、ページロード時に一件目のデータが取得できていないと思っていますが、解決方法が分かりません。

ソースの一部しか載せられませんが、解決方法がお分かりでしたら教えてください。

<!-- 検索のスクリプト -->
<script type= "text/javascript">
function createXmlHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null ;
}
}
var xmlhttp = null;
var baseTime = new Date();
var c = 0;

function query(flg) {
var sword = document.getElementById('sword' ).value;
var keyword = encodeURI(sword);

var elapsed = parseInt((new Date()).getTime() - baseTime.getTime());
baseTime = new Date();

if (elapsed < 200) {
return;
}
if (!xmlhttp) xmlhttp = createXmlHttpRequest();
if (!xmlhttp || xmlhttp.readyState == 1 || xmlhttp.readyState == 2 || xmlhttp.readyState == 3) {
return;
}

if (keyword_save != keyword) {

xmlhttp.open( "GET", "search-ajax.php?sword=" + keyword, true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById( "hiddenresult").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send( null)
keyword_save = keyword;
}
}
window.onload = function() {
var sword = document.getElementById("sword" );
if (sword.addEventListener) {
sword.addEventListener( "keyup", query, false )
} else {
sword.attachEvent( "onkeyup", query);
}
setInterval( "query('1')", 300);
}
</script>

<!-- ページングのスクリプト -->

<script type="text/javascript">
$( function() {
function pageselectCallback(page_index, jq){
var new_content = $('#hiddenresult div.result:eq(' +page_index+')').clone();
$( '#res').empty().append(new_content);
return false ;
}
function initPagination() {
var num_entries = $('#hiddenresult div.result' ).length;
// Create pagination element
$( "#Pagination").pagination(num_entries, {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page:1
});
}
$( function(){
initPagination();
});
});
</script >

回答No.1

shockatz

質問内容が違いますね。

「Ajaxの結果のページングの方法」ではなく、ズバリ「jquery.pagination.jsの使い方」が知りたいのではないですか？
こういう質問はいつもそうなのですが、回答は出ないと思います。

Ajaxページングは、本来、一括取得すると件数の多すぎるデータを、「全件数」と「ページ化された実体データ」で表示すべきものです。
このモジュール、ページング前の全データ実体を内部に保持する仕様のようで、ちょっと使い物にならないと思います。
下手にバグを取るより、別のものに乗り換えたほうが早いのでは。

ページャは自分で作ったほうが応用が効いていいのですが、有名どころならバグも少ないし。

jQuery Simple Pagination
http://flaviusmatis.github.com/simplePagination.js/#page-1

とかどうですか？