Jquery Ajax分页Next / Prev - 动态数据

时间:2022-12-04 16:10:40

I am new to ajax and also jquery. I am building a search page and that needs to be paged since it will have many records. I found many tutorials where we can do that. But all one which I saw has page numbers on it. I mean if we have like 9 pages,

我是ajax和jquery的新手。我正在构建一个搜索页面,需要进行分页,因为它会有很多记录。我找到了许多教程,我们可以做到这一点。但我看到的所有内容都有页码。我的意思是如果我们有9页,

1 2 3 4 5 6 7 8 9 ...

1 2 3 4 5 6 7 8 9 ...

I may not need something like this but I need like first prev next last and if by chance I can give them a field to enter page number(optional).

我可能不需要这样的东西,但我需要像下一个最后一个prev,如果偶然我可以给他们一个字段来输入页码(可选)。

I am using php mysql and limit to achieve this.

我使用php mysql和limit来实现这一点。

Thanks a lot.

非常感谢。

1 个解决方案

#1


1  

I would recommend that you send your serach request with ajax and have a JSON object returned with a list containing the search hits and some metadata about the search (such as total_hits that states how many hits there are available on the server. This number should be equal or greater than the length of hitlist).

我建议您使用ajax发送serach请求并返回一个JSON对象,其中包含搜索命中列表和一些有关搜索的元数据(例如total_hits,表明服务器上有多少命中。这个数字应该是等于或大于命中列表的长度)。

GET /search?q=<query>

{'hitlist': [...],
 'total_hits': 1234}

The size of the hit-list could be ~3 pages since this is probably the most common hits that the user will see. So for the three first pages you don't need to access the server. This could be done in jQuery on the browser. For more results you could have your server support an optional parameter such as:

命中列表的大小可能是~3页,因为这可能是用户将看到的最常见的命中。因此,对于前三个页面,您无需访问服务器。这可以在浏览器上的jQuery中完成。要获得更多结果,您可以让服务器支持可选参数,例如:

GET /search?q=<query>&limit=20,40

The limit syntax could be the same MySQL's, then you could ask for the 10 last too (just remember to take proper precautions when passing those parameters into your database if you use SQL!)

限制语法可以是相同的MySQL,然后你也可以要求最后10个(只要记住在将这些参数传递到数据库时采取适当的预防措施,如果你使用SQL!)

So for the pagination look on the browser you could determine how it should look like from the total_hits value. If there are few you don't need pagination and if there are super many you could settle with just a next button. All results could be showed in a and if you want any fancy pagination effects you could take a look at http://sorgalla.com/projects/jcarousel/ .

因此,对于浏览器上的分页外观,您可以从total_hits值确定它的外观。如果很少,你不需要分页,如果有很多,你可以只用下一个按钮。所有结果都可以在a中显示,如果你想要任何花哨的分页效果,你可以看看http://sorgalla.com/projects/jcarousel/。

#1


1  

I would recommend that you send your serach request with ajax and have a JSON object returned with a list containing the search hits and some metadata about the search (such as total_hits that states how many hits there are available on the server. This number should be equal or greater than the length of hitlist).

我建议您使用ajax发送serach请求并返回一个JSON对象,其中包含搜索命中列表和一些有关搜索的元数据(例如total_hits,表明服务器上有多少命中。这个数字应该是等于或大于命中列表的长度)。

GET /search?q=<query>

{'hitlist': [...],
 'total_hits': 1234}

The size of the hit-list could be ~3 pages since this is probably the most common hits that the user will see. So for the three first pages you don't need to access the server. This could be done in jQuery on the browser. For more results you could have your server support an optional parameter such as:

命中列表的大小可能是~3页,因为这可能是用户将看到的最常见的命中。因此,对于前三个页面,您无需访问服务器。这可以在浏览器上的jQuery中完成。要获得更多结果,您可以让服务器支持可选参数,例如:

GET /search?q=<query>&limit=20,40

The limit syntax could be the same MySQL's, then you could ask for the 10 last too (just remember to take proper precautions when passing those parameters into your database if you use SQL!)

限制语法可以是相同的MySQL,然后你也可以要求最后10个(只要记住在将这些参数传递到数据库时采取适当的预防措施,如果你使用SQL!)

So for the pagination look on the browser you could determine how it should look like from the total_hits value. If there are few you don't need pagination and if there are super many you could settle with just a next button. All results could be showed in a and if you want any fancy pagination effects you could take a look at http://sorgalla.com/projects/jcarousel/ .

因此,对于浏览器上的分页外观,您可以从total_hits值确定它的外观。如果很少,你不需要分页,如果有很多,你可以只用下一个按钮。所有结果都可以在a中显示,如果你想要任何花哨的分页效果,你可以看看http://sorgalla.com/projects/jcarousel/。