16542


今現在、SQLのnewsというテーブルに7,8つデータが入っています。  
サイト上の表示ではlimit5で5つまでを表示しているのですが、もっと読むというボタンをつけて、6以降のデータも表示したいと思っています。

いろいろ調べてみるとajaxを使うなどがあったのですが、このページにjqueryを加えるだけで出来ないものでしょうか？

[code]

      <dl class="clearfix">
        $sql = "SELECT * FROM news";
        $sql = "SELECT * FROM news LIMIT 5";
        $stmt = $pdo->prepare($sql);
        $stmt->execute();
        $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
        foreach($results as $row) {
                        echo'<dt class="news-date">'.$row["create_date"].'</dt>';
                        echo '<dd class="news-description"><a href="news.php?news_id=' . $row["news_id"] . '">' .mb_substr($row["news_title"],0,10)."...". '</a>';
                        echo "<hr>";
                        } 
                        $pdo = null;
                        ?> 
                        <p id="loading" style="display:none;">loading...</p>
                        <input type="button" id="more" value="もっと読む">
                    </dl>
    
    
    
    <script>
    $(function(){
        $("#more").click(function(){
            $("#loading").show();
        });
    });
    
[/code]


CC BY-SA 3.0
2015-09-09T07:18:40.153
16429
2015-09-12T05:46:23.347
8415
question
php jquery mysql
PHPでもっと見る機能の実装


的外れな回答かもしれませんが、

[code]

    $sql = "SELECT * FROM news LIMIT 5";
    
[/code]

を

[code]

    $sql = "SELECT * FROM news LIMIT ".5*$count;
    
[/code]

とし、  
もっと読むボタン押下時に$countをインクリメントすれば  
LIMIT 5, LIMIT 10, LIMIT 15・・・ と増やせるのかもしれません。


CC BY-SA 3.0
2015-09-09T14:09:46.010
16449
2015-09-09T14:09:46.010
12198
16429
answer


SQLでリミットをかけずに全て読み込み、javascriptでその値を読み込めばいいのではないでしょうか？  
jQueryのみで実装するのであればjavascriptでその値を持っておく必要があると思います。  
また、初期表示はPHPで出力すれば良いかと思いますが、  
下記のような感じで、もっと読む押下時にjQueryで動的に追加すれば良いかと思います。

[code]

    <dl class="clearfix">
        <div id="data">
    <?php
        $sql = "SELECT * FROM news";
        $stmt = $pdo->prepare($sql);
        $stmt->execute();
        $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
        $counter=0;
        $defLoad=5;
        foreach($results as $row) {
            if($counter < $defLoad){
                echo'<dt class="news-date">'.$row["create_date"].'</dt>';
                echo '<dd class="news-description"><a href="news.php?news_id=' . $row["news_id"] . '">' .mb_substr($row["news_title"],0,10)."...". '</a>';
                echo "<hr>";
            }else{break;}
            $counter++;
        }
        $pdo = null;
    ?> 
        </div>
        <p id="loading" style="display:none;">loading...</p>
        <input type="button" id="more" value="もっと読む">
    </dl>
    
    <script>
        var loadData = JSON.parse("<?php echo json_encode($results); ?>");
        var defLoad = <?php echo $defLoad; ?>;
        var loadPage = 0;
        $(function(){
            $("#more").click(function(){
                loadPage++;
                for(var n=(defLoad*loadPage);n<(defLoad*(loadPage+1));n++){
                    var rowData = loadData[n];
                    $("#data").append(
                        $("<dt>").addClass("news-date").append(rowData["create_date"])
                    ).append(
                        $("<dd>").addClass("news-description").append(
                            $("<a>").attr("href","news.php?news_id="+rowData["news_id"]).html(rowData["news_title"].substr(0,10)+"...")
                        )
                    ).append($("<hr />"));
                }
            });
        });
    </script>
    
[/code]


CC BY-SA 3.0
2015-09-10T01:25:58.917
16456
2015-09-10T01:25:58.917
7676
16429
answer


jqueryのload使った実装です。  
load自体はajaxで取ってきた内容を要素内に追加するのではなく、既存の中身は削除して置き換えを行います。  
ですので、最後に空のdl要素を追加して(38)、そこ(`.clearfix:last`、これは表示されてる内容に対して)にdl要素の子要素(`.clearfix>*`、これはloadで取ってきた内容に対して)を展開するようにしています(46)。  
なお`"&time="+$.now()`のくだりはキャッシュ対策です。キャッシュが問題なければなくても構いません。  
loadを使うにあたり、php側でページング機能は実装しておく必要があります(11-14)。javascript側との連系も必要です(29,39)。  
その他、エラー処理関係(24,33-34,45)や、最終の処理(35-36)あたりもざっくり付けてありますが、適宜チューンしてください。  
また、最初の所(1-8)はテストデータの準備です。気にしないでください。

未実装部分としては  
\- データ出力の際は適切なエスケープ処理を行ってください。  
\- 途中で増減した場合はズレます。更新頻度が低いなら許容しても良いかと思います。

[code]

    <?php
    $pdo = new PDO("sqlite::memory:");
    $pdo->exec("CREATE TABLE news (news_id INTEGER PRIMARY KEY AUTOINCREMENT, news_title TEXT, create_date TEXT DEFAULT CURRENT_TIMESTAMP)");
    $stmt = $pdo->prepare("INSERT INTO news (news_title) VALUES (?)");
    foreach (range('A', 'Z') as $i) {
        $stmt->execute(array("The $i article!"));
    }
    ?><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script></head><body>
    <dl class="clearfix">
    <?php
        $page = (int) $_GET["page"];
        $sql = "SELECT * FROM news LIMIT 5 OFFSET ?";
        $stmt = $pdo->prepare($sql);
        $stmt->execute(array($page * 5));
        $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
        foreach($results as $row) {
                    echo'<dt class="news-date">'.$row["create_date"].'</dt>';
                    echo '<dd class="news-description"><a href="news.php?news_id=' . $row["news_id"] . '">' .mb_substr($row["news_title"],0,10)."...". '</a>';
                    echo "<hr>";
                    } 
                    $pdo = null;
                    ?> 
                </dl>
                    <p id="loading" style="display:none;">loading...</p>
                    <p id="error" style="display:none;">!!! error !!!</p>
                    <input type="button" id="more" value="もっと読む">
    
    <script>
    page = <?php echo $page ?>;
    $(function(){
        function load_cb(response, status, xhr) {
            $("#loading").hide();
            if (status == "error") {
                $("#error").show();
            } else if ($(".clearfix:last dt").length < 5) {
                $("#more").prop("disabled", true);
            } else {
                $(".clearfix:last").after('<dl class="clearfix">');
                page = page + 1;
            }
        }
        load_cb(null, null, null);
        $("#more").click(function(){
            $("#loading").show();
            $("#error").hide();
            $(".clearfix:last").load("list.php?page="+page+"&time="+$.now()+" .clearfix>*", load_cb);
        });
    });
    </script></body>
    
[/code]


CC BY-SA 3.0
2015-09-12T05:46:23.347
16542
2015-09-12T05:46:23.347
12301
16429
answer