jquery: adding rows at the bottom of a table make table y-scroll jump into to start position

I’ve created a “log viewer” method that contains a table with a fixed header; initially this method loads 200 lines into the table, and will load more lines on demand. If you scroll down (until certain y-scroll % ) method will do a request to server asking for a further 100 lines from bottom, then will catch these lines and append them at bottom of this table…

Similar behaviour is for the top if y-scroll reach certain % of table ‘y-scroll’ and the top line is not the initial line, it will request 100 (or the number of lines to the top if less than 100) and insert those lines into the top.

This is working perfectly so I’m very satisfied with it; as it is what I wanted.

All rows are kept in a “<tbody>” block

Now Here is my problem: in some occasions when method is adding new lines at the bottom of the table, the table ‘y-scroll’ jump from its position to start position which is not what I want, as it makes experience very annoying…

Expected behaviour will be: table y-scroll will move slightly up while is appending new rows into the bottom of the table.

This happens if you try to scroll yourself picking the scroll bar with the mouse and dragging it yourself, or pressing PgDown key, or pressing DownArrow Key…

Here is the code of this method:

$.getJSON(
        "get_logfile",
        {
          "logfile_hash_key": logfile_hash_key,
          "initial_line":  initial_line,
          "requested_rows": requested_rows,
          "web_request": true
        },

        function(data)
        {
              // I need to reverse the array to start inserting on the table, because otherwise inserted
              // lines will be reversed
              //
              // If request is from top...
              if (requested_rows < 0) {
                    new_initial = initial_line + requested_rows
                    if (new_initial < 0){
                        initial_line = 1
                    }
                    sinitial_line=document.getElementById("initial_line").attributes["data-value"]
                    sinitial_line.value = new_initial
                    starting_row = 0
                    data.reverse()
              }
              else { // if Request is from bottom...
                    new_final = initial_line + requested_rows
                    if (new_final > file_line_count) {
                         new_final = file_line_count
                    }
                sfinal_line=document.getElementById("final_line").attributes["data-value"]
                last_row_on_table=document.getElementsByClassName("tb-Log-Viewer")[0].rows.length - 1

                starting_row = -1

                sfinal_line.value = new_final

              }

              $.each(data, function(key,value) {
                    row = table.insertRow(starting_row)
                    cell=[]
                    for(cell_n=0; cell_n < value.length; cell_n++){
                        cell[cell_n] = row.insertCell(cell_n)
                        // verify cell has a "String" value
                        //
                        if (data[key][cell_n].__proto__ == "".__proto__) {
                            cell[cell_n].innerHTML = data[key][cell_n]
                            if (cell_n == 0) {
                               cell[cell_n].style = "text-align:center"
                               cell[cell_n].className = "Line"
                            }
                        }
                        // Check value for given cell is an array
                        //
                        if (data[key][cell_n].__proto__ == [].__proto__) {
                            cell[cell_n].innerHTML = data[key][cell_n][1]
                            attributes = data[key][cell_n][0].replace("style=","").replace(/'/g,"").trim().replace(" ",";")
                            cell[cell_n].style = attributes.replace("bgcolor=","background-color:")
                        }
                    }
              }
          )
        }
     )

Here is the HTML portion of this that define the table (All this is being generated by a python code):

...
<table class="logviewer" width="85%" border=1 cellpadding=10 cellspacing=0>
<thead class="th-Log-Viewer">
<style>
.Line {
   width: 70px;
}

.Timestamp {
   width: 170px;
}

.Severity {
   width: 80px;
}

.Message {
   width: 1800px;
}

</style>

<tr class="tr-Log-Viewer">
<th  class="header-Line">Line</th>
<th  class="header-Timestamp">Timestamp</th>
<th  class="header-Severity">Severity</th>
<th  class="header-Message">Message<div class="rows-data"><table><tr><td><span id="scroll-action"></span></td><td><span id="top-row"></span></td><td><span id="bottom-row"></span></td></tr></table></div></th>
</tr>
</thead>
<tbody class="tb-Log-Viewer" onscroll="Log_Viewer(this)">

<tr>
<td class="Line" style='text-align:center'><a id='1'>1</a></td>
<td class="Timestamp" style='text-align:center'>2020-07-07 08:19:48</td>
<td class="Severity" style='text-align:center' bgcolor=#3cb371>INFO</td>
<td class="Message" style='text-align:left'>[INFO ] 2020-07-07T08:19:48,516Z [main] cliutils.CliWrapperBase. - Application Args: generate-node-info</td>
</tr>

...
</tbody>
</table>

So what could be causing this table y-scrolling jump into starting position???

Thank you.

I’ve asked this question on StackOverflow but it has couple of weeks and no answer…

Go to Source
Author: Larry