Jaylen Jaylen - 2 months ago 7
jQuery Question

TypeError: children.size is not a function with jQuery

I found a small plugin that will allow me to add simple pages to my html table.

The first thing I did was to create a new js file and added the following code to it.

(function ($) {

$.fn.SimplePages = function (opts) {
var self = this;

var defaults = {
perPage: 10,
showPrevNext: false,
hidePageNumbers: false
};

var settings = $.extend(defaults, opts);

var listElement = self;
var perPage = settings.perPage;
var children = listElement.children();
var pager = $('.pager');

if (typeof settings.childSelector != "undefined") {
children = listElement.find(settings.childSelector);
}

if (typeof settings.pagerSelector != "undefined") {
pager = $(settings.pagerSelector);
}

var numItems = children.size();
var numPages = Math.ceil(numItems / perPage);

pager.data("curr", 0);

if (settings.showPrevNext) {
$('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
}

var curr = 0;
while (numPages > curr && (settings.hidePageNumbers == false)) {
$('<li><a href="#" class="page_link">' + (curr + 1) + '</a></li>').appendTo(pager);
curr++;
}

if (settings.showPrevNext) {
$('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
}

pager.find('.page_link:first').addClass('active');
pager.find('.prev_link').hide();
if (numPages <= 1) {
pager.find('.next_link').hide();
}
pager.children().eq(1).addClass("active");

children.hide();
children.slice(0, perPage).show();

pager.find('li .page_link').click(function () {
var clickedPage = $(this).html().valueOf() - 1;
goTo(clickedPage, perPage);
return false;
});
pager.find('li .prev_link').click(function () {
previous();
return false;
});
pager.find('li .next_link').click(function () {
next();
return false;
});

function previous() {
var goToPage = parseInt(pager.data("curr")) - 1;
goTo(goToPage);
}

function next() {
goToPage = parseInt(pager.data("curr")) + 1;
goTo(goToPage);
}

function goTo(page) {
var startAt = page * perPage,
endOn = startAt + perPage;

children.css('display', 'none').slice(startAt, endOn).show();

if (page >= 1) {
pager.find('.prev_link').show();
}
else {
pager.find('.prev_link').hide();
}

if (page < (numPages - 1)) {
pager.find('.next_link').show();
}
else {
pager.find('.next_link').hide();
}

pager.data("curr", page);
pager.children().removeClass("active");
pager.children().eq(page + 1).addClass("active");

}
};

}( jQuery ));


Then I am trying to use this plugin like so

$(function () {

$('#UserToClientRelationTable').SimplePages(
{
pagerSelector: '#UserToClientRelationTablePager',
showPrevNext: true,
hidePageNumbers: false,
perPage: 5
});

});


Unfortunately this code keeps giving me the following error in the console


TypeError: children.size is not a function


And, yes I loaded jQuery before loading this file. In face, if I remove this code and the pagination the rest of my code give me no errors.

How can I fix this problem?

Answer

size() was deprecated a long time ago and completely removed from jQuery 3

The norm is to use length property instead

See size() docs

if you are using a version less than 3, then problem is likely elsewhere and we need more info