UIkit.pagination is not a function

Question

I am using UIkit Pagination and it didn't work. I know I have UIkit installed in my environment as I'm using the UIkit Modal, uploadDrop, uploadSelect, etc and these are running perfectly.

Here is my HTML for pagination buttons:

<ul id = "PaginateDsData" class="uk-pagination"></ul>

and this is the Javascript:

var pagination = UIkit.pagination($('#PaginateDsData'), {
                    items:100,
                    itemsOnPage:10,
                    displayedPages:10
                /* options */ });

I've been reading the documentation of this dynamic uikit pagination currently at https://getuikit.com/v2/docs/pagination-js.html but I am still unable to run it successfully.

the only thing are needed is the uikit css and uikit.min.js which I already included in my page. — Joshua Fabillar, Feb 16 '17 at 01:42

score 1 · Answer 1 · answered Feb 16 '17 at 09:35

According to UIkit's documentation it requires jQuery. https://getuikit.com/v2/docs/documentation_get-started.html#html-page-markup Also the core UIkit doesn't come with dynamic pagination component. https://getuikit.com/v2/docs/pagination.html#javascript

Here is a working example of dynamic pagination.

var element = document.querySelector('.uk-pagination');
var pagination = UIkit.pagination(element, {
                  items:100,
                  itemsOnPage:10,
                  displayedPages:10
     });

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.css">
</head>
<body>
<ul class="uk-pagination"></ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/pagination.js"></script> 
</body>
</html>

Hope this helps.

UIkit.pagination is not a function

1 Answers1