How do I do my table with infinite scroll?

Asked

Viewed 251 times

2

I have the following situation: I want to get to the end of the table to make an Ajax request and return another 10 lines in my table. For example:

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
         table {
            width: 100%;
        }

        thead, tbody, tr, td, th { display: block; }
        thead{
             background: #ccc url(https://www.devfuria.com.br/html-css/tabelas/bar.gif) repeat-x left center; 
        }
        tr:after {
            content: ' ';
            display: block;
            visibility: hidden;
            clear: both;
        }

        thead th {
            height: 30px;

            text-align: left;
        }

        tbody {
            height: 120px;
            overflow-y: scroll;
        }

        thead {
            /* fallback */
        }


        tbody td, thead th {
            width: 19.2%;
            float: left;
        }
    </style>
    <title></title>
</head>
<body>
<table id="table" class="tabela">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
      <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
      <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
      <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
      <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>

</table>
<h1 class="teste">hey</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

 $(".teste").click(function() { 
    alert('hey')
 });
 $("#table").click(function() { 
    alert('table')
 });
// detecta quando chega ao fim da div
$("tbody").scroll(function() { 


        if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) {
            alert("final")
             var row = 2;
                $.ajax({

                            //envia dados para o fetch_data.php
                            url: 'teste3.php',
                            type: 'post',
                            data: {row:row},
                            success: function(response){
                                     $("tbody").html(response); 
                            }
                        });
        } 
    }); 

</script>
</body>
</html>

I do the Ajax request when the scroll reaches the end of the table for the teste3.php file but when the value is returned the previous ones are gone, I want the table list to only increase.

Follow the code of the teste3.php file:

<?php


$row = $_POST['row']+1;
echo "  <tr>
        <td class='filterable-cell'>heye</td>
        <td class='filterable-cell'>Escort</td>
        <td class='filterable-cell'>Blue</td>
        <td class='filterable-cell'>2000</td>
    </tr>";
html jquery ajax table rolling

  • I think you need to use an append: https://api.jquery.com/append/

  • I’ll try @Cezarcruz

2 answers

2


Just consult the manual and see that the method .html() has two functions: one is catch internal HTML and another is replace the internal HTML of an element.

In doing $("tbody").html(response); you are replacing the content (internal HTML) of tbody, that is, instead of adding new lines, you are replacing existing lines.

In the case of the infinite scroll, you should use the method .append(), that adds new content at the end of the element, i.e.:

$("tbody").append(response);

1

Hello, follow an example with append, and scroll: auto, I believe is the best alternative in this case. in place of the button, just put a "for" or "while". Run it right here to test.

$(document).ready(function(){
  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
<style>
div.ex1 {
  background-color: lightblue;
  width: 500px;
  height: 160px;
  overflow: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>


</head>
<body>

<h1>The overflow Property</h1>

<h2>overflow: auto:</h2>
  <div class="ex1">
     Aqui dentro vai sua tabela!!
    <ol>
      <li>List item 1</li>
      <li>List item 2</li>
    </ol>
  </div>
  <br><br>
  <button id="btn2">Novo item da tabela</button

</body>
</html>

  • I used the append and it works, thanks!

  • cool, if you want to mark positive the answer then, thanks Xp

Browser other questions tagged html jquery ajax table rolling

You are not signed in. Login or sign up in order to post.