Phân trang là một đặc điểm rất hữu ích của bất kỳ ứng dụng nào. Bài viết này giúp sử dụng jQuery và bootstrap để tạo một bảng HTML đáng yêu liệt kê các số trang. Bootstrap là một khung CSS mạnh để tạo các phần tử HTML và bố cục tuyệt đẹp với lớp CSS
Có một số jQuery Plugin hỗ trợ phân trang bảng HTML. Hướng dẫn này giúp xây dựng phân trang bảng HTML bằng điều hướng Bootstrap. Tôi có thể tạo mã jQuery duy nhất cho trang tiếp theo, các tính năng của trang trước, v.v. nhưng tôi sẽ sử dụng thư viện plugin jQuery phân trang twbs
Tôi đang sử dụng plugin phân trang jQuery do Bootstrap hỗ trợ và tích hợp nó với danh sách bảng bootstrap. Nó rất dễ sử dụng và đơn giản để tích hợp. Phần phụ thuộc duy nhất của plugin này là bootstrap CSS và jQuery 1. 7+ tệp thư viện
Ngoài ra, hãy xem các hướng dẫn jQuery hữu ích khác,
- Ví dụ đơn giản về phân trang bằng jQuery và Bootstrap
- Multi Step Form với Progress Bar sử dụng jQuery và Bootstrap CSS
- Ví dụ đơn giản về ẩn, hiển thị và chuyển đổi phần tử bằng jQuery
- Tự động thêm và xóa các hàng trong bảng bằng jquery
Phân trang giúp hiển thị tập hợp con của các bản ghi với các tham số nhất định. Trang này trông giống như bootstrap bên dưới
Phân trang Bootstrap đơn giản bằng jQuery
Trong quá trình tải danh sách HTML, chúng tôi sẽ trình bày dữ liệu trang đầu tiên và xây dựng thanh duyệt phân trang bằng cách sử dụng CSS phân trang Bootstrap. Để thao tác hiển thị dữ liệu và trang, chúng tôi sẽ đặt một số biến javascript toàn cầu
Tôi đã tạo thư mục
Bước 1. Đã tải xuống plugin jQuery phân trang twbs và bao gồm tệp js, đường dẫn cdn bootstrap vào phần đầu của tệp
Không có CDN khả dụng cho plugin jQuery phân trang twbs, vì vậy tôi đã bao gồm đường dẫn lib cục bộ và phần còn lại của tệp thư viện phụ thuộc có đường dẫn CDN
quảng cáoBước 2. Đã tạo danh sách bảng HTML vào tệp
Tôi đã tạo danh sách bảng HTML và phân trang phần tử HTML
Bước 3. Chúng tôi sẽ tạo phương thức jquery ajax để lấy dữ liệu từ cuộc gọi còn lại và lưu trữ vào biến js toàn cầu. Chúng tôi sẽ thêm mã folowiing vào tệp
var $pagination = $['#pagination'], totalRecords = 0, records = [], displayRecords = [], recPerPage = 10, page = 1, totalPages = 0; $.ajax[{ url: "//dummy.restapiexample.com/api/v1/employees", async: true, dataType: 'json', success: function [data] { records = data; console.log[records]; totalRecords = records.length; totalPages = Math.ceil[totalRecords / recPerPage]; //apply_pagination[]; } }];
Như bạn có thể thấy, tôi đã tạo một số biến JavaScript toàn cục, các biến toàn cục chỉ có thể truy cập vào tệp này. Tôi có phương pháp bình luận
Biến JavaScript là
- phân trang $. Đối tượng của vùng chứa div phân trang
- Tổng số hồ sơ. Tổng số bản ghi lấy từ cơ sở dữ liệu
- Hồ sơ. Tổng số đối tượng bản ghi của mảng
- hồ sơ hiển thị. Mảng đối tượng sẽ hiển thị trong bảng HTML
- recPerPage. Các bản ghi trên mỗi trang sẽ hiển thị thành bảng
- trang. Số trang hiện tại
- tổng số trang. Tổng số trang dựa trên hồ sơ
Tôi đếm được 14 bản ghi sử dụng công thức Ceil[tổng số bản ghi tìm nạp/số lượng bản ghi hiển thị cùng một lúc]
Bước 4. Chúng tôi sẽ thêm tr vào phần thân HTML dựa trên biến
Lần đầu tiên tôi tạo phần thân bảng trống và tạo phần tử
Bước 5. Chúng tôi sẽ tạo các tham số phân trang và chuyển đến phiên bản
Tôi đang chuyển biến
var $pagination = $['#pagination'], totalRecords = 0, records = [], displayRecords = [], recPerPage = 10, page = 1, totalPages = 0; $.ajax[{ url: "//dummy.restapiexample.com/api/v1/employees", async: true, dataType: 'json', success: function [data] { records = data; console.log[records]; totalRecords = records.length; totalPages = Math.ceil[totalRecords / recPerPage]; //apply_pagination[]; } }];0 để tạo các nút liên kết phân trang và các trang hiển thị để hiển thị số trang điều hướng liên kết cùng một lúc. Plugin phân trang jQuery này cung cấp phương thức gọi lại onPageClick[] để tạo các khối dữ liệu để hiển thị. Phương thức JavaScript
var $pagination = $['#pagination'], totalRecords = 0, records = [], displayRecords = [], recPerPage = 10, page = 1, totalPages = 0; $.ajax[{ url: "//dummy.restapiexample.com/api/v1/employees", async: true, dataType: 'json', success: function [data] { records = data; console.log[records]; totalRecords = records.length; totalPages = Math.ceil[totalRecords / recPerPage]; //apply_pagination[]; } }];1 sử dụng để tạo tập hợp con của mảng bằng cách sử dụng chỉ mục bắt đầu và kết thúc của mảng
Biến
var $pagination = $['#pagination'], totalRecords = 0, records = [], displayRecords = [], recPerPage = 10, page = 1, totalPages = 0; $.ajax[{ url: "//dummy.restapiexample.com/api/v1/employees", async: true, dataType: 'json', success: function [data] { records = data; console.log[records]; totalRecords = records.length; totalPages = Math.ceil[totalRecords / recPerPage]; //apply_pagination[]; } }];2 sử dụng để đặt chỉ mục bắt đầu của bản ghi hiển thị và
var $pagination = $['#pagination'], totalRecords = 0, records = [], displayRecords = [], recPerPage = 10, page = 1, totalPages = 0; $.ajax[{ url: "//dummy.restapiexample.com/api/v1/employees", async: true, dataType: 'json', success: function [data] { records = data; console.log[records]; totalRecords = records.length; totalPages = Math.ceil[totalRecords / recPerPage]; //apply_pagination[]; } }];3 sử dụng để chỉ mục kết thúc của mảng bản ghi hiển thị