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é.

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

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ả.

About the author

Minh CRISTIANO
Blog tổng hợp và chia sẻ những những kiến thức, tài liệu học tập mà mình sưu tầm được. Hi vọng sẽ có ích cho mọi người, rất mong mọi người ủng hộ. Các bạn muốn tham gia đóng góp bài viết trên trang, vui lòng liên hệ mình nhé. Xin cảm ơn!

Đăng nhận xét

MỘT SỐ LƯU Ý KHI BÌNH LUẬN
- Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem Nội quy)
- Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời
- Để bình luận kèm hình ảnh, bạn hãy vào trang Upload ảnh sau đó kéo thả để upload hình ảnh lên.
- Không spam trong khung bình luận, hạn chế viết tắt..