In all the time I've spent developing, one thing I've never really understood is the proper way to create "pagination" with AJAX search results.
So, I'm returning 40 results and I want to be able to paginate them by 10 at a time ... is it a matter of spitting them out on the page, adding some css classes and hiding/showing each group of 10 at a time?
Can someone point me in the direction of some "from scratch" pagination?
Far and away the easiest way to do it is to use a canned script. I recommend DataTables, which will do all the paging for you, or if you choose can do it via individual ajax calls to PHP. At it's simplest, you'd spit out a valid table of results with a <thead>, call $(element).datatables() and you'd be done.
IF you HAVE to do it from scratch, it's a matter of returning a set number of results from your database, making a call with a start and end number for the record (or a start number and number of rows to return) Then you would build buttons or links that change that view by passing different parameters to the server and receiving data back. Ajax would be preferable so you don't need to reload the page each time.
[CEIL][2] is your friend for determining pages for the navigation.
If you chose to do it without hitting the database each time (a notion improved in Datatables by a process called "pipelining") then you'd spit out divs of information based on the amount to display, then show and hide them based on the page you want to be on. It wouldn't work for huge datasets (too much to the dom and too long to load) plus it won't be pretty to write, either.
Related
We've been prototyping a search results system for a mySQL database with about 2 million names and addresses and 3 million associated subscription and conference attendance records.
At the moment the search is executed and all results returned - for each result I then execute a second query to look up subscriptions / conferences for the person's unique ID. I've got indexes on all the important columns and the individual queries execute quite quickly in phpMyAdmin (0.0xxx seconds) but feed this into a webpage to display (PHP, paged using DataTables) and the page takes seconds to render. We've tried porting the data to a Lucene database and it's like LIGHTNING but the bottleneck still seems to be displayng the results rather than retrieving them.
I guess this would be due to the overhead of building, serving and rendering the page in browser. I think I can remove the subquery I mention above by doing GROUP_CONCAT to get the subscription codes in the original query, but how can I speed up the display of the page with the results on?
I'm thinking little and often querying with AJAX / server side paging might be the way to go here (maybe get 50 results, the query is smaller, the page is smaller and can be served quicker) but I welcome any suggestions you guys might have.
Even if you are using pagination with Datatables, all the results are loaded into the page source code at first although you are using the server side feature.
Loading 2 million rows at once will always render slowly. You have to go for server side pagination, it can be by AJAX or by a normal PHP script.
You can also consider using a cache system to speed up the loading of data from the server and avoiding calling the database when it is not needed. If your data can be changing randomly in time, you can always use a function to check whether or not the data has changed since the last time you cached the data and if so, updating the cached data.
So the situation I have is I'm using Wordpress and I'm trying to write a custom plugin.
What I want to do is grab an array of all the posts and show the first 25.
Then underneath that I want to have a button that says , "Show Next 25" and when I hit the button it will add the next 25 to the list of articles, and if I hit again, wash , rinse repeat till it's out of articles.
I was going to write this in straight PHP / MySQL but not sure how to incorporate JQuery into it.
My thought was to write a series of offsetting MYSQL statements but thats probably too clunkly.
My 2nd thought was to pull all the post info into one Associative array and then find a way to parse the other output into the hidden divs.
Thoughts?
I tried looking for a wordpress plugin that does this but did not find one and I tried searching for a situation like this on here, found some stuff similar but not the same.
I guess you could compare this to commenting feature where it shows the last 10 commends and you have hit a button to see the rest of the comments.
Thanks much in advance.
I would grab from the database only 25 at a time. Then I might use JQuery to do the ajax call to pull another 25 based on what has already been shown.
Use a limit 25, offset clause on the mysql. Send the next offset value to the web page as a hidden input or a javascript var. Then use JQuery ajax to call your php function that returns a JSON data of the next 25 rows to display.
So this isn't JQuery, but I like this:
http://www.kryogenix.org/code/browser/sorttable/
But I also agree w/ the thoughts, you're wasting the resources of Ajax if you do it this way. Ajax would do well here.
Here's how "I" would do it, though this is just a suggestion.
First, if you don't already have it, I would suggest something like Komodo Edit to code in. It's free, but I have the pay for for very cheap (i think my last upgrade lic was 30 bucks?). If you, buy just one copy, they'll offer you a ton of discounts if you ever decide not to upgrade. Good program for HTML5/php editing.
Second, go look at Codeigniter's Active Record. After looking this page over, you'll see very easily why I would suggest CI. CI's Active Record makes safe and secure SQL calls an absolute breeze, though for better security, I would suggest you make use of there XML filter and never "chain" Active Record calls as it shows you can do on that page.
Finally, as I said before, I would read up on jQuery's .ajax(), .get(), and .post() commands. After a stirring read, I'd probably end up using .get() to make calls to a controller containing a simple php active record function that would return the wanted update data at +25 "ahead" of what the user is actually looking at.
I am looking to display 60,000 records on a webpage with php pulling the records from a mysql database on localhost. These 60,000 records may change depending on the data input.
The records have 5 text fields and due to the sheer number of records, a significant time is taken to send the data from the mysql server to the web browser. Even on a localhost, the time taking is around 15 seconds. During this time, the page is empty.
I would like to seek professional opinion on how to either to
1. display the data in an alternative method, (which I'm not sure what method) or
2. hasten the sending of data from mysql server to the web browser using caching technology like memcache.
In the end i will be deploying the application on the internet where the lag would be immensely unacceptable (i.e. > 15 seconds).
Thank you and Best Regards!
I would suggest trying AJAX pagination. No user will be able to see and analyze 60k records at one time. You can have the php display the first x (however many fit on the average screen or two) records to fill 2-3 pages, and have JavaScript listen for a scroll change. If a user starts scrolling down, have it automatically query the next y records, and add them to the display list. Possibly also removing the records from the top of the list.
Also, adding some quick-jump links or a search feature could help, as you wouldn't want to scroll down 60k records to make changes.
This will significantly lighten the server and client load, as it would only have to serve up a couple hundred records at a time.
DataTable
You should have a look at YUI's DataTable. You should hook the datatable up to autocomplete. There is also an example how they did it in YUI2(help) but YUI3 is a lot faster.
Caching
Caching is also important. You say you could use memcached so that is very good. I am a big fan of redis(But both will work, but the nice thing is that redis is I think better suited for autocomplete). There is even a free plan of Redis To go.
Another important tip is to make sure you are getting your data as you want it displayed from the database. In other words if there is any calculation or processing that you have to do, avoid doing it in PHP code during loops. Use SQL functions to process data, name fields, etc. Databases are good at that sort of thing. Of course this may or may not apply to exactly what you're doing.
I have an area which gets populated with about 100 records from a php mysql query.
Need to add ajax pagination meaning to load 10 records first, then on user click to let's say "+" character it populates the next 20.
So the area instead of displaying all at once will display 20, then on click, then next 20, the next... and so on with no refresh.
Should I dump the 100 records on a session variable?
Should I call Myqsl query every time user clicks on next page trigger?
Unsure what will be the best aproach...or way to go around this.
My concern is the database will be growing from 100 to 10,000.
Any help direction is greatly apreciated.
If you have a large record set that will be viewed often (but not often updated), look at APC to cache the data and share it among sessions. You can also create a static file that is rewritten when the data changes.
If the data needs to be sorted/manipulated on the page, you will want to limit the number of records loaded to keep the JavaScript from running too long. ExtJS has some nice widgets that do this, just provide it with JSON data (use PHP's encode method on your record set). We made one talk to Oracle and do the 20-record paging fairly easily.
If your large record set is frequently updated, and the data must be "real time" accurate, you have some significant challenges ahead. I would look at comet, ape, or web workers for polling/push solution and build your API to only deal in updates to the "core" data--again, probably cached on the server rather than pulled from the DB every time.
your ajax call should call a page which only pulls the exact amount of rows it needs from the database. so select the top 20 rows from the query on the first page and so on. your ajax call can take a parameter called pagenum and depending on that is what records you actually pull from the database. no need for session variables.
Wikipedia http://en.wikipedia.org/wiki/Main_Page , has sections like:
Todays featured article,
From the news,
Did you know etc.
Say in my page, I want to get the main highlights from the database table(s) (multiple databases possible), what is the best possible way to query? I mean create separate connections and then query or use multiple queries? Is it better to use PDO for this purpose?
And how can I make a particular section update without refreshing the page say every 10 min? Is the code going to be complicated?
Can anyone please let me know.
Thanks.
yes the code is going to be complicated but not difficult.
If you want to use PDO then you should use it, it depends if you want to use it or not.
First you need to decide the highlights that you want to show in the main page and then decide how to fetch this related info.
You can use multiple queries. First fetch and then display.
And how can I make a particular section update without refreshing the page say every 10 min
for this you will have to use ajax.
If you want to refresh the data, you have two options.
First of all, you could write JavaScript to run away after a set interval and get fresh data. This is a VERY BAD idea - it exposes you to browser specific bugs, it won't work on machines with JavaScript disabled, and far more importantly it means you'll be furnishing your pages with the connection details for your database (and also allowing connections to it from anywhere).
A better solution would be to use AJAX to handle this - which basically means that you serve "just the data" rather than the whole page. Again, it's dependent on Javascript, but then implementing client side behaviour without the benefit of client side scripting will never work anyway!
Martin.
#1 The todays feature is either calculated from the current date; or specified, either manually or via a randomizing script which saves todays' date together with the id, so it will stick for the rest of the day.
#2 From the news is a simple query with order by date desc from the news.
#3 Did you know says it's from their recently added articles, which would also be somewhat of an order by date desc-query.
PDO is just a wrapper for the same SQL-queries as usual, you can achieve the same result without it.
About updating a section, I'd use a cache with a 10 minute limit. This will not reload for people staying on the page for 10 minutes (for that you would need AJAX) but it will load fresh content on a timebased period. You should base your choice of whether you expect users to spend 10 minutes on the same page, or just give some news at least 10 minutes in the spotlight before they get exchanged.