Databases
StackOverflow2013
Postsdbo
POjquery Add a Table Row, Remove a Table row. Max 10 rows
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery Add a Table Row, Remove a Table row. Max 10 rows
    text
    copied!<p>I have a Gridview in a .aspx page that gets its rows from another page that is called. This other page returns a single table row (tr) as a result from an SQL query. This happens every second.</p> <p>The new rows are added to the top of the table/gridview.</p> <p>I need to limit the number of row to a number, say 10. My code so far (mostly found by examples here at Stackoverflow) works pretty well, except when the table gets to 10 rows, it will flicker the 9th and 10th rows. i.e. it will show 9 rows, then 10 rows, then 9 rows and so on as it loads.</p> <p>Ideally, it would add rows up to 10 then as new rows are added the 10th, or last, row drops off without any flickering. It would be more 'fluid' so-to-speak. As if you are scrolling.</p> <p>All examples I have found delete rows as a result of a button click. I need to table/gridview to grow up to 10, then as new rows are added, the last row drops off.</p> <p>I hope this makes sense.</p> <p>Any suggestions on how I could improve this? Thank you.</p> <pre><code>&lt;script type="text/javascript" &gt; var jq = jQuery.noConflict(); f1(); function f1() { // gridView updated every 1000ms jq(document).ready(function () { var lastid = jq.cookie("maxid"); // set by pageInit if (lastid != "0") jq.get("page2.aspx", function (dataReturned) { if (dataReturned != "") // rows in database - add to the gridView { // add new row jq('#&lt;%=GridView1.ClientID %&gt; tr:first').after(dataReturned); // hide the new row, then fade it back in ---- tr:eq(0) is the header row. jq('#&lt;%=GridView1.ClientID %&gt; tr:eq(1)').hide().fadeIn(1000, function () { // nop }).css('display', 'table-row'); } window.setTimeout("f1()", 1000); }); else jq.get("page2.aspx", function (dataReturned) { if (dataReturned != "") //new rows in database { jq('#&lt;%=GridView1.ClientID %&gt;').html(dataReturned); } window.setTimeout("f1()", 1000); }); }); LimitRows(); } function LimitRows(){ while (jq('#&lt;%=GridView1.ClientID %&gt; tr').length &gt; '10') { jq('#&lt;%=GridView1.ClientID%&gt; tr:last').remove(); } } &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload