Simple pagination with javascript

-
Đơn giản là bạn muốn gọn code.
không can thiệp nhiều ở backend.
Mình có 1 cách là pagging bằng javascript.
Step 1 : khởi tạo các thông số cần thiết.
makePager = function(page){
var show_per_page = 5; // khởi tạo số recored trên trang
var number_of_items = jQuery('.pagination > div').length;
//lấy tổng số element

var number_of_pages = Math.ceil(number_of_items / show_per_page);
// chia xem có bao nhiêu trang
var number_of_pages_to_display = 5; // sô link hiển thị
var navigation_html = '';
var current_page = page; //lấy link page hiện tại
console.log(current_page);
var current_link = (number_of_pages_to_display >= current_page ? 1 :
number_of_pages_to_display + 1);
if (current_page > 1)
current_link = current_page;
if (current_link != 1) navigation_html += "<a class='nextbutton'
href=\"javascript:first();\">« Start&nbsp;</a>&nbsp;<a class='nextbutton'
href=\"javascript:previous();\">« Prev&nbsp;</a>&nbsp;";
if (current_link == number_of_pages - 1) current_link = current_link - 3;

else if (current_link == number_of_pages) current_link = current_link - 4;
else if (current_link > 2) current_link = current_link - 2;
else current_link = 1;
var pages = number_of_pages_to_display;
while (pages != 0) {
if (number_of_pages < current_link) { break; }
if (current_link >= 1)
navigation_html += "<a class='" + ((current_link == current_page) ?
"currentPageButton" : "numericButton") + "'
href=\"javascript:showPage(" + current_link + ")\"
longdesc='" + current_link + "'>" + (current_link) + "</a>&nbsp;";
current_link++;
pages--;
}

if (number_of_pages > current_page){
navigation_html += "<a class='nextbutton' href=\"javascript:next()\">
Next »</a>&nbsp;<a class='nextbutton' href=\"javascript:last(" + number_of_pages + ");\">
Last »</a>";
}
                jQuery('#page_navigation').html(navigation_html);
}

Step 2 : bắt đầu khởi tạo phân trang
var pageSize = 5; //hiển thị bao nhiêu record 1 trang
showPage = function (page) {
$(".pagination > div").hide();
$('#current_page').val(page);
$(".pagination > div").each(function (n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
makePager(page);
}
Step cuối : viết thêm sự kiện cho cácn nút.
next = function () {
new_page = parseInt($('#current_page').val()) + 1;
showPage(new_page);
}
last = function (number_of_pages) {
new_page = number_of_pages;
$('#current_page').val(new_page);
showPage(new_page);
}
first = function () {
var new_page = "1";
$('#current_page').val(new_page);
showPage(new_page);
}
previous = function () {
new_page = parseInt($('#current_page').val()) - 1;
$('#current_page').val(new_page);
showPage(new_page);
}

Toàn bộ code của phần này :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
</head>
<style>
.numericButton
{
background-color: #FFFFFF;
color: #666666;
border: 1px solid #C9C9C9;
display: inline-block;
height: 15px;
line-height: 14px;
min-width: 14px !important;
padding: 4px;
text-align: center;
text-decoration: none;
}
.currentPageButton
{
background-color: #686868;
color: #fff !important;
border: 1px solid #C9C9C9;
display: inline-block;
height: 15px;
line-height: 14px;
min-width: 14px !important;
padding: 4px;
text-align: center;
text-decoration: none;
}
.nextbutton {
background-color: #FFFFFF;
border: 1px solid #C9C9C9;
color: #666666 !important;
display: inline-block;
height: 15px;
line-height: 14px;
padding: 4px;
text-align: center;
text-decoration: none;
width: 55px;
}
#page_navigation{
padding-top:8px;
}


</style>
<body>
<div class="pagination">
<div class="record">1</div>
<div class="record">2</div>
<div class="record">3</div>
<div class="record">4</div>
<div class="record">5</div>
<div class="record">6</div>
<div class="record">7</div>
<div class="record">8</div>
<div class="record">9</div>
<div class="record">10</div>
<div class="record">11</div>
<div class="record">12</div>
<div class="record">13</div>
<div class="record">14</div>
<div class="record">15</div>
<div class="record">16</div>
<div class="record">17</div>
<div class="record">18</div>
<div class="record">19</div>
<div class="record">20</div>
<div class="record">21</div>
<div class="record">22</div>
<div class="record">23</div>
<div class="record">24</div>
<div class="record">25</div>
</div>
<input type="hidden" id="current_page">
<input type="hidden" id="show_per_page">
<div id="page_navigation">

</div>
</body>
<script>
makePager = function(page){
var show_per_page = 5; // khởi tạo số recored trên trang
var number_of_items = jQuery('.pagination > div').length;
//lấy tổng số element
var number_of_pages = Math.ceil(number_of_items / show_per_page);
// chia xem có bao nhiêu trang
var number_of_pages_to_display = 5; // sô link hiển thị
var navigation_html = '';
var current_page = page; //lấy link page hiện tại
var current_link = (number_of_pages_to_display >= current_page ? 1 :
number_of_pages_to_display + 1);
if (current_page > 1)
current_link = current_page;
if (current_link != 1) navigation_html += "<a class='nextbutton'
href=\"javascript:first();\">« Start&nbsp;</a>&nbsp;<a class='nextbutton'
href=\"javascript:previous();\">« Prev&nbsp;</a>&nbsp;";
if (current_link == number_of_pages - 1) current_link = current_link - 3;
else if (current_link == number_of_pages) current_link = current_link - 4;
else if (current_link > 2) current_link = current_link - 2;
else current_link = 1;
var pages = number_of_pages_to_display;
while (pages != 0) {
if (number_of_pages < current_link) { break; }
if (current_link >= 1)
navigation_html += "<a class='" + ((current_link == current_page) ?
"currentPageButton" : "numericButton") + "' href=\"javascript:showPage(" + current_link
+ ")\" longdesc='" + current_link + "'>" + (current_link) + "</a>&nbsp;";
current_link++;
pages--;
}
if (number_of_pages > current_page){
navigation_html += "<a class='nextbutton' href=\"javascript:next()\">
Next »</a>&nbsp;<a class='nextbutton' href=\"javascript:last(" + number_of_pages + ");\">
Last »</a>";
}
                jQuery('#page_navigation').html(navigation_html);
}
var pageSize = 5; //hiển thị bao nhiêu record 1 trang
showPage = function (page) {
$(".pagination > div").hide();
$('#current_page').val(page);
$(".pagination > div").each(function (n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
makePager(page);
}
showPage(1);
next = function () {
new_page = parseInt($('#current_page').val()) + 1;
showPage(new_page);
}
last = function (number_of_pages) {
new_page = number_of_pages;
$('#current_page').val(new_page);
showPage(new_page);
}
first = function () {
var new_page = "1";
$('#current_page').val(new_page);
showPage(new_page);
}
previous = function () {
new_page = parseInt($('#current_page').val()) - 1;
$('#current_page').val(new_page);
showPage(new_page);
}
</script>
</html>
Chúc các bạn thành công có câu hỏi ji cứ comment bên dưới.

Comments

Post a Comment

Bài đăn phổ biến

Tính Bình Phương 1 Số Trong Python

-
     Python là 1 ngôn ngữ rất thông dụng hiện nay nó được xem là 1 máy tính bỏ túi cực kì tiện lợi , sau đây tôi sẽ hướng dẫn cách tính bình phương 1 số trong python       //đầu tiên ta khai báo 1 hàm     def binhPhuong(x):   //def là defile     ' ' '      bình phương là lấy 1 số mủ 2     // dấu ' ' ' là phần trợ giúp trong python muốn sữ dụng trợ giúp ta                                                                chỉ cần gọi lệnh    help(binhPhuong)  enter thì phần trợ giúp sẽ                                                                xuất hện     ' ' '   return  x**2  // 1 dấu * là phép nhân 2 dấu ** là mủ số.   Save chương trình lại và bấm F5 để chạy     muốn tính bình phương số nào ta chỉ cần gọi hàm    binhPhuong(x)  x là 1 số bất kì bạn tự nhập.
Read more

Deploy website lên VPS hoặc Hosting với Gitlab CI/CD

-
Image
  Deploy website lên VPS với Gitlab CI/CD Sau một thời gian code ra được môt trang web xịn xò thì bạn có nhu cầu đưa lên internet để mọi người được biết. Bắt đầu với công việc đầu tiên là tìm mua tên miền, hosting hoặc VPS. Bạn có thể mua VPS tại Hostinger hoặc Vultr,... 1 VPS có thể cài đặt được nhiều trang web. Như vậy sau quá trình chuẩn bị thành công, chúng ta sẽ đẩy code từ local lên hosting, server. Quá trình này khá là mất công. Cách cổ điển hiện nay được nhiều người dùng là dùng FTP, hoặc upload thằng từ các trang quản lý. Đây là công việc khá nhàm chán, tốn thời gian. Khi có một thay đổi nhỏ là phải đi thao tác lại. Chính vì vậy khái niệm CI/CD ra đời. CI/CD là một bộ đôi công việc, bao gồm CI ( Continuous Integration ) và CD ( Continuous Delivery ), ý nói là quá trình tích hợp (integration) thường xuyên, nhanh chóng hơn khi code cũng như thường xuyên cập nhật phiên bản mới (delivery). Có khá nhiều công cụ hỗ trợ CI/CD, nhưng trong phạm vi bài viết chỉ đề cập công cụ CI/CD của
Read more

Đổi tên "READ MORE" trong bài post

-
Nhiều khi bạn không thích chử mặc định trong wordpress nên mình cũng có 1 cái filter để làm việc này nhìn ví dụ bên dưới function vd_readmore(){     return '<a class="read-more" href=" '.  get_permalink( get_the_ID() )  . ' "> ' .__('[Đọc Thêm]', 'textdomain'). ' </a>'; } add_filter('excerpt_more', 'vd_readmore');
Read more

MỞ CAMERA VÀ CHỤP ẢNH BẰNG PHP

-
   Hôm nay mình phát hiện 1 đoạn code hay nói về việc mở camera và chụp ảnh bằng code php nên share cho các bạn.    Nên tạo 1 file .html và bỏ trong folder htdocs nếu bạn sài server là xampp, và bỏ vào folder www nếu bạn sài server là wamp. <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Get User Media - Photo</title> </head> <body> <button id="take">Take a photo</button><br /> <video id="v"></video> <canvas id="canvas" style="display:none;"></canvas> <img src="http://placehold.it/300&text=Your%20image%20here%20..." id="photo" alt="photo"> <script>     ;(function(){         function userMedia(){             return navigator.getUserMedia = navigator.getUserMedia ||             navigator.webkitGetUserMedia ||             navigator.mozGetUserMedia |
Read more