Ví dụ phân trang Bootstrap với dữ liệu

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

quảng cáo

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

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áo

Bước 2. Đã tạo danh sách bảng HTML vào tệp

Name
Salary
Age

8 và thêm phần tử div vùng chứa phân trang

Name
Salary
Age

Tôi đã tạo danh sách bảng HTML và phân trang phần tử HTML

Name
Salary
Age

1, tôi sẽ nối thêm dữ liệu với bảng HTML

Name
Salary
Age

0 và áp dụng phân trang trên div

Name
Salary
Age

1

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

Name
Salary
Age

8

var $pagination = $('#pagination'),
totalRecords = 0,
records = [],
displayRecords = [],
recPerPage = 10,
page = 1,
totalPages = 0;
$.ajax({
      url: "http://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

Name
Salary
Age

3, sau này trong hướng dẫn này, chúng tôi sẽ bỏ bình luận phương pháp này

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

Name
Salary
Age

5. Chúng tôi sẽ tạo phương thức javascript bên dưới và thêm vào tệp

Name
Salary
Age

8

________số 8

Lần đầu tiên tôi tạo phần thân bảng trống và tạo phần tử

Name
Salary
Age

7 với các bản ghi dữ liệu. Cuối cùng, mỗi phần tử tr nối với bảng HTML

Name
Salary
Age

0

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

Name
Salary
Age

9

Name
Salary
Age

2

Tôi đang chuyển biến

var $pagination = $('#pagination'),
totalRecords = 0,
records = [],
displayRecords = [],
recPerPage = 10,
page = 1,
totalPages = 0;
$.ajax({
      url: "http://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: "http://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: "http://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: "http://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ị

Làm cách nào để đặt phân trang trong bảng Bootstrap?

Làm cách nào để sử dụng phân trang trong DataTable?

Cách phân trang được sử dụng trong Bootstrap?

Làm cách nào để tùy chỉnh phân trang Bootstrap?