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

https. //webdevtrick. com/wp-content/uploads/data-table-sort. mp4

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

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

< lang="en" >

  Bootstrap Datatable. Webdevtrick. com