Ajax Pagination

I am going to write an Ajax pagination code by myself using jQuery and css . Can you suggest me an algorithm or steps to complete that code successf开发者_JAVA百科ully.

This is how I did it for one of my old project.

1. Create a html table and a set of "li"s with relevant page numbers ( you have to calculate the number of pages to display according to the number of rows matching to the search value in the database).

2. I wrote a function to send jquery ajax request with Search text value, result set start index and number of rows per page. Replace the existing search table data ( + pagination li set) with response data returned from the server.

3. Then bind above function to the click event of the set of "li"s I have mentioned in the first point. ( result set start index and number of rows depends on the clicked li element. )

4. In the server side, Query the database for selected result set range. SELECT * FROM my TABLE WHERE search_field = 'SEARCH_VALUE%' LIMIT START_INDEX_FOR_RESULT_SET , NUMBER_OF_ROWS_PER_PAGE

Create HTML structure of the search result table and navigation "li"s and send it as the response for the ajax request. See step 2 for what will happen to this generated html content.

I'm not sure what web framework you're using, but Ryan Bates' of Railscasts did a screencast of doing exactly this with jQuery. It's episode 174, Pagination with AJAX. Should give you a good starting point.