Infinite scroll does not update with CSS class

Asked

Viewed 60 times

0

Goal

I have a table populated by the database, and would like to update as scroll is ending.

Test scenario

$(document).ready(function() {
  $("#regs").scroll(function() {
    if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) {
      //requisição ajax
      $("#regs").append($("#regsadd").html());
    }
  });
});
.registros {
  height: 150px;
  overflow-y: auto;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="regs" class="registros">

  <table >
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>

</div>

<div id="regsadd" hidden>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</div>

Problem

  • The styles are not being applied.

Doubts

  • How could I solve this case as simply as possible?
  • What other forms?
html jquery css

  • I think the simplest way is a plugin that already does this.. I’ve seen this one working and it fits well: https://github.com/anjlab/jquery-infinite-scroll

  • You are not "appending your records to the table, so css is not applied" You are "appending" to div regs

  • Another mistake. your div "regsadd" has the tr and td tags but will give error for not having the table tag and if you look at the source in the browser you will see that it is only appending plain text.

  • 1

    Downvoters, could you explain why? What’s the question? Or could you not even say that? It’s very childish here, man.

2 answers

2

Your .append($("#regsadd").html()); is only capturing content text because table tags are not inside a table. Added tag <table> in the content, it is now possible to capture the internal elements by .html(). Another problem is when the content is placed in the new table, you were using the ID regs in <div and not in the table, so when the content was added it went into the divnot the table itself. Separating the ID’s for each element, the ID of the div has only the purpose of adding the effect scroll while the table ID, manipulate its contents.

$(document).ready(function() {
  $("#tablescroll").scroll(function() {
    if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) {
      //requisição ajax
      $("#regs").append($('#regsadd > table').html());
    }
  });
});
.registros {
  height: 150px;
  overflow-y: auto;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="tablescroll" class="registros">
  <table id="regs">
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>

</div>

<div id="regsadd" hidden>
<table>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>0</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>5</td>
  </tr>
</table>
</div>

  • Douglas, yours is bending the tbody.

1


Follow correction of your code working (tested in Firefox 67.0.4)

$(document).ready(function() {
    $("#regs").scroll(function() {

			if ($(this).scrollTop() + $(this).height() ==  $(this).get(0).scrollHeight) {
			  //requisição ajax
			      debugger;
				  $("#myTable tbody").append( $("#regsadd")[0].firstElementChild.firstElementChild.innerHTML  );

			};
		});
});
.registros {
  height: 150px;
  overflow-y: auto;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}	
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="regs" class="registros">

  <table id="myTable">
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>

</div>

<div id="regsadd" hidden>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>  
</div>

  • It worked perfectly Elizeu, but for ease, I used $("#tabela tbody").append($("#regsadd > table > tbody").html()); to pick up the contents of tbody table to be added.

  • I will also need to make a solution of this in my work soon. But it’s good to test in other browsers and make the necessary adaptations (if you choose not to use some framework ready, as will be my case)

Browser other questions tagged html jquery css

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