How to Create Tabulated Data with Link View More?

Asked

Viewed 992 times

0

I’m pulling from the database records of a certain table.

I want to show only 4 out of 4 records on the screen. But I would like to pull them all at once instead of paging (1, 2, 3, 4).

I want to show 4 lines and put down a button SEE MORE and when the user clicked showed 4 more lines and so on until finished.

How can I start doing that ?

I have nothing ready. Only the table, but differentiated.

I didn’t make the table with table rather with ul.

javascript html css

1 answer

2


Solved.

I made a CSS and a little bit of jQuery.

CSS

ul {
   li {
      &:nth-child(n+5){
      display: none;
   }
}

In the code above I show only 4 lines.

HTML

<div class="btn-ver-mais">
   <span>Ver mais</span>
</div>

Above the button of See more.

jQuery

// Limitação de Lista de Concessionárias de 4 em 4 linhas
$('.btn-ver-mais').click(function() {
    $('.content-resultados li:hidden').slice(0, 4).show();
    if ($('.content-resultados li').length == $('.content-resultados li:visible').length) {
        $(this).addClass('disabled');
    }
});

And in the code above when I click the button See more, select all lines that are hidden or hidden, from position 0 and show up to 4 lines, with the function slide();

And if the number of visible lines is equal to the total number of lines I disable the button See more.

Thank you to those who voted to close because it is not clear enough.

Browser other questions tagged javascript html css

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