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?

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?

• javascript
• jquery

2 Answers 2

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

use length returns the number of matched elements: https://api.jquery.com/length/

var numItems = children.length;