I have a very large HTML table containing 1500 rows (markup produced by PHP). Each row has a 5-element checkbox and one textarea.
Here's an example row:
<tr id="abc123">
<td>abc123</td>
<td valign="top"><input name="v1" value=1 type="checkbox"></td>
<td valign="top"><input name="v2" value=2 type="checkbox"></td>
<td valign="top"><input name="v3" value=3 type="checkbox"></td>
<td valign="top"><input name="v4" value=4 type="checkbox"></td>
<td valign="top"><input name="v5" value=5 type="checkbox"></td>
<td valign="top"><textarea name="notes"></textarea></td>
<td valign="top"><input type="submit" name="submit"></td>
</tr>
There are more columns but this is the important part.
What would be the best way of setting this up so that the submit button is checked/redrawn every 60 seconds? If the row/form has been submitted, the submit button would need to change to a link.
Would having that many writes occurring all at once lead to horrible performance? Our server can handle it, but I'm more concerned about client capabilities (who are using mid-grade or worse desktop machines).
Other than breaking up the records onto separate pages (client not interested in that), is there a better way of handling this many forms on a single page?
Update I'm thinking it might make more sense to let users click on the row they want to update, which would then convert only that row to a form. If a row loses focus, I'll display a confim box so they don't lose or submit incomplete data.
1) Put your entire table between a single form tag pair.
2) Identify each checkbox or other element with a name tag that looks something like this:
checkbox_abc123_1 (value=1)
checkbox_abc123_2 (value=2)
textbox_abc123 (value=foobar)
3) Add an onClick or onBlur event to each input object. This will be your ajax call. Send the id tag as 'name' and the input value as 'value'. You'll use these for POST processing.
4) On your POST page, identify your input element (hint: explode('_',$name);), validate contents, and write to your SQL table.
You can use your post page to provide an update to a div on each table row announcing to other users that the field is updated. This won't solve the issue of updating the input objects for other users, however.
If you need actual code reply back, but this should point you in the right direction.
There should be no problem for the client, unless you expect specific limitations, most modern browsers should cope with that easily. It may take some time, but no problem.
If you worry about performance, just be sure that your code is clean and properly nested, we can say, valid html strict code, that will help the client to render the page.
About the timing, you'll have to use javascript or similar, depending on what you prefer to check the time; it's not difficult to set a timer in javascript. Load the script at the end of the page so it doesn't interfere with the initial rendering of the table.
Also, if you can control the server, try to use mod_deflate, if you can't and you are using php, use zip in your output buffer, if you are using any other server side language, try to use any compression method available.
Update
That's a very good idea, it will reduce the weight of the page transfer and the rendering time a lot; your users will appreciate that, plus the traversal of the DOM also will be faster and easier
Bye
Try to use plugin is better for users jQuery Pagination or try DataTable