Tạo phân trang cho Median UI (Split post)

 

Với những bài viết quá dài hoặc bạn muốn phân chia thành từng bài, từng mục. Ví dụ như 1 bài học gồm có 5 phần, 1 câu chuyện có 4 phần... Thì hãy sử dụng tính năng phân trang hay còn gọi là Split post.

Hãy chuyển qua trang 2 để lấy code nhé.

Có 1 lưu ý đó chính là các nội dung phải được nằm trong thẻ <div id='postSplit'>, các trang được phân với nhau bằng đoạn <!--nextpage-->. Ngoài ra các nội dung nằm ở bên ngoài thì sẽ lỗi không hoạt động nhé.

<div id='postSplit'>
Nội dung trang 1
  
<!--nextpage-->
Nội dung trang 2
  
<!--nextpage-->
Nội dung trang 3
</div> 

<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', function() {function checkChildren(nodes, elemId){for(i=0;i<nodes.length;i++){if(nodes[i].id==elemId){return nodes[i];}else{return checkChildren(nodes[i].children, elemId);}}} function isNumeric(value) {var type = typeof value; return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));} var nodes = document.querySelector('div.postBody').children; var splitdong = checkChildren(nodes, 'postSplit').innerHTML; var content = splitdong.split('<!--nextpage-->'); var url = window.location.href; var url = url.split('?page='); var no = url[1] + '&m=4'; var no = no.split('m'); var no = no[0]; var no = no.replace('&', ''); var url = url[0]; var i = 1; if( !isNumeric(no) ){var no = 1;} document.getElementById('postSplit').innerHTML = content[no-1]; if( content.length > 1 ) {document.getElementById('postSplit').innerHTML += "<div class='blogPg' id='postPager'><span class='page current'>Trang:</span></div>";} if( no>1 ){document.getElementById('postPager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('postPager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+nn+"'>Next</a>";} }); /*]]>*/</script>

Hết rồi, trang thứ 3 chỉ là demo thôi không có gì cả.