Skip to content

Commit 09e3a76

Browse files
kevin-brownkevin-brown
committed
Added pagination support for AJAX results
I'm still not quite sure how this should be handled for the general case, but for the special case we have this for infinite scrolling, only on AJAX data.
1 parent f1e8647 commit 09e3a76

9 files changed

Lines changed: 91 additions & 43 deletions

File tree

‎dist/js/select2.amd.full.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2494,7 +2494,7 @@ define('select2/data/ajax',[
24942494
var $request = $.ajax(options);
24952495

24962496
$request.success(function (data) {
2497-
var results = self.processResults(data);
2497+
var results = self.processResults(data, params);
24982498

24992499
callback(results);
25002500
});
@@ -2860,14 +2860,18 @@ define('select2/dropdown/infiniteScroll',[
28602860

28612861
InfiniteScroll.prototype.append = function (decorated, data) {
28622862
this.$loadingMore.remove();
2863+
this.loading = false;
28632864

2864-
decorated.call(this, data);
2865+
if ($.isArray(data)) {
2866+
decorated.call(this, data);
2867+
return;
2868+
}
2869+
2870+
decorated.call(this, data.results);
28652871

2866-
if (data.length > 0) {
2872+
if (this.showLoadingMore(data)) {
28672873
this.$results.append(this.$loadingMore);
28682874
}
2869-
2870-
this.loading = false;
28712875
};
28722876

28732877
InfiniteScroll.prototype.bind = function (decorated, container, $container) {
@@ -2886,12 +2890,12 @@ define('select2/dropdown/infiniteScroll',[
28862890
});
28872891

28882892
this.$results.on('scroll', function () {
2889-
var loadMoreVisible = $.contains(
2893+
var isLoadMoreVisible = $.contains(
28902894
document.documentElement,
28912895
self.$loadingMore[0]
28922896
);
28932897

2894-
if (self.loading || !loadMoreVisible) {
2898+
if (self.loading || !isLoadMoreVisible) {
28952899
return;
28962900
}
28972901

@@ -2916,6 +2920,10 @@ define('select2/dropdown/infiniteScroll',[
29162920
this.trigger('query:append', params);
29172921
};
29182922

2923+
InfiniteScroll.prototype.showLoadingMore = function (_, data) {
2924+
return data.pagination && data.pagination.more;
2925+
};
2926+
29192927
InfiniteScroll.prototype.createLoadingMore = function () {
29202928
var $option = $(
29212929
'<li class="option load-more" role="treeitem"></li>'

‎dist/js/select2.amd.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2494,7 +2494,7 @@ define('select2/data/ajax',[
24942494
var $request = $.ajax(options);
24952495

24962496
$request.success(function (data) {
2497-
var results = self.processResults(data);
2497+
var results = self.processResults(data, params);
24982498

24992499
callback(results);
25002500
});
@@ -2860,14 +2860,18 @@ define('select2/dropdown/infiniteScroll',[
28602860

28612861
InfiniteScroll.prototype.append = function (decorated, data) {
28622862
this.$loadingMore.remove();
2863+
this.loading = false;
28632864

2864-
decorated.call(this, data);
2865+
if ($.isArray(data)) {
2866+
decorated.call(this, data);
2867+
return;
2868+
}
2869+
2870+
decorated.call(this, data.results);
28652871

2866-
if (data.length > 0) {
2872+
if (this.showLoadingMore(data)) {
28672873
this.$results.append(this.$loadingMore);
28682874
}
2869-
2870-
this.loading = false;
28712875
};
28722876

28732877
InfiniteScroll.prototype.bind = function (decorated, container, $container) {
@@ -2886,12 +2890,12 @@ define('select2/dropdown/infiniteScroll',[
28862890
});
28872891

28882892
this.$results.on('scroll', function () {
2889-
var loadMoreVisible = $.contains(
2893+
var isLoadMoreVisible = $.contains(
28902894
document.documentElement,
28912895
self.$loadingMore[0]
28922896
);
28932897

2894-
if (self.loading || !loadMoreVisible) {
2898+
if (self.loading || !isLoadMoreVisible) {
28952899
return;
28962900
}
28972901

@@ -2916,6 +2920,10 @@ define('select2/dropdown/infiniteScroll',[
29162920
this.trigger('query:append', params);
29172921
};
29182922

2923+
InfiniteScroll.prototype.showLoadingMore = function (_, data) {
2924+
return data.pagination && data.pagination.more;
2925+
};
2926+
29192927
InfiniteScroll.prototype.createLoadingMore = function () {
29202928
var $option = $(
29212929
'<li class="option load-more" role="treeitem"></li>'

‎dist/js/select2.full.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12029,7 +12029,7 @@ define('select2/data/ajax',[
1202912029
var $request = $.ajax(options);
1203012030

1203112031
$request.success(function (data) {
12032-
var results = self.processResults(data);
12032+
var results = self.processResults(data, params);
1203312033

1203412034
callback(results);
1203512035
});
@@ -12395,14 +12395,18 @@ define('select2/dropdown/infiniteScroll',[
1239512395

1239612396
InfiniteScroll.prototype.append = function (decorated, data) {
1239712397
this.$loadingMore.remove();
12398+
this.loading = false;
1239812399

12399-
decorated.call(this, data);
12400+
if ($.isArray(data)) {
12401+
decorated.call(this, data);
12402+
return;
12403+
}
12404+
12405+
decorated.call(this, data.results);
1240012406

12401-
if (data.length > 0) {
12407+
if (this.showLoadingMore(data)) {
1240212408
this.$results.append(this.$loadingMore);
1240312409
}
12404-
12405-
this.loading = false;
1240612410
};
1240712411

1240812412
InfiniteScroll.prototype.bind = function (decorated, container, $container) {
@@ -12421,12 +12425,12 @@ define('select2/dropdown/infiniteScroll',[
1242112425
});
1242212426

1242312427
this.$results.on('scroll', function () {
12424-
var loadMoreVisible = $.contains(
12428+
var isLoadMoreVisible = $.contains(
1242512429
document.documentElement,
1242612430
self.$loadingMore[0]
1242712431
);
1242812432

12429-
if (self.loading || !loadMoreVisible) {
12433+
if (self.loading || !isLoadMoreVisible) {
1243012434
return;
1243112435
}
1243212436

@@ -12451,6 +12455,10 @@ define('select2/dropdown/infiniteScroll',[
1245112455
this.trigger('query:append', params);
1245212456
};
1245312457

12458+
InfiniteScroll.prototype.showLoadingMore = function (_, data) {
12459+
return data.pagination && data.pagination.more;
12460+
};
12461+
1245412462
InfiniteScroll.prototype.createLoadingMore = function () {
1245512463
var $option = $(
1245612464
'<li class="option load-more" role="treeitem"></li>'

‎dist/js/select2.full.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/select2.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2922,7 +2922,7 @@ define('select2/data/ajax',[
29222922
var $request = $.ajax(options);
29232923

29242924
$request.success(function (data) {
2925-
var results = self.processResults(data);
2925+
var results = self.processResults(data, params);
29262926

29272927
callback(results);
29282928
});
@@ -3288,14 +3288,18 @@ define('select2/dropdown/infiniteScroll',[
32883288

32893289
InfiniteScroll.prototype.append = function (decorated, data) {
32903290
this.$loadingMore.remove();
3291+
this.loading = false;
32913292

3292-
decorated.call(this, data);
3293+
if ($.isArray(data)) {
3294+
decorated.call(this, data);
3295+
return;
3296+
}
3297+
3298+
decorated.call(this, data.results);
32933299

3294-
if (data.length > 0) {
3300+
if (this.showLoadingMore(data)) {
32953301
this.$results.append(this.$loadingMore);
32963302
}
3297-
3298-
this.loading = false;
32993303
};
33003304

33013305
InfiniteScroll.prototype.bind = function (decorated, container, $container) {
@@ -3314,12 +3318,12 @@ define('select2/dropdown/infiniteScroll',[
33143318
});
33153319

33163320
this.$results.on('scroll', function () {
3317-
var loadMoreVisible = $.contains(
3321+
var isLoadMoreVisible = $.contains(
33183322
document.documentElement,
33193323
self.$loadingMore[0]
33203324
);
33213325

3322-
if (self.loading || !loadMoreVisible) {
3326+
if (self.loading || !isLoadMoreVisible) {
33233327
return;
33243328
}
33253329

@@ -3344,6 +3348,10 @@ define('select2/dropdown/infiniteScroll',[
33443348
this.trigger('query:append', params);
33453349
};
33463350

3351+
InfiniteScroll.prototype.showLoadingMore = function (_, data) {
3352+
return data.pagination && data.pagination.more;
3353+
};
3354+
33473355
InfiniteScroll.prototype.createLoadingMore = function () {
33483356
var $option = $(
33493357
'<li class="option load-more" role="treeitem"></li>'

‎dist/js/select2.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/examples.html‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -745,11 +745,19 @@ <h2>Example code</h2>
745745
page: params.page
746746
};
747747
},
748-
processResults: function (data, page) {
749-
// parse the results into the format expected by Select2.
748+
processResults: function (data, params) {
749+
// parse the results into the format expected by Select2
750750
// since we are using custom formatting functions we do not need to
751-
// alter the remote JSON data
752-
return data.items;
751+
// alter the remote JSON data, except to indicate that infinite
752+
// scrolling can be used
753+
params.page = params.page || 1;
754+
755+
return {
756+
results: data.items,
757+
pagination: {
758+
more: (params.page * 30) < data.total_count
759+
}
760+
};
753761
},
754762
cache: true
755763
},

‎src/js/select2/data/ajax.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ define([
4444
var $request = $.ajax(options);
4545

4646
$request.success(function (data) {
47-
var results = self.processResults(data);
47+
var results = self.processResults(data, params);
4848

4949
callback(results);
5050
});

‎src/js/select2/dropdown/infiniteScroll.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,18 @@ define([
1212

1313
InfiniteScroll.prototype.append = function (decorated, data) {
1414
this.$loadingMore.remove();
15+
this.loading = false;
16+
17+
if ($.isArray(data)) {
18+
decorated.call(this, data);
19+
return;
20+
}
1521

16-
decorated.call(this, data);
22+
decorated.call(this, data.results);
1723

18-
if (data.length > 0) {
24+
if (this.showLoadingMore(data)) {
1925
this.$results.append(this.$loadingMore);
2026
}
21-
22-
this.loading = false;
2327
};
2428

2529
InfiniteScroll.prototype.bind = function (decorated, container, $container) {
@@ -38,12 +42,12 @@ define([
3842
});
3943

4044
this.$results.on('scroll', function () {
41-
var loadMoreVisible = $.contains(
45+
var isLoadMoreVisible = $.contains(
4246
document.documentElement,
4347
self.$loadingMore[0]
4448
);
4549

46-
if (self.loading || !loadMoreVisible) {
50+
if (self.loading || !isLoadMoreVisible) {
4751
return;
4852
}
4953

@@ -68,6 +72,10 @@ define([
6872
this.trigger('query:append', params);
6973
};
7074

75+
InfiniteScroll.prototype.showLoadingMore = function (_, data) {
76+
return data.pagination && data.pagination.more;
77+
};
78+
7179
InfiniteScroll.prototype.createLoadingMore = function () {
7280
var $option = $(
7381
'<li class="option load-more" role="treeitem"></li>'

0 commit comments

Comments
 (0)