Just a quick question. If I use a Pagination for my website and am expecting a lot of results, is it better to use jQuery or just a basic PHP/MySQL one that just loads a new page?
If I use jQuery and I have over 300 results from the database, will it have to load it all at once on the initial page load? That might take a long time to load. Or can you make it load only the first 10, and then when you go to Page 2 it will load the next 10?
Just wondering if you have any suggestions for my situation, and if you recommend any good scripts I can use for it.
Thanks!
IMO, start with "basic" PHP/MySQL pagination (load a new page each time the user changes pages).
Once you've got that working, if you want it, then add in jQuery pagination on top. All the jQuery pagination would do is load the new page of results via AJAX, rather than loading an entire new page.
So, the key here is how you handle paginating results via javascript (jQuery). If you render all 300 results on the page and simply hide results 200-300 (and reveal them via javascript), your page will still be really slow to render initially, and you'll be taxing the database with a query that could be optimized via a limit (pagination).
On the other hand, if you asynchronously query for more results via say, an asynchronous GET request to a web-service that spits the data out via JSON, you can both have a responsive page and avoid a taxing, limitless query.
Using PHP / MySQL and post-backs to handle the issue also prevents the long-initial page load + taxing query.
So, in summary, I'd absolutely paginate your results. I would also suggest you do the following:
1) First architect things using purely PHP / MySQL. So, for instance:
/results/?start=0&limit=20 (Show results 0-19)
/results/?start=20&limit=40 (Show results 20-40)
2) Then if you want to provide a responsive, javascript mechanism for loading more, extend your page so that it can spit out JSON with a format parameter:
/results/?start=0&limit=20&format=JSON
So if format=JSON instead of rendering the HTML, it'll just spit out the JSON data, paginated.
3) Then wire up the javascript to use the JSON data to dynamically load in more content:
$.get('/results/?start=' + start + '&format=JSON', function(data) {
// Process and display data
});
Hopefully that makes sense!
You've tagged your question with ajax, that's the answer... You should use a combo of PHP/MySQL + Ajax to make the things faster and smoother.
Here is a very popular plugin which implement the client interface: JQGrid
Related
I have a table which dynamically reloads continually every 60 seconds. This keeps the data up to date.
I am using the script from here - http://www.michaelfretz.com/2010/04/21/using-ajax-to-load-data-from-php-into-your-website/
On the pages that have about 15 records, the Twitter Bootstrap tooltips work fine, they are speedy and look great.
On another page however I have over 400 records. Each record has a hover tooltip which shows the information from the database about that record. The information has already been outputted to the title tag but when hovering it takes more than a second before it appears which makes the whole page seem sluggish.
I'm thinking the reason for this is due to using the 'Rel' tag and twitter javascript which is live(Continually updating) , and therefore slows it down. But I'm not sure.
Is there any way to fix this..... or am I better to try and make a paginated table which loads the next page each time I click Next?
400 records is a lot to expect someone to traverse within a 60 second period. Without actually seeing any actual html, it's a bit hard to make suggestions but here are three:
Use the title attribute instead - see about the Title attribute. This will mean that you are using inbuilt browser code rather than Bootstrap rendering for tooltips.
Show a subject/content snippet for each row rather than just subject i.e. place the initial part of the content in available space after the actual subject. Most people have large monitors these days and with a responsive design you can show a lot of content after the subject.
As you say, use pagination. Bootstrap provides one but it requires you to do the wiring.
400 Records! Too much!
This is something seriously to do with the browser and system's performance. Displaying 400 records with live() is kinda crazy. The browser will crash for sure. Instead you can do one thing. Use pagination and display only a small sub set. Also, the users will find it difficult to navigate and search.
One another way is to use datatables. Load the full content in table and don't worry about anything. Datatables will take care of the rest. Pagination and Search are good features in this.
Screenshot of Datatables:
(source: webresourcesdepot.com)
If you see this, everything from Searching, Sorting, giving tooltips are done in the client side, with minimal set of data. So the payload on the browser will be less and the users see the part, which they just require.
I'm looking for a library which do this :
Retrieve a JSON through an AJAX call
Populate table with the JSON
Update in real time the table with the JSON (call every x seconds) and only delete or hide the rows wich are deleted or insert the new rows.
/Editing after first answer
Ok I guess my first explanation was not good.
Retrieving through jQuery a JSON and build a table is good, I could do that, but my request was more on the other part.
I'm looking for a library to display the result in a special way.
Let me explain.
Json request 1 send :
1;Tomato 2;Apple 3;Salad 4;Carot
Json request 2 send :
1;Tomato 3;Salad 4;Carot 5;Potatoes
I would like the second row disapear with a effect (fadeOut) and the rows below move Up. For the row 5, i just want a new row appears with a fade in.
Is that more clear?
Is there any library existing doing this?
I'm doing it in PHP, but i hope to write all this in JS.
The user could just look the table and see the new rows appearing and the old rows deleting.
Any ideas or am I supposed to write it from scratch?
You can get the json like this (use get or post, ill show post here):
function do_json_live(){
$.post('url.php','somedata', function(returnJSON){
alert(returnJSON);
//do something with the `returnJSON`
setTimeout(do_json_live, 2000); //2000 ms = 2 seconds
},'json');
}
If you want something friendly and full of various useful features, you can use jQuery plugin called DataTables.
It provides API allowing you to provide new data from the server on request: http://www.datatables.net/api
It works for simple implementations also, is pretty customizable, allows to change its outlook etc.
Hope this is useful.
Here is a really good article on different polling/comet techniques that you will want to look into. It breifly describes each and points out some pitfalls you might not think of.: http://query7.com/avoiding-long-polling. Also here is a jquery plugin for long polling: http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/
Try Jquery Grid Plugin. You can retrieve JSON from server and build a grid on the client side. Take a look at the web site, there are some examples including php.
First I would read this, but the code is actually really simple.
On your front end, you'd have your table
<table id="myTable"></table>
Then you'd make your AJAX post within JQuery
$.ajax({
url: "yourphpfile",
data: <data you want your php file to read>
success: function(data){
$('#myTable').html(data);
}
});
Your method in php would take in your posted data, it would create an HTML string of a table element, and then you'd set your table's innerHTML on the front end with .html() built into JQuery -- that way you never have to worry about showing/hiding, everytime you post, your given the table itself, so you just display exactly that, you can handle all the fancy stuff server side.
You could use the awesome jqGrid plugin.
To do the autorefresh, you should do this:
setInterval(function(){
$("#grid1").trigger("reloadGrid");
}, 10000);
Hope this helps. Cheers.
If real-time updating is truly required, as Neal suggested, Comet or Stream-Hub would be one avenue worth checking into.
As for the interface, I recently have been using JQuery Templates, and when reconciling added / removed / updated records, I use JQuery selectors to clear & update, and use Templates to add in new records. And because I'm using JQuery in all 3 events, I could easily integrate their motion / visual effects.
JQuery Templates
JQuery Selectors
JQuery Effects
Stream-Hub
I myself only needed polling (every 15 seconds) so I'm using Robert Fischer's improved JQuery PeriodicalUpdater
JQuery Periodical Updater
Does anyone know of a link to a site that has a tutorial/code on good way to paginate information coming from a database? (without page refresh) I have spent the better part of the day looking for a site that has what I need. Most are dealing with static/fixed data in the forms of lists etc.
I need one that has something like this for my tables:
Data Data Data Data
Data Data Data Data
Records 1 to 8 of 27 First Previous Next Last
We just implemented a few things using this plugin for JQuery:
Datatables.net
It works on basic html tables and has support for AJAX. Basically you would just write a PHP page that returns a partial result from your database in JSON, etc. The plugin will handle making the AJAX call and displaying the data.
This is only a very partial answer (sorry, not much time atm) but look for the 'LIMIT' command in mysql. It lets you pull back only a certain set of records, say records 11-20. I use that when I do pagination.
Again, this isn't complete, but hopefully it'll help!
I've worked with this one quite a bit. jQgrid... seems to be pretty well maintained.
http://www.trirand.com/blog/
I have a php code that fetches data from mysql. The data has (say) 15 rows. I want to display only 5 rows at a time to the user, with links to each of the set (3 in this case) such that when a user clicks on either of the links, the same page will show the corresponding results. Since, php code has the final result set, I don't want a solution that involves me to navigate to other pages and possibly re-calculate the next set of solutions (5~10 or 10~15). How can I do this? Thanks in advance.
If I am using javascript or ajax, how can I achieve this? I don't know javascript much.
You can try loading everything in your page and simulating the pagination thanks to javascript.
An example in jQuery here
It sounds like you want to send the Data as a complete set to the client but not let him display everything to the user. So use Javascript to just show you the pages 1*page_number to 5*page_number (with a for-loop).
By far, the easiest solution in this situation is a Dom-based Grid system. I recommend checking out Datatables. In essence, the Datatables code will take a fully-formatted html table and reformat it to include only the amount of rows you tell it to, with paging on the bottom as you've requested. In addition, you can turn on such features as filtering, toggle-able length, sorting, and selection. Once you get the hang of it, the additional code takes no more than a minute per table and the features are outstanding.
This is really straightforward. Use PHP to output ALL of the table, with all the rows. The only gotcha here is to include the full html, including <thead> and <tbody> Give the table an id such as "example"
Now, include the files that you download from the datatables site--datatables.js and Jquery.js. Instantiate the jquery like this:
$(document).ready(function() {
$('#example').dataTable();
} );
That's it. As you can see from the examples, it's a really cool tool. Good luck.
I've got a script in php that continually grows an array as it's results are updated. It executes for a very long time on purpose as it needs to filter a few million strings.
As it loops through results it prints out strings and fills up the page until the scroll bar is super tiny. Instead of printing out the strings, I want to just show the number of successful results dynamically as the php script continues. I did echo(count($array)); and found the number at 1,232,907... 1,233,192 ... 1,234,874 and so forth printed out on many lines.
So, how do I display this increasing php variable as a single growing number on my webpage with Javascript?
Have your PHP script store that number somewhere, then use AJAX to retrieve it every so often.
You need to find a way to interface with the process, to get the current state out of it. Your script needs to export the status periodically, e.g. by writing it to a database.
The easiest way is to write the status to a text file every so often and poll this text file periodically using AJAX.
You can use the Forever Frame technique. Basically, you have a main page containing an iframe. The iframe loads gradually, intermittently adding an additional script tag. Each script tag modifies the content of the parent page.
There is a complete guide available.
That said, there are many good reasons to consider doing more pre-computation (e.g. in a cron job) to avoid doing the actual work during the request.
This isn't what you're looking for (I'm as interested in an answer to this..), but a solution that I've found works is to keep track of the count server-side, and only print every 1000/5000/whatever number works best, rather than one-by-one.
I'd suggest that you have a PHP script that returns the value in JSON format. Then in another php page you can do an AJAX call to the page and fetch the JSON value and display it. Your AJAX call can be programmed to run perhaps every 5 seconds or so depending on how fast your numbers output. Iframe though easier, is a bit outdated.