10/10/2018, 13:18

Làm sao phân trang trong HTML ?

Mình muốn lưu nội dung tất cả các tiêu đề vào 1 file YY nào đó, và quy định 1 trang sẽ hiển thị 10 tiêu đề. Khi thêm ?pages=X vào sau địa chỉ trang web, trong đó X là số trang.
Ví dụ: domain. com /kienthuctieudung. html?pages=3
thì nội dung trang sẽ chỉ hiện thị các tiêu đề thuộc trang 3 trong file YY
Vậy phải làm thế nào?
Mình thấy trang này cũng làm được trên HTML bằng JavaScript: informatik. uni-leipzig. de /~duc/amlich/menu. html
Ví dụ: informatik. uni-leipzig. de/~duc/amlich/menu. html?yy=2013&mm=10

Xin cho hỏi cách thực hiện thế nào?
Vui lòng thêm www và xóa khoảng trắng sau các dấu chấm, Sory vì mình ko post link được.

Vô Thin viết 15:31 ngày 10/10/2018

Bạn hiểu sai bản chất của việc phân trang mấy rồi. Nếu chỉ HTML không thôi, bạn nên dùng Ajax và nội dung lưu bằng JSON hoặc XML. Việc truyền biến vào như ở trang Âm lịch trên thì bạn đọc bằng JavaScript được mà (nên sử dụng thư viện jQuery cho dễ thao tác) với đoạn code gần như sau:

Code:

$.get(
    "mypage.php",
    {paramOne : 1, paramX : 'yy'},
    function(mycontent) {
       document.getElementById('divContent').innerHTML = mycontent;
    }
);

demenntk viết 15:30 ngày 10/10/2018

Được gửi bởi superthin

Bạn có thể chỉ rõ thêm giúp mình không? Cho mình xin các file demo.
Lưu ý là mình viết web HTML, Mình không rành Ajax và jQuery
Thanks

mucor viết 15:29 ngày 10/10/2018

Code:

<html>
<head>
  <style>
.pagelist {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px silver;
}
.pagelist .page {
  padding: 2px 5px 2px 5px;
  border: solid 1px teal;
  color: black;
  text-decoration: none;
}
.pagelist .curpage {
  padding: 2px 5px 2px 5px;
  border: solid 1px silver;
  color: teal;
  text-decoration: none;
}
.pane {
  display: none;
}
  </style>
  <script>
function loadpage() {
  var loc = getParameter('page');
  var tag = document.getElementById('P' + loc);
  if (tag == null) {
    tag = document.getElementById('P1');
  }
  tag.style.display = 'block';
  tag = document.getElementById('N' + loc);
  if (tag == null) {
    tag = document.getElementById('N1');
  }
  tag.className = 'curpage';
}
function getParameter(name) {
  var loc = location + '';
  var pos = loc.indexOf('?');
  if (pos < 0) return '';
  loc = loc.substring(pos + 1);
  pos = loc.indexOf(name + '=');
  if (pos < 0) return '';
  loc = loc.substring(pos + name.length + 1);
  pos = loc.indexOf('&');
  if (pos >= 0) {
    loc = loc.substring(0, pos);
  }
  return loc;
}
  </script>
</head>
<body onload="loadpage()">
 <div class="pagelist">
   <a id="N1" href="?page=1" class="page">1</a>
   <a id="N2" href="?page=2" class="page">2</a>
   <a id="N3" href="?page=3" class="page">3</a>
 </div>
 <ul id="P1" class="pane">
  <li><a href="http://lucene.apache.org/core/">Apache Lucene - Apache Lucene Core</a></li>
  <li><a href="http://lucene.apache.org/">Apache Lucene - Welcome to Apache Lucene</a></li>
  <li><a href="http://lucene.apache.org/solr/">Apache Lucene - Apache Solr</a></li>
 </ul>
 <ul id="P2" class="pane">
  <li><a href="http://incubator.apache.org/lucene.net/">Apache Lucene.Net</a></li>
  <li><a href="http://en.wikipedia.org/wiki/Lucene">Lucene - Wikipedia, the free encyclopedia</a></li>
  <li><a href="http://www.lucenetutorial.com/lucene-in-5-minutes.html">Lucene in 5 minutes - Lucene Tutorial.com</a></li>
 </ul>
 <ul id="P3" class="pane">
  <li><a href="http://www.javaranch.com/journal/2004/04/Lucene.html">Lucene</a></li>
  <li><a href="http://www.javaworld.com/jw-09-2000/jw-0915-lucene.html">The Lucene search engine: Powerful, flexible, and free - JavaWorld</a></li>
  <li><a href="">rnewson/couchdb-lucene · GitHub</a></li>
 </ul>
</body>
</html>

demenntk viết 15:27 ngày 10/10/2018

Hay quá, thanks mucor nhiều

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

demenntk

0 chủ đề

0 bài viết

Tác giả nổi bật