来自json的表格数据分页

Question

我想对由此获得的结果进行分页：

function processResponse(response){
    var myObj = JSON.parse(response);
    var weighInData = myObj["WEIGH-INS"];
    var weights = []; // re: weigh-in count and calculating highest/lowest

    var userDisplayEl1 = document.getElementById("user-display-weigh-in-data");
    var weighInCountEl = document.getElementById("weigh-in-count");
    var weightLowEl = document.getElementById("weight-low");
    var weightHighEl = document.getElementById("weight-high");
    var weightgoalEl = document.getElementById("weight-goal");

    var dataRows = document.getElementById("data-rows");

    userDisplayEl1.innerHTML = "";
    weighInCountEl.innerHTML = "";
    weightLowEl.innerHTML = "";
    weightHighEl.innerHTML = "";
    weightgoalEl.innerHTML = "";
    dataRows.innerHTML = "";

    for (var obj in weighInData) {
        if (weighInData[obj].user === selUser) {
            weights.push(weighInData[obj].weight);

            var row = "<tr>" +
                            "<td class=\"date\">" + weighInData[obj].date + " </td>" +
                            "<td class=\"value\">" + weighInData[obj].weight + "</td>" +
                        "</tr>";
            dataRows.innerHTML += row;
            // pagination here?
        } // if ... === selUser
    } // for var obj in weighInData

    var weighInCount = weights.length;
    var weightLowest = Math.min.apply(null, weights);
    var weightHighest = Math.max.apply(null, weights);

    userDisplayEl1.innerHTML = weighInData[obj].user + "'s weigh-ins:";
    weightLowEl.innerHTML += weightLowest;
    weightHighEl.innerHTML += weightHighest;
    weighInCountEl.innerHTML = weighInCount;
} // processResponse

看来，因为我正在对结果执行数学运算（在 for 循环之后），所以我不能在我的数据库查询中使用限制，否则数学运算将不准确（仅对数据块执行，而不是对全部数据）。所以看来我必须在客户端上分页，但考虑到我目前如何加载/显示数据，我不知道如何继续。我已经简要地查看了几个分页插件，但是由于我不清楚如何根据我现有的代码来实现它们，我更喜欢在没有插件（或 jQuery）的情况下实现这一点的学习曲线。

任何建议/推动正确的方向，假设我不会实质性地改变我现在所拥有的（我理解的有效的，将不胜感激。

顺便说一句，我的服务器端代码，fwiw：

$table = "`WEIGH_IN_DATA`";

if ($mysqli) {
    $user = $_GET['selUser'];
    $i = 0;
    $jsonData = '{"WEIGH-INS": [';
        $stmt = $mysqli->stmt_init();
        $query = "SELECT * FROM $table WHERE USER = '$user'";
        $result = $mysqli->query($query) or die("Error in the query (?)" . mysqli_error($mysqli));

        while($row = mysqli_fetch_array($result)) {
            $i++;
            $user = $row["USER"];
            $date = $row["DATE"];
            $weight = $row["WEIGHT"];

            $jsonData .= '{"user": "'.$user.'", "date": "'.$date.'", "weight": "'.$weight.'" },';
        }

        $jsonData = chop($jsonData, ","); // kill the trailing comma
        $jsonData .=']}';
        echo $jsonData;
}

谢谢，

svs

Answer 1

为了节省时间，使用插件可能是您的最佳选择。我相信互联网上有关于构建您自己的分页插件的教程，您可以使用谷歌搜索。

我随机选择了一个jQuery分页插件（datatables），通过js附加了一些数据（和你的代码类似），然后在结果表上调用插件。像这样的东西可能/可能不适合你。另外，这依赖于 jQuery，我不确定你是否可以在你的网站上包含这个库。

这是一个使用数据集和 jquery 的示例：http://codepen.io/anon/pen/IbBxf

数据表链接：http://www.datatables.net/

$(document).ready(function(){      

  // append some data to an existing table in the DOM
  for (var i =0 ; i < 10; i++) {
    var $nr = $('<tr><td>A-' + i + '</td><td>B-' + i  + '</td></tr>');
    $('#myTable').append($nr);
  }

  // after table is populated, initiate plug-in and point to table
  $('#myTable').DataTable(
       { "lengthMenu": [[5, 10, -1], [5, 10, "All"]] });
});

如果你不能使用 jQuery：

Vanilla JS：看起来这个库可以进行分页，但是您需要通读文档：
http://listjs.com/docs/plugins/pagination

这个链接对你的情况也很有希望（仅限原版 JS）：
http://www.tekgarner.com/simple-pagination-using-javascript/

HTML/CSS：如果您不需要很多功能，也许您也可以考虑在 HTML 表格结果中添加滚动条。
How to display scroll bar onto a html table