Javascript Table Sorting Filtering and Pagination Of Random Users API Using TableManager.js jQuery

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:

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

<!DOCTYPE html>

<html>

<head>

<title>Random Users Table</title>

</head>

<body>

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

$(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.');
    }
  });
});

$(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:

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
      };
    })
  });
}

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:

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

<!DOCTYPE html>

<html>

<head>

<title>Random Users Table</title>

</head>

<body>

<thead>

<tr>

<th>Email</th>

<th>Phone</th>

<th>Location</th>

</tr>

</thead>

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

#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;
}

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

}