To implement table sorting, filtering, and pagination for data retrieved from the Random Users API using TableManager.js and jQuery, follow these steps:
Step 1: Include the required libraries
Add the following script tags in the head section of your HTML file to include jQuery and TableManager.js:
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Random Users Table</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tablemanager-js/dist/tablemanager.min.js"></script> </head> <body> <!-- Table and other HTML elements will be added later --> </body> </html> |
Step 2: Fetch data from the Random Users API
Create a JavaScript file (e.g., script.js
) and add the following code to fetch data from the Random Users API:
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function() { $.ajax({ url: 'https://randomuser.me/api/?results=50', dataType: 'json', success: function(data) { createTable(data.results); }, error: function() { console.error('Error fetching data from the API.'); } }); }); |
In the code above, we use the jQuery $.ajax
function to make a GET request to the Random Users API and fetch 50 results. If the request is successful, the createTable
function (which we’ll define next) is called with the fetched data. Otherwise, an error message is logged to the console.
Step 3: Create the table using TableManager.js
Add the following code to the script.js
file to create the table using TableManager.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function createTable(data) { $('#user-table').tablemanager({ firstSort: [[0,0]], appendFilterBy: false, appendFilterTr: true, filterPlaceholder: 'Filter by name...', filterBy: '#filter-by', pagination: true, showRowsPerPage: true, rowsPerPage: 10, dataRows: data.map(function(user) { return { 'Name': user.name.first + ' ' + user.name.last, 'Email': user.email, 'Phone': user.phone, 'Location': user.location.city + ', ' + user.location.country }; }) }); } |
In the code above, we define the createTable
function that takes the fetched data as input. Inside this function, we use the tablemanager
function on the #user-table
element (which we’ll define later in the HTML) to initialize the table with the provided configuration options.
We set the initial sort order to the first column in ascending order ([[0,0]]
), enable filtering by name, enable pagination with 10 rows per page, and specify the columns and corresponding data from the Random Users API response.
Step 4: HTML markup
Update your HTML file with the following markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Random Users Table</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tablemanager-js/dist/tablemanager.min.js"></script> <script src="script.js"></script> </head> <body> <input type="text" id="filter-by" placeholder="Filter by name..."> <table id="user-table"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Location</th> </tr> </thead> <tbody></tbody> </table> </body> </html> |
In the HTML markup above, we include an input field with the id “filter-by” for filtering by name. The table with the id “user-table” is where the generated table will be inserted. The table header contains the column headers.
Step 5: Styling (Optional)
You can add CSS styles to customize the appearance of the table and input field. Here’s an example CSS code:
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 |
#filter-by { margin-bottom: 10px; padding: 5px; } #user-table { width: 100%; border-collapse: collapse; } #user-table th, #user-table td { padding: 8px; border: 1px solid #ddd; } #user-table th { background-color: #f2f2f2; } #user-table tbody tr:nth-child(even) { background-color: #f9f9f9; } #user-table tbody tr:hover { background-color: #e9e9e9; } |