How to enable paging without Ajax, select2 4.0.0

[sergio...@gmail.com]

HI I am having an issue with paging, cant seem to get it working with 4.0.0, the same way as for 3.5.2. Right now I have the following code but the page param is missing don´t know from where to get it. Also there are no examples on the page, any suggestions?

$(document).ready(function() {
$(".js-example-basic-single").select2();



// It requires this type of function in order to make the correct callback
$.fn.select2.amd.require(
['select2/data/array', 'select2/utils'],
function (ArrayData, Utils) {
function CustomData ($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
}

// need to extend the utils functionallity in order to pas our customData function
Utils.Extend(CustomData, ArrayData);

// CustomData.prototype.current = function (callback) {

// var data = [];
// var currentVal = this.$element.val();



// for (var v = 0; v < currentVal.length; v++) {
// data.push({
// id: currentVal[v],
// text: currentVal[v]
// });
// }

// callback(data);

// };


CustomData.prototype.query = function (params, callback) {
// var data = { results: []};

// data.results = this.options.options.data;
// var filtered = _.filter(data.results, function(dati){

// if(dati.text.indexOf(params.term)>-1)
// {
// return dati;
// }
// });

// data = {results: filtered};
// callback(data);




var pageSize,
results;
pageSize = 250; // or whatever pagesize
results = [];
if (params.term && params.term !== "") {

results = _.filter(this.options.options.data, function (e) {
return (e.text.toUpperCase().indexOf(params.term.toUpperCase()) >= 0);
});
}
else if (params.term === "") {
results = this.options.options.data;
}

callback({
results: results.slice((this.page - 1) * pageSize, this.page * pageSize),
more : results.length >= this.page * pageSize
});


};

// Shuffles a string to create different data
var shuffle = function (str) {
return str.split('').sort(function () {
return 0.5 - Math.random();
}).join('');
};

// creates 201 ddl items
var mockData = function () {
var array = _.map(_.range(1, 2000), function (i) {
return {
id : i,
text: shuffle('a')+ i
};
});
return array;
};

// create demo data
var dummyData = mockData();


$("#JobPosition").select2({
data: dummyData,
dataAdapter: CustomData, params: {this}
});
});
});

[Kevin Brown]

There have been a few changes in how pagination works in Select2 4.0.0, most notably the fact that `more` is now under the `pagination` object in `processResults` (previously `response`).

This is also handled with the `InfiniteScroll` decorator [1] on the `dropdownAdapter`, which is what is used for AJAX by default.

If you have a more specific example (this one appears to be a bit... broken), can you include a link to a jsbin with it?

[1]: https://github.com/select2/select2/blob/34224604880875a47e5f6e4b5cc3bfe2e01f7b4b/src/js/select2/dropdown/infiniteScroll.js

--
You received this message because you are subscribed to the Google Groups "select2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
To post to this group, send email to sel...@googlegroups.com.
Visit this group at http://groups.google.com/group/select2.
For more options, visit https://groups.google.com/d/optout.

[p.e.fl...@gmail.com]

I would be interested in an answer to question in the title "How to enable paging without Ajax, select2 4.0.0". What about something like this?

$.fn.select2.amd.require(
['select2/data/array', 'select2/utils'],
function (ArrayData, Utils) {
function CustomData($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
}

function contains(str1, str2) {
return new RegExp(str2, "i").test(str1);
}

Utils.Extend(CustomData, ArrayData);

CustomData.prototype.query = function (params, callback) {

var pageSize = 50;
var data = {
results:this.$element.children().map(function(i, elem) {
if (contains(elem.innerText, params.term)) {
return {
id:[elem.innerText, i].join(""),
text:elem.innerText
};
}
})
};
// Get a page sized slice of data from the results of filtering the data set.
callback({
results:data.results.slice((params.page||1 - 1) * pageSize, params.page||1 * pageSize),
more:data.results.length >= params.page * pageSize
});
};

$("#select").select2({
dataAdapter:CustomData
});
});

[p.e.fl...@gmail.com]

Got a good answer over here:

http://stackoverflow.com/a/33145366/152640
http://jsfiddle.net/wphqwvLf/50/

Looks like you can include an empty ajax option to enable infinite scrolling.

// https://select2.github.io/announcements-4.0.html#query-to-data-adapter
// https://select2.github.io/options.html#dataAdapter
// http://embed.plnkr.co/sUt9zi

$.fn.select2.amd.require(
['select2/data/array', 'select2/utils'],
function (ArrayData, Utils) {
function CustomData($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
}

function contains(str1, str2) {
return new RegExp(str2, "i").test(str1);
}

Utils.Extend(CustomData, ArrayData);

CustomData.prototype.query = function (params, callback) {

if (!("page" in params)) {
params.page = 1;
}
var pageSize = 50;
var results = this.$element.children().map(function(i, elem) {

if (contains(elem.innerText, params.term)) {
return {
id:[elem.innerText, i].join(""),
text:elem.innerText
};
}
});

callback({
results:results.slice((params.page - 1) * pageSize, params.page * pageSize),
pagination:{
more:results.length >= params.page * pageSize
}
});
};

$("#select").select2({
ajax:{},
allowClear:true,
width:"element",
dataAdapter:CustomData
});
});

[david....@gracemediaweb.com]

Looks like that code doesn't allow searching though.

[p.e.fl...@gmail.com]

On Wednesday, November 4, 2015 at 7:44:28 PM UTC-5, david....@gracemediaweb.com wrote:
> Looks like that code doesn't allow searching though.

True... thats why I added another answer to that question that shows how to keep search intact ;-)

http://stackoverflow.com/a/33174942/152640

[adi...@gmail.com]

based on p.e.fl answer,
but using lodash rather than parsing dom with jquery :

https://jsfiddle.net/frozen0k/zrmmhycx/