CODEWITHSUNDEEP
phpjquerymysql
user1929552
user1929552

Reputation: 55

Appending table rows with scrolling down

H_i

I have a question about possible simple and good working solution width jquery. How to append ajax table from sql like 

https://www.inforegister.ee/BACEXSQ-ARGOS-KRACHT

with 'scrolling down'-event (width after ajax-reloaded table) width a find form? First i have a mysql table creat table tbl1(id int auto_increment,name varchar(200)); having many hundred records. From it appends automatically e.g 10 records.

Html-code would looks like:

<form>
<input type="text" id="find" >
<input type="buttom" id="findb" >
</form>
<table></table>

Thank you

Upvotes: 0

Views: 986

Answers (3)

Chris Payne
Chris Payne

Reputation: 1710

Wayne Whitty's answer is the way to go, but I'd like to add to it:

If you scroll fast on the page that you linked to, you will see that the loading image appears multiple times. This is happening because the user has reached the bottom of the page again, before the new content has been loaded.

You can make this more efficient by checking to see if you are already waiting on a response from the server before calling loadNextCompanies() (or your equivalent) again.

Update: You asked for a plugin- although I have never used any plugins to achieve this so I can't make any recommendations, I can tell you that this is called Lazy Loading and a quick search turns up this plugin: https://code.google.com/p/jquerylazyscrollloading/

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27382

Hey here is the plugin you are looking for.

http://masonry.desandro.com/demos/infinite-scroll.html.

Take a look at above example.

Upvotes: 0

user399666
user399666

Reputation: 19909

If you look at the source, you'll see that they're making use of the scroll event:

jQuery(window).scroll(function(){
    if(jQuery("#nextCompaniesCount").val() > 0) {
        if (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()){
            loadNextCompanies();
        }
    }
});

Look at the source and you'll also see the loadNextCompanies() function, which performs an AJAX request and then adds any HTML to the body.

If you're wanting to add new items to the end of a table, you can use something like:

$('#id_of_table > tbody > tr:last').after(newRow);

newRow would contain the tr html that you want to add.

Upvotes: 1

Related Questions