0

https://qiita.com/ShibuyaKosuke/items/0c5c6df1fac218fbca38
を参考にPageIndex付きのテーブル表示を達成しようとしています。

こちらの記事では、テーブルに表示する内容(レコード)を絞り込むための指定が画面から一切行えない仕様で紹介されているようですが、
当方はこれを可能(画面からの指定値をPOSTで受け取りSQL文に反映)にする仕様で挑戦中です。

現在は、Tableを表示するための指定を済ませて同画面に配置したINPUT type=submitのボタンを押下することで、テーブル内容の表示、及びその下部にPageIndexを羅列表示することまでできています。
指定値に相応しい、抽出されるべき総レコード数、及び1ページに表示可能なレコード数を踏まえたPageIndexが表示されています。

====質問====

生成されたPageIndex(aタグ)を押下すると、指定パラメータを一切無視した内容(レコード)=当該SELECT文のWHERE句がない状況の結果を得てしまいます。
当方が参考している記事では、PageIndexのaタグを押下すると、WHERE句の条件にあった引き続きのページを照会することができるのでしょうか??
(当方のDBMSは参考記事と異なりMSのSQLServerのため、記事どおりのコーディング動作を未確認です、すみません)

SELECT句の指定値が可変になる場合に、タグのリンク押下だけで、パラメータが引き継がれた表示をする方法などあるのでしょうか?

いつも変な質問ですみません、解決につながるヒントだけでも頂けましたら幸いです。
よろしくお願いします。

1 件の回答 1

1

画面からの指定値をPOSTで受け取りSQL文に反映

aタグだけではpostパラメータを送ることは出来ないので、aタグをformタグで囲み、
type="hidden"のinputでpost送信する値をセットしておきます。
aタグのhrefに設定したjavascriptでフォームのnameを指定してサブミットします。

以下例です。例ではフォーム内からサブミットしていますが、フォームの外からでもサブミットを発行できます。

<form method="post" name="f1" action=""><input type="hidden" name="page" value="10"> <a href="javascript:f1.submit()">10</a></form>
<form method="post" name="f2" action=""><input type="hidden" name="page" value="11"> <a href="javascript:f2.submit()">11</a></form>
<form method="post" name="f3" action=""><input type="hidden" name="page" value="12"> <a href="javascript:f3.submit()">12</a></form>

*GETパラメータ(href="hoge.php?page=10")でpageを送った方が良いような気がしますが。

具体的なサンプル追記、formmethodは動作結果が判りやすいようにgetを指定しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function gosubmit(no){
        document.getElementById("pageno").value = no;
        document.f1.submit();
        return false;
    }
</script>
<form method="get" name="f1" action="fom1.html">
    <input name="text1" type="text" value="t1">
    <input name="text2" type="text" value="t2">
    <input name="text3" type="text" value="t3">
    <input name="text4" type="text" value="t4">
    <input name="text5" type="text" value="t5">
    <input name="page" type="hidden" value="0" id="pageno">
</form>

<a href="javascript:gosubmit(0);">p0</a>
<a href="javascript:gosubmit(1);">p1</a>
<a href="javascript:gosubmit(2);">p2</a>
<a href="javascript:gosubmit(3);">p3</a>
<a href="javascript:gosubmit(4);">p4</a>

</body>
</html>
4
  • お礼が遅くなってしまい大変申し訳ありませんでした。 ようやく仰られている意味を理解でき、「なるほど」と思いました。 ただ今からコーディングに挑戦してみたいと思います。 ライブラリやフレームワークを使用しないでページインデックス付きのテーブルを表示しようとすると 皆様相応の苦労を強いられているのかな??と感じました。
    – saya24
    Commented 2017年12月25日 10:55
  • いつもご支援をありがとうございます、今年もよろしくお願いします。 ページ番号をどう送信して画面側で把握するか、もう少し教えて頂けませんか? ページインデックス(aタグ)の部分は、従来から一つのフォーム内に含まれていたのですが ご提示にあるように、各インデックスは 個別フォームに収める必要がある、 ということでしょうか?? 現況ですが、相変わらず一つのフォーム内でaタグの部分を格納しており ①aタグの各ページインデックスを押下すると、submitされるようになった。(hrefにjs設定) ②aタグの各ページインデックス横に、hiddenのinput項目を定義し、valueにページ番号を格納できている ③上記のinput項目のname属性は、現在のところ同一フォームを意識してpage[]にしている。 押下されたインデックスのページ番号を、PHPのSELECT(のWHERE句)に採用する必要があるので、 常に同じ項目名でPHP側に送信される必要があると思います。 現在当該のname属性をpage[]にしていて、"あれれ"と思い出しています。
    – saya24
    Commented 2018年1月1日 5:50
  • 具体的なサンプルを追記しました。
    – yyz
    Commented 2018年1月5日 5:26
  • いつもご支援をありがとうございます。何から何まですみません。ようやくできました。 最初からそういうことを述べられていたのですね?ページインデックス毎にhiddenのinput項目を 手配してしまう勘違いをしておりました。 ただaタグをsubmitするようなJSを手配するのではなく、常にpageというhiddenのinput項目へ値送信されるような JSを手配しなければならなかったのですね。 分かりが悪く申し訳ありません。今回もyyzさんに助けられました、重ねてお礼申し上げます。
    – saya24
    Commented 2018年1月5日 10:53

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。