пагинация pagination.js
Помогите пожалуйста разобраться с пагинацией, которая построена средствами плагина pagination.js. Среди кода инициализации, есть function simpleTemplating(), не могу понять, как туда запихать инициализацию записей, и туда ли нужно вообще? Приведу весь код. В данном варианте, вместо записей отображаются цифры. Но вместо цифр нужно тобразить приведенные в коде записи. Надеюсь на вашу помочь. Спасибо.
$(document).ready(function () {
var sources = function () {
var result = [];
for (var i = 1; i < $('.middle_content_news_content_block_item').length + 1; i++) {
result.push(i);
}
return result;
}();
function simpleTemplating(data) {
var html = '<ul>';
$.each(data, function(index, item){
html += '<li>'+ item +'</li>';
});
html += '</ul>';
return html;
}
$('.middle_content_blog_content_blocks_content').pagination({
dataSource: sources,
pageSize: 10,
callback: function(data, pagination) {
var html = simpleTemplating(data);
$('.middle_content_blog_content_blocks_content .newsflash').html(html);
}
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.js"></script>
<div class="middle_content_blog_content">
<div class="middle_content_blog_content_blocks">
<div class="middle_content_blog_content_blocks_content"><span class="search_notfound_message"> По Вашему запросу ничего не найдено </span>
<div class="middle_content_blog_content_blocks_content_block"> <div class="moduletable">
<div class="newsflash">
<div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/7a6fe08027b80ee08bda1ed60d73e334_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
01.05.2020</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text1 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text11</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/image1.png" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
30.01.2020</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text2 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text22</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/image3.png" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
07.03.2019</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text3 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text33</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/d722f2a14a84b7ad8053262f61a6106b_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
29.03.2018</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text4 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text44</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/blog/938a195f8810cb9b31c6503221891897_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
17.02.2018</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="/blog?view=article&id=37:bmw-20i-v-28i&catid=22">
text5 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text55</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/948378d6a67ac0d7c7c6728581b072ab_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
17.02.2018</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text6 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text66</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/73608782f50eb6af17bb69bdcd662692_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
17.02.2018</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text7 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text77</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/048731097de322302aff7e52151c991d_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
17.02.2018</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text8 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text88</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/d6e7bc44feb1613d041d5385e5745b10_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
17.02.2018</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text9 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text99</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/75b44b0e9c2e5d305fa323c6c51d3476_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
24.05.2017</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text10 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text1010</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/c1011ef61ed9937904f4938c63d014ea_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
22.05.2017</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text11 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text1111</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/063ee9aeb9f60efa02823e51450f82ce_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
08.05.2017</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text12 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text1212</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/63503204d18160dd6a733e989b70c404_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
26.04.2017</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text13 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text1313</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/e44a6f32e15cb53ee479b2697e759e2e_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
31.03.2017</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text14 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text1414</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> <div class="middle_content_news_content_block_item">
<figure class="newsflash-image">
<img src="/images/e9c724eeb5636d1c1c1a2c2e85d40377_M.jpg" alt="">
</figure>
<div class="middle_content_news_content_block_item_other">
<div class="middle_content_news_content_block_item_date">
11.12.2014</div>
<div class="middle_content_news_content_block_item_title">
<h4 class="newsflash-title">
<a href="">
text15 </a>
</h4>
</div>
<div class="middle_content_news_content_block_item_text">
<p>text1515</p>
</div>
<a class="readmore" href="">Подробнее...</a></div>
</div> </div>
</div>
</div>
</div>
<div class="moduletable">
</div>
</div>
</div>