Q:

Pagination of table data from json

I want to paginate results obtained thusly:
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

It seems that, because I'm executing Math on the results (after the for loop), I cannot use a limit in my db query, else the math would be inaccurate (executing only on the chunks of data, and not on the entirety of the data). So it seems I'll have to paginate on the client, but I have no idea how to proceed given how I'm currently loading/displaying the data. I have looked briefly at a couple of pagination plugins but since I wasn't clear on how to implement them given my extant code, I prefer the learning curve of achieving this w/out a plugin (or jQuery).
Any suggestions/pushes in the right direction, with the assumption that I con't substantively alter what I have now (which works, and which I understand, will be most appreciated.
Btw, my server-side code, 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;
}

Thank you,
svs

A:

To save time, using a plug-in might be your best bet.  I'm sure there are tutorials on building your own pagination plug-in on the internet which you can google.  
I picked a random jQuery pagination plug-in (datatables), appended some data via js (similar to your code), then called the plug-in on the result table.  Something like this may/may not work for you.  Also, this is dependent on jQuery, and I'm not sure if you can include this library or not on your website.
Here's an example using dataset and jquery:  http://codepen.io/anon/pen/IbBxf
Link to datatables:  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"]] });
});

If you can't use jQuery:
Vanilla JS:  It looks like this library can do pagination, however you'll need to read through the docs: 
http://listjs.com/docs/plugins/pagination
This link also looks promising for your case (vanilla JS only):
http://www.tekgarner.com/simple-pagination-using-javascript/
HTML/CSS: If you don't need a lot of features, maybe you could also look at just adding a scrollbar to your HTML table results.
How to display scroll bar onto a html table

