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 >
お礼
ありがとうございました。 Firefox・・・確かにそのようです。 IEではやはりCSSの扱われ方が違うようですね。 CSSを調整してみます。