如何定义何时应隐藏“显示更多”按钮？

I have a mysql table of products.

I have a product listing page where User has a button "Show more" to load more products on the page. After clicking on this button jQuery calculates how many displayed products are on the page (N) and makes an AJAX request to the table for getting 20 more products (N+20).

Now I should create a trigger when I should hide the button. Which trigger I should choose? What is the best way to define that there are no products.

Please, help.

I have no idea how have you reached that functionality since you are not sharing the code and thus I cannot give you the most accurate help, only this one:

  • when loading the page and retrieving the first X rows from DB, retrieve the amount of all rows (matching the search criteria) as well
  • make this count visible to the template
  • in jQuery, count how many rows have you already loaded
    • this means, that on page start you are displaying X rows, the amount of total rows is Y, and the number of currently displayed rows is Z
    • immediately after the page is loaded you need to compare if Z <= Y then do not display button else display the button
    • if the button was displayed I guess you are listening to click event on this button and then performing your AJAX request, here after the AJAX is successfully completed, you need to do Z += X and again compare if Z > Y then hide the button

That should be your logic, now turn it into your code.

There are 2 ways I guess,

  1. The simple way would be counting number of response rows that's returned by your AJAX function. If it's smaller than 20 then hide the button.. However, if your records number is a multiple of 20 then there will be a glitch in the last response, because it won't hide the button.

  2. The perfect way is to calculate number of records in your table, then save that data in your js variable. Then compare that variable value with the number of times you ask for another record.. If they have same value then hide the button, if not then show the button.

It depends on the frequency of product list updating.

If the amount of products changes often (say, more than once a day or so), I would execute a query on each AJAX request, checking if I have more items (for example, checking if N+20 >= count(id) of products), and on the callback hide the button.

Otherwise, I would just inject the amount of products as a JS parameter into the page, validate against it on each click (N+20 <= count_products), and save myself some AJAX \ SQL loading time.

you can get the count of all lines using PHP and save it in an hidden field or in a variable after that you can test (using jquery) to see the current number of records in the page (you are already doing that ) then test it with the number in the hidden field/variable and show/hide your button

Finally I choose next variant:

I want to load more 20 products. In backend code I switch this number to 21. So then in jQuery I show just 20 BUT I check if there one more product I should NOT hide the button.

That's it. Thanks guys anyway!