00:05Hello everyone, in this video we will create a Bootstrap 5 data table, so it will look like this.
00:13I would like to show how many rows, pagination, and search to filter the records, and also
00:18To show how many records we have in total, let's apply it. Okay, it will show us 25.
00:25It's backed up. If you want to filter, let's see, it will filter. The memory card is fine.
00:36Let's go to the next and previous page, then it has all the features, so I
00:43I like to sort by name, my office by age is fine then it has all the features that
00:50We want a data table that has the functionality of filtering search errors.
00:55How many records do we like to show twice, and how many are we showing so first?
01:02We'll use this HTML file to create a simple list of how it's located.
01:09To use that, we'll get to this data table that starts with data from five teams. We'll come here.
01:16We'll come to the HTML source, okay. In the HTML section, we'll copy this HTML code, so before we
01:26that
01:26We created the padding, it will be five for keyboards, the class is a good class and now copy the code of
01:35Okay, copy this code. How many records do you have here? Can you dynamically retrieve them?
01:48records, but statically it's fine, you can retrieve your records dynamically, well, we have
01:54We pasted our code here, so let's leave it here. It's fine if it looks like this so that this row looks like this at the top.
02:01and
02:02Also below, okay, this start is a new position, all this is fine, so now let's move on to JavaScript
02:09Okay, we'll do what we need in JavaScript for the menu. These JavaScript files are fine as they are.
02:17First, I'll copy them all. I'll write JavaScript code here. We're going to write this here. I'll paste this here.
02:34First, the first link I can link
02:47the third link
02:52You can copy this file and download it offline. These offline files can also be used offline.
03:00After the JavaScript, we copy the JavaScript code, this jQuery code that we need.
03:07Okay, just copy these three lines and paste them from these links below.
03:14Paste it into the script
03:21If after pasting that we now go to the HTML, the CSS part is fine, so let's change this name
03:29data table
03:34So come here to the CSS section; we need these two links. Copy them, just come here to this section.
03:42Here's the first link
03:51This is the bootstrap link and the second one is also the bootstrap data table
04:09If we're going to update now
04:14Our page is fine, let's go, I've got it. This is our HTML data table file, so let's update it.
04:21it
04:21Yes, it looks good. This is our data table that has been created. Is that correct?
04:27We're going to apply the operation; in this case, we have 50. The card will be shown back to us. Let's filter and apply the filter.
04:35That's what we have, which is the leak.
04:43Let's apply it this way by age.
04:48Okay, we also have 1 through 10 of 57 entries, and let's apply this to a previous generation. So this
04:56It was the data table using bootstrap 5
04:59That's all! If you found the video helpful, don't forget to subscribe.
Comentarios