I use the Pagination.js plugin and I don’t understand how to connect two paginators on one page

At the moment both paginators turn the pages, but when page 5 is active on one paginator, the first page will remain active on the other.

html:

<section class="about-section"> <div class="container"> <div class="row"> <div class="col-12"> <h1>Список документов</h1> </div> <div class="col-12 grey-input"> <input type="text" placeholder="Поиск документа"> <button type="submit" class="input-search-icon"><img src="img/icons/searchInput.svg"></button> </div> </div> <div class="row document-sorting"> <div class="col-2"> <p>Сортировать по:</p> </div> <div class="col-auto"> <p class="document-type">Типу документа</p> </div> <div class="col-auto"> <p class="document-date">Дате</p> </div> <div class="col-auto"> <p class="document-name">Названию</p> </div> <div class="col-lg-3 offset-lg-4"> <div id="pager2" class="pagination"></div> </div> </div> <div class="documents-table"> <div class="row documents-table-name"> <div class="col-12"> <p>Название таблицы</p> </div> </div> <div class="row documents-table-columns"> <div class="col-lg-1"> <p>Тип</p> </div> <div class="col-lg-3"> <p>Название</p> </div> <div class="col-lg-3"> <p>Автор</p> </div> <div class="col-lg-3"> <p>Подразделение</p> </div> <div class="col-lg-1"> <p>Дата</p> </div> </div> <div id="data"></div> </div> <div class="row"> <div class="col-12"> <div id="pager" class="pagination"></div> </div> </div> </div> </section> <section class="all-documents"> <div class="container"> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/doc.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/pdf.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/xls.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/ppt.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/doc.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/doc.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/doc.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/pdf.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/xls.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/ppt.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <div class="col-lg-1"> <img src="img/icons/doc.png"> </div> <div class="col-lg-3"> <p>Длинное название документа в две длинных строки</p> </div> <div class="col-lg-3"> <p>Кудрявцев Николай Николаевич</p> </div> <div class="col-lg-3"> <p>Физтех-школа Аэрокосмических Технологий</p> </div> <div class="col-lg-1"> <p>01.01.19</p> </div> <div class="col-lg-1"> <button><img src="img/icons/downloadDocument.png"></button> </div> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> <div class="row documents-table-document document"> <p>для показа большого количества страниц</p> </div> </div> </section> 

js

 $(function(){ doc = $('.document'); docs = []; $(doc).each(function(index, docBlock) { docs.push(docBlock); }); $("#pager").pagination({ pageSize: 11, pageRange: 1, dataSource: docs, callback: function(data, pagination) { var html = simpleTemplating(data); $('#data').html(html); }, showNavigator: true, className: 'paginationjs-theme-blue paginationjs-small' }); $("#pager2").pagination({ pageSize: 11, pageRange: 1, dataSource: docs, callback: function(data, pagination) { var html = simpleTemplating(data); $('#data').html(html); }, showNavigator: true, className: 'paginationjs-theme-blue paginationjs-small' }); function simpleTemplating(data) { var html = ''; $.each(data, function(index, item){ var content = item.outerHTML; html += content; }); html += ''; return html; } });