HTML sắp xếp dữ liệu

1

2

3

4

Bảng của chúng ta sẽ chứa tiêu đề bảng,

1

2

3

4

2

2

2

2

2

2

2

2

2

2

3

3

2. Tạo bảng đáp ứng bằng CSS

Một trong những vấn đề phổ biến hơn khi làm việc với các bảng HTML là thiếu khả năng phản hồi. Bảng có thể có vấn đề chồng lấp ô hoặc vượt ra ngoài ranh giới của toàn bộ trang

Chúng ta có thể loại bỏ những vấn đề này bằng cách đặt bảng trong một thùng chứa bảng có chiều rộng bằng toàn bộ trang với thuộc tính cuộn tràn. Bằng cách đó, bảng luôn rộng bằng toàn bộ trang và không cần phải thu nhỏ các ô nhờ tính năng tràn trang có thể cuộn được. Chúng tôi cũng sẽ bao gồm các thuộc tính độ rộng tối thiểu trên các ô của bảng để tránh gói văn bản

Đây là CSS cần thiết để làm cho bảng của chúng ta có thể cuộn được

1

3

3

3

4

2

3

2

Sau đó, chúng tôi có thể thêm phần còn lại của kiểu dáng của chúng tôi

1

3

2

4

3

4

4

4

3

3

2

2

2

2

2

3

1

1

1

3

3

3. Đặt dữ liệu JSON vào bảng HTML

Đối với ví dụ này, chúng tôi sẽ làm việc với phản hồi JSON được phân tích cú pháp giả. Đây là những gì dữ liệu của chúng tôi trông giống như

1

2

3

4

2

2

2

2

2

Chúng tôi sẽ đặt dữ liệu trong thẻ

1

Nội dung hàng sẽ dựa trên từng đối tượng trong

1

2

4

2

2

2

2

2

2

2

Trong hàm này, chúng ta sử dụng phương thức

Khi chúng tôi đã nhận được mảng các khóa đối tượng, chúng tôi lặp qua từng khóa bằng phương thức

Trong chức năng bản đồ này, chúng tôi đang tạo một ô mới cho từng mục trong mảng và đặt ô bên trongHTML làm giá trị khóa đối tượng tương ứng.  

Cuối cùng, chúng tôi nối ô mà chúng tôi đã tạo vào hàng được xác định ở đầu hàm bằng cách sử dụng phương pháp

Bây giờ chúng ta đã có hàm tạo hàng, chúng ta sẽ định nghĩa một hàm để lặp qua mảng

1

2

2

2

2

2

Chúng tôi sẽ chuyển hàm

1

2

2

2

3

4

2

2

2

2

2

2

2

2

2

2

2

2

3

3

2

2

Làm cách nào để sắp xếp bảng HTML js?

Sắp xếp DataTable hoạt động như thế nào?

Làm cách nào để sắp xếp bảng trong HTML bằng jQuery?

Làm cách nào để sắp xếp dữ liệu trong DataTable trong C#?