Pagination fails if the list container doesn't have an ID

[sawyerh]

If the list container doesn't have an ID attribute, pagination will fail with the following error:

Uncaught TypeError: Cannot read property 'clear' of undefined list.js?body=1:862

this.clear = function() {
        self.templater.clear();  // fails here
        self.items = [];
        return self;
};

This works:

<ul class="my-list" id="blahblah">
</ul>

<script>
var listEl = document.querySelector('.my-list');

new List(listEl, {
      valueNames: ['name'],
      page: 5,
      plugins: [ListPagination()]
 });
</script>

This doesn't work:

<ul class="my-list">
</ul>

<script>
var listEl = document.querySelector('.my-list');

new List(listEl, {
      valueNames: ['name'],
      page: 5,
      plugins: [ListPagination()]
 });
</script>

[cagen]

+1

It seems in the init function, pagingList is initialized by using the listContainer's id, which is not exist in that case. I use the listContainer element itself to setup the List object instead, which seem to work fine.

// setup the pagingList by using the element itself
pagingList = new List(list.listContainer, {
    listClass: options.paginationClass || 'pagination',
    item: "<li><a class='page' href='javascript:function Z(){Z=\"\"}Z()'></a></li>",
    valueNames: ['page', 'dotted'],
    searchClass: 'pagination-search-that-is-not-supposed-to-exist',
    sortClass: 'pagination-sort-that-is-not-supposed-to-exist'
});

[sawyerh]

Safe to say this isn't getting fixed

[fedulovivan]

+1, also faced with the same issue. Pagination plugin works ok when target list passed to List constructor as id string and does not working when target is passed as DOM element.