HTML:

< input type = " text " id = " searchInput " onkeyup = " searchTable () "
 placeholder = " Search... " >
Javascript:
function searchTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById(" searchInput ");
  filter = input.value.toUpperCase();
  table = document.getElementById(" myTable ");
  tr = table.getElementsByTagName(" tr ");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName(" td ")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase(). indexOf (filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = " none ";
      }
    }
  }
}

In this example:

Page links (< a href = " # " >) allow users to navigate to different pages.
Clicking on a page link typically loads a new set of data or displays a different portion of the content.

Sorting

The sorting functionality enables users to rearrange the table's rows based on the values in a particular column. In the example, clicking on the column headers toggles between ascending and descending order based on the alphabetical or numerical values in the respective column.

Here's an example of sorting table rows with JavaScript:

HTML:

< th onclick = " sortTable(0) " > Name < /th >
< th onclick = "sortTable(1)" > Age < /th >
Javascript:
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

Combining these features provides a more user-friendly and interactive experience when dealing with large datasets presented in HTML tables. It allows users to efficiently navigate, search, and analyze the information presented, enhancing the overall usability of the web page.

Here's a more comprehensive example of an HTML table with pagination, search, and sorting functionalities implemented using HTML, CSS, and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table with Pagination, Search, and Sorting</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    th {
      cursor: pointer;
    }
    .pagination {
      display: inline-block;
    }
    .pagination a {
      color: black;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
      transition: background-color .3s;
    }
    .pagination a.active {
      background-color: #4CAF50;
      color: white;
    }
    .pagination a:hover:not(.active) {background-color: #ddd;}
  < /style >
< /head >
< body >

<h2>Table with Pagination, Search, and Sorting</h2>
<input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Search for names..">

<table id="myTable">
  <thead>
    <tr>
      <th onclick=" sortTable(0) "> Name </th>
      < th onclick=" sortTable(1) "> Age < /th >
    < /tr >
  < /thead >
  < tbody >
    < tr >< td > John < /td > < td > 25 < /td > < /tr >
    < tr >< td > Doe < /td > < td > 30 < /td > < /tr >
    < tr >< td > Smith < /td > < td > 20 < /td >< /tr >
    < ! - - Add more rows as needed - - >
  < /tbody >
< /table >
< div class = " pagination " id = " pagination " >< /div >

<script>
  function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("myTable");
    switching = true;
    dir = "asc";
    while (switching) {
      switching = false;
      rows = table.rows;
      for (i = 1; i < (rows.length - 1); i++) {
        shouldSwitch = false;
        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        if (dir == "asc") {
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            shouldSwitch= true;
            break;
          }
        } else if (dir == "desc") {
          if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
            shouldSwitch= true;
            break;
          }
        }
      }
      if (shouldSwitch) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        switchcount ++;
      } else {
        if (switchcount == 0 && dir == "asc") {
          dir = "desc";
          switching = true;
        }
      }
    }
  }

  function searchTable() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("searchInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[0];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }

  // Pagination function
  function loadPagination() {
    var table = document.getElementById("myTable");
    var rows = table.rows.length;
    var perPage = 3; // Change this to set number of rows per page
    var pageCount = Math.ceil(rows / perPage);
    var pagination = document.getElementById("pagination");
    var pageLinks = "";
    for (var i = 0; i < pageCount; i++) {
      pageLinks += "<a href='#' onclick='changePage(" + i + ")'>" + (i + 1) + "</a> ";
    }
    pagination.innerHTML = pageLinks;
  }

  function changePage(page) {
    var table = document.getElementById("myTable");
    var rows = table.rows.length;
    var perPage = 3; // Change this to set number of rows per page
    var start = page * perPage + 1;
    var end = start + perPage - 1;
    for (var i = 1; i < rows; i++) {
      if (i >= start && i <= end) {
        table.rows[i].style.display = "";
      } else {
        table.rows[i].style.display = "none";
      }
    }
  }

  // Initializations
  window.onload = function() {
    loadPagination();
    changePage(0); // Show the first page initially
  };
< /script >
< /body >
< /html >

Conclusion

In conclusion, creating an HTML table with pagination, search, and sorting functionalities enhances the usability and accessibility of data presentation on web pages.

HTML Table: Tables provide a structured format for displaying data, with rows and columns defining the layout.
Pagination: Dividing content into multiple pages improves user experience by managing large datasets effectively and reducing page load times.
Search Functionality: Allowing users to search for specific data within the table enhances usability and accessibility, especially for large datasets.
Sorting: Enabling users to sort table rows based on column values facilitates data analysis and comprehension.

By combining these features, web developers can create dynamic and interactive table interfaces that empower users to navigate, search, and analyze data efficiently. This enhances the overall usability and user experience of web applications.

Next TopicHTML Value

← prev next →

next → ← prev

HTML Table with Pagination and Search and Sorting

In this topic, we understand and implement creating an HTML table with pagination, search, and sorting functionalities. Let me break down each aspect:

HTML Table

HTML tables are used to display data in a tabular format. They consist of rows and columns, with each cell containing data or other HTML elements. Tables are commonly used to present structured information, such as lists of items, data sets, or comparison charts.

HTML tables organize data in rows and columns. Each cell can contain text, images, links, or other HTML elements.

Here's a basic example of an HTML table:

< table >
  < tr >
    < th > Name < /th >
    < th > Age < /th >
  < /tr >
  < tr >
    < td > John < /td >
    < td > 25 < /td >
  < /tr >
  < tr >
    < td > Doe < /td >
    < td > 30 < /td >
  < /tr >
  < ! - - Add more rows as needed - - >
< /table >

In this example:

The < table > element defines the table.
Each row (< tr >) contains table data cells (< td >) or table header cells (< th >).
Table headers (< th >) are used for column headings.
Table data cells (< td >) contain the actual data.

Pagination

Pagination refers to dividing content into separate pages to improve usability and load times, particularly when dealing with a large amount of data. In the context of an HTML table, pagination allows users to navigate through different sections of the table, displaying only a subset of rows at a time. This allows the user to have more information on a single page.

Here's an example of pagination in HTML:

< div class = " pagination " >
  < a href = " # " > 1 < /a > 
  < a href = " # " > 2 < /a >
  < a href = " # " > 3 < /a >
  < ! - - Add more page links as needed - - >
< /div >

In this example:

Page links (< a href = " # " >) allow users to navigate to different pages.
Clicking on a page link typically loads a new set of data or displays a different portion of the content.

Search Functionality

Adding search functionality allows users to filter the table's contents based on specific criteria. In the provided example, a search input field is included above the table, enabling users to enter a search term. As the user types, the table dynamically updates to display only rows that match the search query, making it easier to find relevant information.

Here's an example of a search input field with JavaScript for filtering table rows: