I want to use the jquery pagination plugin from pagination.js.org. I used the following code to include this plugin.

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.0.7/pagination.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>

And this is the HTML code.

<div class="container">
    <div class="row">
        <div class="data-container"></div>
        <div class="pagination-container"></div>
    </div>
</div>

Then I created pagination in another javascript file.

function template(data) {
    let html = '<ul>';
    $.each(data, function(index, item){
        html += '<li>'+ item +'</li>';
    });
    html += '</ul>';
    return html;
}

$(document).ready(function() {
    $('.pagination-container').pagination({
        dataSource: [1, 2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5, 6, 7, 100],
        callback: function(data, pagination) {
      // template method of yourself
      let html = template(data);
      $('.data-container').html(html);
    }
  });
});

But javascript error occurred when execution.

teachers.js:11 Uncaught TypeError: $(...).pagination is not a function
    at HTMLDocument.<anonymous> (teachers.js:11)
    at i (jquery-2.2.4.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.2.4.min.js:2)
    at Function.ready (jquery-2.2.4.min.js:2)
    at HTMLDocument.J (jquery-2.2.4.min.js:2)

It acts like the library was not loaded properly but I cannot figure it out.