Develop Reference

How do I display database rows on multiple pages with Ajax?

I have a database with a table having a big number of rows. I am fetching the data in this table and displaying it in an HTML table on a web page.
My requirement is to display 20 records initially and then when the user clicks a button labelled Next, I show the next 20 records and so on...
So I have initially fetched first 20 rows from the table in my PHP (server-side), and then assigned a JS function to the onclick attribute of the button labelled Next. Inside this JS function, I use an AJAX call which brings me the next 20 rows. Then within this JS function, I replace the HTML rows with these new rows.
I need something like this:
The question is that are there any plugins available which can implement that functionality for me? If a plugin is available, implementing it manually wouldn't make sense because being a rookie, I can't develop it better than the developers of that plugin.

Yes
This is called pagination - a quick search for "ajax pagination mysql php" or similar brings up a wide range of options. I can't recommend any particular one as your question is too broad; I can only reasonably go as far as a definition.
Internally they use the MySQL LIMIT keyword which may help give further things to search for or experiment with depending on your actual use case.

Programmatically setting the number of displayed rows in a Bootgrid table

Hi I'm writing a web app using rails and as part of it I am displaying data to the user using jQuery Bootgrid. As part of this the user is able to set the number of rows per page of the table. I'd like to be able to have this setting persist between page loads.
When a user chooses an option for the number of rows to display I am able to capture that and store in a model. However Bootgrid doesn't seem to have a simple way of programmatically setting the number of rows. This seems like a common thing to want to do so if anyone has come across this before and can give some help it would be greatly appropriated.

you can find a "setRowCount" implemented in
https://github.com/rstaib/jquery-bootgrid/issues/215 - jquery.bootgrid.modified.txt
Unfortunately the user didn't see fit to properly fork the repo.

Not my best code but it is working:
With jquery fire click event of number of rows that you want...
$("#grid-basic1-header .dropdown:visible [data-action='-1']").click();

Fully custom lightbox in dhtmlxGantt

Hi there,
I'm looking at using dhtmlxgantt as a way of building up an itinerary i.e. you add items at specific days throughout a period (most likely 2 weeks)... However, there are quite a few extra variables that I need to store along with the standard info of dates etc. There are a series of 4 dropdowns which populate the next one via AJAX.
I know I can add custom controls into the lightbox but these will not work via AJAX when the previous dropdown is changed. I was hoping that I'd be able to make a fully custom lightbox which then passes everything back to dhtmlxGantt but I can't seem to find away...
It looks like it's possible in the scheduler product (http://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) can we do the same with Gantt?
Thanks in advance,
Adam.

You can just redefine gantt.showLightbox method and show your form from there. And then use public API to save changes - gantt.addTask, gantt.updateTask, gantt.deleteTask
Here is a crude example:
http://docs.dhtmlx.com/gantt/snippet/5e134aa1

Dynamic Loading Grids; Javascript or Tag library

I am looking for a grid implementation on my dashboard. The requirement here is that if the data that the grid might be fetching changes while a user is looking through the grid, the changes should be reflected. So the row present in page 1 may be present in page 2 after sometime. If the user clicks on page 2, he should be shown a fresh page that is fetched from database and that item should be in page 2. So, I need to use a pagedObjectList to get the data and show that data when user looks for the next page. The same requirement is for sorting too.
So I am looking for a javascript Grid like jqGrid or DHTMLX grid or a Tag Library which has some sort of ajax calling mechanism for sorting and paging instead of showing the old data which is fetched first.
Please suggest any grid/ tag library implementation which can fulfill the above mentioned requirement. Thanks in advance

I finally went with DHTMLXGrid, it has all the configurable actions I needed, like onPageAction, onSort etc. I could simple write my custom code for those trigger events. I would also recommend it to others, pretty handy and solid.

Searching, sorting, paginating and filtering DIVs using Jquery/AJAX/Javascript

I'm working on the front-end of my project and doing the back-end later. I've ran into a snag though. I have a list of DIVs (want them to be collapsible as well) that are suppose to show various apartments around a given zip code. Problem is, I don't know where to go to look for these things:
Firstly, I wish to sort these divs by name or ranking.
Secondly, I
want to be able to search these results and toss out the ones that
they do not want, i.e. I type in A, all apartments that begin with
letters B-Z disappear in the list. I think in p after A, all Aa-Az
letters disappear from the list, etc.
Thirdly, should I use jQuery to paginate my results or should I use PHP instead?
Lastly, I have a filter box. I want to do the same as above except with different selectable options (on the fly using AJAX). User selects, 1 to 3 bedroom apartments, no pets,
and hits filter... boom, list of apartments with values.
Is there anything that I can use using jQuery/Javascript to speed up this process that also degrades when Javascript's disabled? I know this sounds like a lot, but any help would be greatly appreciated.

Well for this to work without javascript, and still behave like you want, i guess you have to build this in pure old html (with form post's / links) and then add jquery ajax functionality to make it prettier and faster when javascript is enabled.
If i were doing this, i would build it with form post's that return the whole page (when javascript is disabled) and add jquery events on page load to prevent default form post and instead use ajax post to only partial load your pages and aply transition effects.
One last thing, if you have a lot of data to show on page use pagination and sorting at database level, return only the visible content of your page. This will work with and without javascript, and is scalable (with lots of results it becomes unmanageable to it in javascript)