I've build an application (with PHP, Codeigniter and jQuery) that uses ajax for pagination, similar to how Twitter made it back in the day (clicking a button to load in more data).
It's all quite well, but there are a few issues however.
When there are no more posts left to load in, I want the "load-more"-button to be removed. However, right now I can only check if there are any posts left when I click the button, and the script returns null.
This is how it is now: Let's say that there are 14 posts in the database. 5 is loaded per default.
1 - click load-more, 5 more posts are loaded. 4 remain.
2 - click load-more, the remaining 4 posts are loaded.
3 - click load-more, no more remaining posts, button disappears
But I want to get rid of step 3, the application should "be aware" of that there are no more posts left to render at step 2.
I am sure there are a simple way that I haven't thought if yet...
simple. select 6 posts instead of 5 and display only 5.If no of posts less than 6 dont display more button.
if ($num_rows < 6){
//remove more button
}
You could set a global Javascript variable holding the amount of total posts something like this:
var total = <?php echo $total ?>;
And after the call compare the amount to the total:
if($('.post').length == total) // .post being database results
$('#loadmore').hide();
Return a JSON object with one property that is an array (the entries) and one property that is a bool "EOF" or such to indicate when there is no more entries to load.
if(response.EOF)
//Hide button..
Ohh and add the id of the last post from current pagination in the AjaxRequest.
That way the server gives you say 25 posts from the last one it gave you.
Then you dont get offsets if a new post is added during pagination.
you could try something like this
if ($num_rows < 5){
/*what ever you want removed */
}
at the end of you loop
Please, please, please - do not do pagination in Ajax!
It is pain in the a$$ to navigate such pages natural way, unable to use back button or reload button or set a bokmark or anything!
not to mention clients that doesn't support js at all
Related
I have a MySql table with over 1000 products that I scroll through, I understand the SQL query below says "return only 10 records, start on record 16 and display the next 10 records"
sql =”SELECT * FROM items LIMIT 10 OFFSET 15”;
I could keep track of LIMIT and OFFSET within variables and use a pagination function to scroll through my table.
BUT I don’t want to use pagination. I just want to scroll up or down through all my records up or down, even if there where more than 1000 records, I don't care. So here is the problem, lets say product record 567 is displayed on page(A) and I have a link to another page(B) that displays more product information. Then I want to come back to page(A) to same spot, record 567 and be able to scroll up or down through my records. Even the records less than 567. This is why OFFSET is not necessarily what I need. Any Ideas would be great.
If you just use the back button of the browser it's up to the browser to memorize the position and hopefully restore it. If you go back via link an page B use anchor links in page A and have the link in page B point at that. You have to pass the right link from page A to page B of course.
E.g.:
Page A:
...
Product 4711
View details
...
Page B:
...
<h1>Product 4711</h1>
(Description of product 4711)
Go back to the list of products
...
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,
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.
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!
I made a scroll pagination on a system of posts/comments with jquery / Ajax and codeigniter everything work fine, but i exaplain the my problem with a example:
THERE IS USER A AND USER B
I'm user A and i wrote on the profile of the user B,
In the same time the user B scroll down for see the informations on his own profile but 1 record has been inserted on the database and the pagination doesn't work fine because load 1 result identical.
I thought that the solution can be a system of cache but i would like know the logic for use it with the pagination.
Thank you so much.
The most common solution to this problem is to have a pagination pass not the page, but the ID from the database of the last item shown. So instead of calling for page X, ajax calls for items after item XX.
So the database query will look like this:
SELECT * FROM table WHERE id > 10 LIMIT 10
instead of
SELECT * FROM table LIMIT 10 OFFSET 10
I have searched everywhere but could not get anything. The scenario is that when I run a select statement from MySQL/PHP, I want to use Next & Previous buttons to navigate backwards and forward through the results.
Does anyone know how I can accomplish this?
Here's how I run the query: select everything from members where hair = black;
This returns 8 results, and I have a page like so details.php?id=3 which takes id and display the details.
I want to be able to keep clicking the next button and move to another id from the result.
How do I accomplish this?
Thank you for your assistance.
If you mean to display 1 product details per page with Next buttons, then
1) Get the total rows from table
2) Find total number of pages like
$totalPages = $totalRows; //since 1 record per page
3) Loop thru $totalPages value to generate next links
4) Get the id of product from page url $_GET
5) Query sql using te product id obtained frm GET
Well thats the basics, hope your get it
Assuming you have all ids in the $allIds var, try something like this:
<?php
$id = (int) $_GET['id'];
$key = array_search($id, $allIds);
$nextId = $allIds[$key+1];
?>
Well, you have 2 different scopes here to address, first, when you query you are in PHP/Server side mode. PHP gets some data, processes it, shows some of it to the knowledge i have of your problem and then sends it to the browser.
Next, you have the client scope, where the client has the HTML rendered to his screen and has the possibility to click NEXT and PREVIOUS. When he does that, he issues a request to the server to get the NEXT or PREVIOUS record based on the current one.
You have 2 scenarios to work this problem out:
1) Load the whole data into memory and scan it to find your current position, see if there is a NEXT and PREVIOUS element and respond to the request of the user. If the user asked for the NEXT, easy, just move one more record. If the user asked for PREVIOUS item, then when scanning using a WHILE or FOR/FOREACH, always keep in memory the "lastitem" you saw, you can use this "lastitem" as your PREVIOUS item.
2) In the event you have many (i mean like more than 1000) items, you need to use a little subquery magic and work this out using SQL.
select everything from members where hair = black AND id = XYZ ORDER BY id LIMIT 2;
This will return you the CURRENT AND NEXT elements. Then call the same query again but this time, order it DESC so that your 2 items are the CURRENT AND PREVIOUS.
select everything from members where hair = black AND id = XYZ ORDER BY id DESC LIMIT 2;
Note that you can order this the way you want, the goal is to get a static result, something that always gets out the same way so that you can reverse it and get the items around the selected one.
I hope this helps you
I have html page whicha has 5 Div tags in disable mode. what I want is
Imagine I have 200 records in mysql database table
Using Jquery I want to call PHP Mysql data (only 5 records at a time)
When user clicks on Next button PHP page will get called Limit 6, 10 and so on
if user clicks on Prev button then previous 5 records
following example is good enough bit it has pagination with numbers i want Next/Prev buttons.
http://www.9lessons.info/2009/09/pagination-with-jquery-mysql-and-php.html
For starters in pagination.php
Change this:
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
To this:
// Show 'next' link
echo '<li id="'.2.'">Next page</li>';
To create you first 'next'-link.
Then add some jQuery code to
Add a prev button when you click to
the next page(only if currentpage = 1) and remove it again on page 1
Include your result's count as a js-var, so you will know when the last page is reached to remove the next button.
On each load, change page number's +/- 1
Your php stays the same since you always send a page id to use in your query.
Have you tried writing this yourself?
If so, where did you encounter problems?