遷移なしのPager

PEARのpagerライブラリを使用していたが、色々と微妙だったので、簡単に自分でコーディング。

phpからのreturnを表示するエリアをjavascritで記述し、そのreturnの中にさらにそのエリアで表示を行うhtmlを表示。

そうすることで、最初に表示されたエリア内のフォーム等をクリックすることで、さらにページ遷移の無い表示エリアで表示の切り替えが可能。

表示エリアの記述はこんな感じ。

<div id="search_result_area_ff">検索結果表示エリア</div>

遷移無しにそのエリアにphpのreturnを表示するJavascriptはこんなの。

function formPostClick()
{
    new Ajax.Request
    (
        './test.php',
        {
            method     : 'post',
            parameters : Form.serialize('ajaxForm'),
            onComplete :    function( httpObj )
            {
                $('search_result_area_ff').innerHTML = httpObj.responseText;
            }
        }
    );
}

function formPostClickNext()
{
    new Ajax.Request
    (
        './test.php',
        {
            method     : 'post',
            parameters : Form.serialize('ajaxNextForm'),
            onComplete :    function( httpObj )
            {
                $('search_result_area_ff').innerHTML = httpObj.responseText;
            }
        }
    );
}

function formPostClickPrev()
{
    new Ajax.Request
    (
        './test.php',
        {
            method     : 'post',
            parameters : Form.serialize('ajaxPrevForm'),
            onComplete :    function( httpObj )
            {
                $('search_result_area_ff').innerHTML = httpObj.responseText;
            }
        }
    );
}

で、最後にReturn表示エリアに表示エリア内でさらなるReturnを表示しなおすPHPでの
Pager実装は以下。

### PAGER Setting ###

$pagelimit = 50;

$name = $_POST['name'];
$currentPageID = $_POST['page'];
$sort = $_POST['sort'];

$next_page = $currentPageID + 1;
$prev_page = $currentPageID - 1;

if ($prev_page > 0)
{
    printf('
        <table><tr><td>
        <form method="post" id="ajaxPrevForm">
        <input type="hidden" name="name" id="name" value="'.$name.'">
        <input type="hidden" name="page" id="page" value="'.$prev_page.'">
        <input type="hidden" name="sort" id="sort" value="'.$sort.'">
        <input id = "search_button_fff"
        type = "button"
        value = "prev"
        onclick = "formPostClickPrev();">
        </form>
        </td><td>
    ');
}

printf('
    <form method="post" id="ajaxNextForm">
    <input type="hidden" name="name" id="name" value="'.$name.'">
    <input type="hidden" name="page" id="page" value="'.$next_page.'">
    <input type="hidden" name="sort" id="sort" value="'.$sort.'">
    <input id = "search_button_fff"
    type = "button"
    value = "next"
    onclick = "formPostClickNext();">
');

if ($prev_page > 0)
{
    printf('</form></td></tr></table>');
}

$index = ($currentPageID - 1) * $pagelimit + 1;
$min_hit_num = $index;

if ($rowNum < $index + $pagelimit)
{
    $max_hit_num = $rowNum;
}
else
{
    $max_hit_num = $index + $pagelimit - 1;
}

printf("<div id=resultNum>検索結果（%d?%d件目）：%dヒット</div>",
    $min_hit_num, $max_hit_num, $rowNum);

これで、簡単ではあるが、ページ遷移なしのPagerが使用できる。