Làm thế nào để bạn thêm số trang vào một bảng?

Đoạn mã JavaScript này giúp bạn tạo phân trang bảng đơn giản. Nó cho phép bạn xác định các hàng của bảng trên mỗi trang và tạo phân trang tương ứng. Bạn cần tạo một phần tử bảng HTML với các hàng và cột, sau đó plugin phân trang này sẽ tự động hiển thị các trang cho nó

Cách tạo JavaScript phân trang bảng đơn giản

1. Đầu tiên, tạo phần tử bảng HTML với một id duy nhất và đặt dữ liệu của bạn bên trong nó

 
		Head col 1
		Head col 2
	

	

	

		
CodeHim
		
Free HTML CSS
	
	

		
JavaScript
		
Code & Scripts
	
	

		
row #3 col1
		
row #3 col2
	
	

		
row #4 col1
		
row #4 col2
	
	

		
row #5 col1
		
row #5 col2
	
	

		
row #6 col1
		
row #6 col2
	
	

		
row #7 col1
		
row #7 col2
	
	

		
row #8 col1
		
row #8 col2
	
	

		
row #9 col1
		
row #9 col2
	
	

		
row #10 col1
		
row #10 col2
	
	

		
row #11 col1
		
row #11 col2
	

2. Sau đó, xác định kiểu CSS cho bảng và phân trang như sau

* {
  margin: 0;
  padding: 0;
  text-align:center;
}

body {
  background-color: #fafafa;
}

table {
  color: #333;
  font-size: .9em;
  font-weight: 300;
  line-height: 40px;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #ed1c40;
  width: 500px;
  margin: 50px auto;
  box-shadow: 0 4px 8px 0 rgba[0,0,0,.16];
  border-radius: 2px;
}

th {
  background: #ed1c40;
  color: #fff;
  border: none;
}

tr:hover:not[th] {background-color: rgba[237,28,64,.1];}


input[type="button"] {
	transition: all .3s;
    border: 1px solid #ddd;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
	font-size: 15px;
}

input[type="button"]:not[.active] {
	background-color:transparent;
}

.active {
	background-color: #ff4d4d;
	color :#fff;
}

input[type="button"]:hover:not[.active] {
	background-color: #ddd;
}

3. Cuối cùng, thêm đoạn mã JavaScript sau và hoàn tất

/*		=================================
**		==== Simple Table Controller ====
**		=================================
**
**
**			With Pure JavaScript . 
**	 
**
**		No Libraries or Frameworks needed!
**
**
**				fb.com/bastony
**	
*/



// get the table element
var $table = document.getElementById["myTable"],
// number of rows per page
$n = 5,
// number of rows of the table
$rowCount = $table.rows.length,
// get the first cell's tag name [in the first row]
$firstRow = $table.rows[0].firstElementChild.tagName,
// boolean var to check if table has a head row
$hasHead = [$firstRow === "TH"],
// an array to hold each row
$tr = [],
// loop counters, to start count from rows[1] [2nd row] if the first row has a head tag
$i,$ii,$j = [$hasHead]?1:0,
// holds the first row if it has a [] & nothing if []
$th = [$hasHead?$table.rows[[0]].outerHTML:""];
// count the number of pages
var $pageCount = Math.ceil[$rowCount / $n];
// if we had one page only, then we have nothing to do ..
if [$pageCount > 1] {
	// assign each row outHTML [tag name & innerHTML] to the array
	for [$i = $j,$ii = 0; $i < $rowCount; $i++, $ii++]
		$tr[$ii] = $table.rows[$i].outerHTML;
	// create a div block to hold the buttons
	$table.insertAdjacentHTML["afterend","
";
	return $buttons;
}

Đó là tất cả. hy vọng bạn đã tích hợp thành công đoạn mã phân trang bảng này vào dự án của mình. Nếu bạn có bất kỳ câu hỏi hoặc đang gặp phải bất kỳ vấn đề nào, vui lòng bình luận bên dưới

Làm cách nào để thêm phân trang vào bảng bằng JavaScript?

Phân trang trong bảng là gì?

Làm cách nào để thêm phân trang vào bảng trong Bootstrap?

Làm cách nào để thêm phân trang trong bảng HTML bằng Angular?