1
0
mirror of synced 2025-03-10 14:46:10 +03:00

document pagination (#3308, #5006)

This commit is contained in:
alexweissman 2017-09-14 13:00:32 -04:00
parent 2a7ddab2ff
commit 2b8f165539

View File

@ -51,14 +51,14 @@ Sometimes, you may need to add additional query parameters to the request. You
``` ```
$('#mySelect2').select2({ $('#mySelect2').select2({
ajax: { ajax: {
url: 'https://api.github.com/search/repositories', url: 'https://api.github.com/orgs/select2/repos',
data: function (params) { data: function (params) {
var query = { var query = {
search: params.term, search: params.term,
page: params.page type: 'public'
} }
// Query parameters will be ?search=[term]&page=[page] // Query parameters will be ?search=[term]&type=public
return query; return query;
} }
} }
@ -99,6 +99,64 @@ To provide default selections, you may include an `<option>` for each selection
To achieve this programmatically, you will need to [create and append a new `Option`](/programmatic-control/add-select-clear-items). To achieve this programmatically, you will need to [create and append a new `Option`](/programmatic-control/add-select-clear-items).
## Pagination
Select2 supports pagination ("infinite scrolling") for remote data sources out of the box. To use this feature, your remote data source must be able to respond to paginated requests (server-side frameworks like [Laravel](https://laravel.com/docs/5.5/pagination) and [UserFrosting](https://learn.userfrosting.com/database/data-sprunjing) have this built-in).
To use pagination, you must tell Select2 to add any necessary pagination parameters to the request by overriding the `ajax.data` setting. The current page to be retrieved is stored in the `params.page` property.
```
$('#mySelect2').select2({
ajax: {
url: 'https://api.github.com/search/repositories',
data: function (params) {
var query = {
search: params.term,
page: params.page || 1
}
// Query parameters will be ?search=[term]&page=[page]
return query;
}
}
});
```
Select2 will expect a `pagination.more` value in the response. The value of `more` should be `true` or `false`, which tells Select2 whether or not there are more pages of results available for retrieval:
```
{
"results": [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2"
}
],
"pagination": {
"more": true
}
}
```
If your server-side code does not generate the `pagination.more` property in the response, you can use `processResults` to generate this value from other information that is available. For example, suppose your API returns a `count_filtered` value that tells you how many total (unpaginated) results are available in the data set. If you know that your paginated API returns 10 results at a time, you can use this along with the value of `count_filtered` to compute the value of `pagination.more`:
```
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.results,
pagination: {
more: (params.page * 10) < data.count_filtered
}
};
}
```
## Rate-limiting requests ## Rate-limiting requests
You can tell Select2 to wait until the user has finished typing their search term before triggering the AJAX request. Simply use the `ajax.delay` configuration option to tell Select2 how long to wait after a user has stopped typing before sending the request: You can tell Select2 to wait until the user has finished typing their search term before triggering the AJAX request. Simply use the `ajax.delay` configuration option to tell Select2 how long to wait after a user has stopped typing before sending the request: