限制表行和追加行答案

【问题标题】：Limiting rows of table and appending rows限制表行和追加行
【发布时间】：2017-07-30 20:59:02
【问题描述】：

在这段代码中，我从表中的数据库获取帖子，表在三列中显示帖子，现在我想添加一些 jQuery 来限制行数并添加一个按钮，单击该按钮会在表中附加几行我不是专业程序员可能会使用slice 之类的东西来限制行数。

$sql = "SELECT * FROM posts";
$query = $db->prepare($sql);
$query->execute();

<table>
<tr>
<?php do { //horizontal looper?>
<td>
<div>id</div>          
<div>title</div>
<div>body</div>          
<div>date</div>
</td>
<?php
$row = $query->fetch(PDO::FETCH_ASSOC);
if (!isset($nested_List)) {
$nested_List= 1;
}
if (isset($row) && is_array($row) && $nested_List++%3==0) {
echo "</tr><tr>";
}
} while ($row); //end horizontal looper 
?>
</table>

【问题讨论】：

您必须手动执行此操作，每次发送 ajax 以根据最后一个索引获取更多记录。
你的问题不清楚。您想限制行数...哪些行？您从数据库中获取的行数或您可以附加到表中的总行数？
@Gacci 从数据库中获取行
您通过使用 LIMIT param1、param 2 来完成此操作。param1 指示从哪里开始抓取行，param2 指示要收集多少行。即 LIMIT 7, 10 开始查看第 7 行并在满足条件时进行收集。它收集 10 行（如果可用），否则收集尽可能多的可用小于或等于 10

标签： php jquery ajax pdo html-table

【解决方案1】：

HTML

创建你的表（你也可以动态创建）

<table id='posts'>
    <tbody></tbody>
</table>

<button id='load-more-entries'>Load</button>

JavaScript

创建一个变量来跟踪你的结果。您抓取的最后一个结果的索引是什么。通过 id 获取元素。将侦听器附加到按钮，以便在单击时加载更多结果。查看 AJAX 文档。它非常简单和简短。

var index = 0;
var load, table;

load = document.getElementById('load_more_entries'),
table = document.getElementById('posts');



load.addEventListener('click', function(e){
    processAjaxRequest({
        type: 'get',
        url: "posts.php?index="+index,
        success: function(xmlhttp){
            var results = JSON.parse(xmlhttp.response);
            for(var i = 0; i < results.length; ++i){
                var row = table.insertRow();

                var cell = row.insertCell(cell_index);
                //increment index according to how many results you            
                grab so next time you grab the next results
                index++;
            }
        },
        error: function(xmlhttp){
            //Handle error
        }
    });
});

/*
     this function here it is a a wrapped AJAX 
     it will call php file below and run it. It will fetch the results
     form database and return them to you in form of a string. You need
     to parse it JSON.parse() to turn it into an array
*/
function processAjaxRequest(object){
    var xmlhttp = new XMLHttpRequest() ||
    new ActiveXObject('Microsoft.XMLHTTP');

    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4){
            if(xmlhttp.status === 200){
                object.success(xmlhttp);
            }else{
                object.error(xmlhttp);
            }
        }
    }

    xmlhttp.open(object.type, object.url, true);
    xmlhttp.setRequestHeader('Content-type',
    'application/x-www-form-urlencoded');
    xmlhttp.send(object.args);
};

PHP

这个文件被 processAjaxResquest 调用

    $posts = array();
    while($post = mysqli_fetch_assoc($sql)){
        $posts[] = $post;
    }

    echo  json_encode($posts);
?>

*注意我还没有测试代码，可能还有一些我可能还剩下的东西。但是，这应该足以让您入门。当我有这个问题时，我得到了同样的答案。另外，请注意，您还需要注意更多事项；就像在你做任何事情之前检查 PHP 文件中的变量一样。

【讨论】：