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

似乎，因为我在结果上执行Math（在for循环之后），我不能在我的db查询中使用限制，否则数学将是不准确的（仅在数据块上执行，而不是在整个数据上）。因此，我似乎必须在客户端上进行分页，但我不知道如何继续，因为我目前正在加载/显示数据。我简要地看了几个分页插件，但由于我不清楚如何根据我现有的代码实现它们，我更喜欢用插件（或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，我不确定您是否可以在您的网站上包含此库。

以下是使用dataset和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

来自json的表数据的分页

1 个答案: