Pagination of table data from json

Question

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

Hey there, I think I helped you last time with the min/max weights. If you want to do this without a plug-in, it may take you quite a bit of time to code it out depending on your features ( click on page number, prev/next buttons, etc. ). It'll be easier with jQuery and you'd probably want to start here http://stackoverflow.com/questions/2974246/is-it-possible-to-paginate-a-table-using-jquery — Will, Sep 29 '14 at 19:37
@Will Ok Thanks Will. I've been toying with converting my loop results and arrays but not getting very far. I'll see if I can use a plug with my working code. Cheers! — user1613163, Sep 29 '14 at 19:51
Can you use jquery on your site, or is it vanilla JS only? I added a jquery answer below, however, if it's JS only, I'll have to find you a better answer — Will, Sep 29 '14 at 20:00
@Will My purpose with this app is to advance my vanilla js chops, so I'm trying to write w/out jQ as much as possible. If pagination in raw js proves to be much more difficult for me to execute (without changing too much of how I got to where I am), then I wouldn't rule out a plug. Then again, I expect I'll be challenged also in implementing a plugin if my extant code is not plugin-ready. I'll keep looking at the resources you suggested - and your answer below too, and thank you again. — user1613163, Sep 29 '14 at 21:03

score 0 · Accepted Answer · edited May 23 '17 at 12:21

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

Pagination of table data from json

1 Answers1