页面性能问题

I have a web page with employee records. In that page, there is a pagination. Each page has 10 rows of data. I am thinking to implement the pagination in either of two ways.

1. I am planning to make an ajax call for every 20 pages. So that whenever i make an Ajax call i will get 200 rows of data in my page. I will show or hide the data when i click on pagination. After 20th page, again i will make one more Ajax call to get another 200 rows of data and i will have that data in my page and again i will do show/hide to show the page content and so on.
2. I will make an Ajax call on every page click to get 10 rows of data.

I am not sure which method to choose. If i implement the first method, it might impact page performance. If i choose second option, the number of AJAX calls will be more.

Pls suggest the best one among these two.

Another approach would be to silently pre-fetch the next/prev page. eg. if the user is on page 3, silently pre-fetch page 4 (and page 2), so that when the user clicks on 'next page' the information is most likely there already.

Some care in race conditions needs to be taken with this approach, so that if the user clicks on 'next page' before the results from pre-fetch is returned, you do not make yet another duplicate call, but just spin/wait for the pre-fetch.