質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • PHP

    20834questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • jQuery

    6926questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • mysqli

    161questions

    MySQLiはPHP5より導入されているデータベース用のドライバです。MySQL 4.1.3以降の新しい機能の利点をまとめています。

php, Mysqlで作ったシステムをjquery.pagination.jsでのページャーを作ったけどうまく行かない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 807

hyskyo

score 68

したいこと:次のページに来た時に重複しないように正常に表示したいです,

php, Mysqlで作ったデータを一覧に表示して、それをjquery.pagination.jsでページネーションを作成できたのですが次のページに行くと前ページのソースコードがあって次のページの画像が並べるべき場所より下にずれて表示されてしまいます。
何が原因でしょうか?

下記に参考に画像も添付しています、どうぞご教授お願いします。
1,画像名< page_1 >は正常に表示されていますが画像< page_2 >に行くと画像上に赤で書いているところがずれて表示されているとことです。
2,画像< code >はChromeの検証でpage_2を見た時のソースコードです

code.png
イメージ説明

page_1.png
イメージ説明

page_2.png 赤できてあるところが下にずれているところです。
イメージ説明

下記はソースコードです。
list.php

<html><head>
<link rel="stylesheet" href="pagination/css/style.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="pagination/js/jquery.pagination.js"></script>
</head>
<body>
        <div id="paging_cat">
        <?php
            $query = "SELECT * FROM test ORDER BY test_id DESC  ";
            $sql = mysqli_query($con, $query);
            while($row = mysqli_fetch_assoc($sql)){
                $test_id = $row['test_id'];
                $test_title = $row['test_title'];
                $test_image = $row['test_image'];

        ?>
            <div>
                <a><div><img src="../images/<?php echo $test_image; ?>"></div>
                <div><h1><?php echo $test_title; ?></h1></div></a>
            </div><?php } ?>
            </div>
            <div class="pagination text-center"><div class="pager"></div></div>


/*ページネーションのJS*/
<script>
$(function($) {
    $('#paging_cat a').pagination({
        pager        : $('.pager'),
        prevText     : '前へ',
        nextText     : '次へ',
        firstText    : '≪',
        lastText     : '≫',
        viewNum      : 6,
        pagerNum     : 3,
        ellipsis     : true,
        linkInvalid  : true,
        goTop        : true,
        firstLastNav : true,
        prevNextNav  : false
    });
});
</script>            
</body>                
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

いくつか変わった箇所が有るので、修正してみてください。


  1. <body"> は <body> です。
  2. <?php> という書き方はしないと思います。 <?php で良いのでは。
  3. <div id="paging_cat"> が while の中に入っているので、外を囲うように設置されてはいかがでしょう。
  4. </h1> しか無い。
<div><?php echo $fashion_title; ?></h1></div></a>

<div><h1><?php echo $fashion_title; ?></h1></div></a>

では?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/13 01:00

    ご指摘ありがとうございます。
    いくつか誤りがありましたので、修正しました。

    キャンセル

  • 2016/05/13 02:00

    3.についてはどうでしょう。また、表示に変化はありますか?

    キャンセル

  • 2016/05/13 09:50

    3.については問題なく動いでいます。

    キャンセル

  • 2016/05/13 10:40

    3は「id="paging_cat"」が複数あるという状況になるはずなので、それが予期せず挙動を生む原因になりかねないという指摘です。idはページ内に1つだけ指定するものです。

    キャンセル

  • 2016/05/13 10:45

    理解不足ですみませんがidはページ内に1つだけ指定していますが複数指定するとことですか? 宜しくお願いします

    キャンセル

  • 2016/05/13 10:56

    「while」は繰り返し出力する部分なので、その中でidを指定したら複数同じidが出現しませんか?スクリーンショットではそうなっていますが。

    キャンセル

  • 2016/05/13 11:05

    確かにそうですが、whileの外に指定しても複数同じidが出ます。

    キャンセル

  • 2016/05/13 12:20

    > whileの外に指定しても
    質問文に追記していただけませんか?

    キャンセル

  • 2016/05/14 09:49

    質問文に追記しました。
    お願いします

    キャンセル

  • 2016/05/14 11:02

    追記されたコードで同じIDが出るなら、書かれていない部分に何か記載が有るのかもしれませんね。

    繰り返し部分の a タグを div で囲むなら、「$('#paging_cat > div ')」にしたほうが問題なさそうに思います。

    キャンセル

  • 2016/05/16 00:57

    ありがとうございます!!

    jquery.pagination.jsに自力でコード書いて解決しました。

    キャンセル

check解決した方法

-1

jquery.pagination.jsに次のページにきたときの非表示するプログラミングを書いて解決した!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

関連した質問

同じタグがついた質問を見る

  • PHP

    20834questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • jQuery

    6926questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • mysqli

    161questions

    MySQLiはPHP5より導入されているデータベース用のドライバです。MySQL 4.1.3以降の新しい機能の利点をまとめています。

  • トップ
  • PHPに関する質問
  • php, Mysqlで作ったシステムをjquery.pagination.jsでのページャーを作ったけどうまく行かない