Thông báo: Chúng tôi luôn cần có thêm những thành viên sáng tạo, chuyên nghiệp và sẵn sàng cháy hết mình với công việc! Tham gia

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

Đọc thêm :
Đánh Giá Bài Viết:
Khi tôi là chính bản thân mình, tôi hạnh phúc và có kết quả tốt !

Đăng nhận xét