限制表行和追加行

Question

在这段代码中，我从表中的数据库中获取帖子，表格显示三列中的帖子，现在我想添加一些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>

Answer 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文件中的变量是在你做任何事情之前设置的。