Làm thế nào để chúng ta có thể tạo một bảng dữ liệu với đầy đủ các tính năng cơ bản một cách dễ dàng? . Xem điều này Bootstrap Datatable With Sort, Pagination and Search, Sorting Table Program
Trước đây tôi đã chia sẻ chương trình bộ lọc bảng JavaScript có chứa đầu vào tìm kiếm để lọc. Nhưng đây là một bảng dữ liệu thích hợp có nhiều tùy chọn bộ lọc như sắp xếp, tìm kiếm và đếm các mục hiển thị, nó cũng có tính năng phân trang. Loại tính năng này sẽ thấy ở nhiều nơi như bảng xếp hạng, bảng quản lý người dùng, v.v. Đây là dữ liệu phù hợp, nơi bạn có thể đặt các điều kiện khác nhau để tìm kiếm một mục cụ thể.
Hôm nay bạn sẽ học cách tạo bảng dữ liệu sắp xếp bằng cách sử dụng bootstrap và một số thư viện JavaScript. Về cơ bản, có một bảng với 4 cột khác nhau như title, des, date, v.v. Và số lượng hàng lớn hơn 10, có nghĩa là có hơn 10 mục có sẵn trong bảng. Nếu tôi nói về các tính năng và lọc. đầu tiên, có một thả xuống chọn cho các mục hiển thị được chọn, chẳng hạn như cách các mục của tôi bạn muốn trực quan hóa trên một trang. Tính năng thứ hai là bạn có thể tìm kiếm bằng cách nhập các ký tự, thứ ba là bạn có thể sắp xếp các mục theo thứ tự truy cập/giảm dần. Tính năng thứ tư là phân trang , các mục được chia thành nhiều trang bằng cách sử dụng phân trang hoặc phân trang.
Vì vậy, hôm nay bạn sẽ học cách tạo Bootstrap Datatable với chức năng Sắp xếp, Phân trang và Tìm kiếm. Ở đó tôi đã sử dụng bootstrap để tạo bố cục và thư viện dữ liệu bootstrap để tạo chương trình. Ngoài ra, còn có một số thư viện JS khác như jQuery và khoảnh khắc. js. Như bạn đã biết, các tệp JS của bootstrap không thể chạy nếu không có jQuery. Bạn có thể sử dụng chương trình bảng dữ liệu này trên trang web của mình cho nhiều mục đích.
Nếu bây giờ bạn đang nghĩ chương trình bảng sắp xếp này thực sự như thế nào, thì hãy xem phần xem trước được cung cấp bên dưới
Xem trước bảng dữ liệu sắp xếp
Xem bản xem trước video này để có ý tưởng về chương trình bảng dữ liệu này trông như thế nào
Bây giờ bạn có thể xem chương trình này một cách trực quan, bạn cũng có thể xem chương trình trực tiếp bằng cách nhấn nút ở trên. Nếu bạn thích điều này, thì hãy lấy mã nguồn của nó
Bạn cũng có thể thích
Hộp tổ hợp HTML
Các phương thức Flexbox đáp ứng
Đánh giá sao
Mở rộng thanh tìm kiếm
Bootstrap có thể dữ liệu với mã nguồn sắp xếp, phân trang và tìm kiếm
Trước khi chia sẻ mã nguồn, hãy nói về nó. Đầu tiên tôi đã tạo các div theo bố cục lưới bootstrap, bên trong các div tôi đã tạo bảng bằng cách sử dụng <tr><td> etc HTML table commands. I did not create any div or input of other features like pagination, search, etc. All these are based on libraries which I have linked. In the HTML file, I have linked bootstrap’s CSS and JS both files, jQuery, and the jQuery datatable plugin.
Bây giờ sử dụng CSS, tôi chỉ đưa ra các giá trị như màu sắc, lề, phần đệm, v.v. cho bảng. Cũng đã sử dụng truy vấn CSS @media để giảm kích thước của một số phần tử và chặn một số ở kích thước màn hình nhỏ. Tệp JavaScript chỉ chứa 3-4 dòng mã vì nó dựa trên nhiều thư viện. Như chúng ta biết thư viện tiết kiệm thời gian và công sức của chúng tôi
Còn lại tất cả những thứ khác bạn sẽ hiểu sau khi nhận được mã, tôi không thể giải thích tất cả bằng văn bản. Để tạo chương trình này, bạn phải tạo 3 tệp. Tệp đầu tiên dành cho HTML, tệp thứ hai dành cho CSS và tệp thứ ba dành cho JavaScript. Thực hiện theo các bước để tạo chương trình này mà không có bất kỳ lỗi nào
mục lục. html
Tạo một tệp HTML có tên là 'chỉ mục. html' và đặt các mã dưới đây
mục lục. html
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<. LOẠI TÀI LIỆU html>
<. -- Mã Bằng Webdevtrick ( https. //webdevtrick. com ) -->
data-table-header="Title">Observed Parenting in Families exposed to Homelessness: Child and Parent Characteristics as Predictors of Response to the Early Risers Intervention.
data-table-header="Authors">Meca A, Sabet RF, Farrelly CM, Benitez CG, Schwartz SJ, Gonzales-Backen M, Lorenzo-Blanco EI, Unger JB, Zamboanga BL, Baezconde-Garbanati L, Picariello S, Des Rosiers SE, Soto DW, Pattarroyo M, Villamar JA, Lizzi KM.
data-table-header="Title">Efficacy Of The Repetitions In Reserve-Based Rating Of Perceived Exertion For The Bench Press In Experienced And Novice Benchers.
data-table-header="Title">Perception in Romantic Relationships: a Latent Profile Analysis of Trait Mindfulness in Relation to Attachment and Attributions.
data-table-header="Title">Is Plus Size Equal? The Positive Impacts of Average and Plus Sized Media Fashion Models on Women’s Cognitive Resource Allocation, Social Comparisons, and Body Satisfaction. [in press]
data-table-header="Title">Effects of Tart Cherry Juice on Brachial and Aortic Hemodynamics, Arterial Stiffness, and Blood Biomarkers of Cardiovascular Health in Adults with Metabolic Syndrome.
data-table-header="Title">Watermelon and L-Arginine Consumption Regulate Gene Expression Related to Serum Lipid Profile, Inflammation, and Oxidative Stress in Rats Fed on Atherogenic Diet.
data-table-header="Title">Cardiovascular Responses to Unilateral, Bilateral, and Alternating Limb Resistance Exercise Performed Using Different Body Sements.
