Làm thế nào để bạn thêm số trang vào một bảng?
Ngày đăng:
15/01/2023
Trả lời:
0
Lượt xem:
82
Đ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ó Show Cách tạo JavaScript phân trang bảng đơn giản1. Đầ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ó
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 ( |