1

I'm currently working on a site for a friend, converting a google sheet to a webpage (to reduce the time it takes to modify the spreadsheets and apply them to all users).

One particular page is currently in a Google Sheet form, since the main purpose is to serve as a way of 'tracking' users. There's a lot of data that the user can modify (500+ rows).

Each spreadsheet is the same for each user, but some users may be further along in the process of completion.

Once this page is functional, I want the client to be able to go in and add more rows to the page with as much ease as possible. They are fairly technical, but I still want to make it as easy as possible since adding more rows will occur pretty frequently.

My question is: Would it make more sense to make a large and manually add the elements (hardcode them), or have the rows populated via JavaScript?

Example of hardcoded rows:

<tr class="row-minor">
    <td class="col-lg-2 points-col-minor">100</td>
    <td class="col-lg-6 task-col-minor">Complete task 1</td>
    <td class="col-lg-2 hours-minor">5</td>
    <td class="col-lg-2 completed-no">No</td>
</tr>

I could copy and use this format 500+ times, and have the client just use this whenever they wanted to add new rows. Copy and pasting would be simple enough.

Example of JavaScript populated:

JsonObj = {
    "row": {
        "points": 100,
        "task": "Complete task 1",
        "hours": 5,
        "completed": "no",
    },
}
.
.
.
// code to generate table rows from JsonObj

Would generating 500+ rows each time the user visits this page be very visible or cause a lot of page latency? The user would, on average, visit this page a few times per day (long sessions).

Edit: I could also possibly do this via php. Not sure if this would make anything easier, though.

I'm leaning towards generating them so that there isn't tedious errors of copying code over and over, and adding things to a JSON object is much easier for the client and much more readable, but I'm curious what you all think is "better practice".

Thanks!

  • big tables can be problematic even in modern browsers. I suggest you have a + button that adds a row – Ewan Apr 21 '17 at 7:31
1

For tabular data in a webpage, I'd suggest trying Datatables (https://datatables.net/).

I have used it several times to present JSON data returned from an API (so, I'm rendering client-side). Datatables performs really well and wouldn't have any issues with several hundred rows. I only started seeing rendering issues when I tried a kind of load test with about 10,000 rows in a single list. If you switched to a paged view, it can easily handle 10,000 rows of data on 500 row chunks.

The initialisation of the table exposes several areas to quickly configure how the table is present and works.

0

Generate the initial page on the server. That way the creating of the rows, won't be visible and the page will load all rows, already created. Then the client won't need to compile and run your Javascript code, to finally view the table.

After the page is loaded add the new rows with Javascript, on the client side, and let the users save their progress. On save, send all the information to the server, check for differences and save them to your database.

You could add an autosave functionality, if the sessions are going to be very long. This could be accomplished with repeating a Javascript function at certain intervals and sending an AJAX request to the server, or a corresponding API.

If the pages are going to be very long and you have the time, one thing that could be better, instead of sending all the information to the server, to be verified and to find differences about it. Track only the changes with Javascript and send them to the server to be applied.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.