Question 42611 in Html Question posted in
Some basic documentation can be found here.

How to improve my website in loading the data/ sorting/ jquery? And Best Practices for web development – Html

I am building a website to visualize the data in table like these:

index.html:

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>Employee Data</title>
      <!-- Load CSS --> 
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
      <!-- Load Custom CSS --> 
      <style> body { font-family: Arial, sans-serif; font-size: 14px; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } th { background-color: #f2f2f2; font-weight: bold; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } </style>
   </head>
   <body>
      <h1>Employee Data</h1>
      <table id="employee-table">
         <thead>
            <tr>
               <th>Name</th>
               <th>Title</th>
               <th>Last Login</th>
            </tr>
         </thead>
         <tbody>            
        <script src="data.js"></script>
        <script async>
        var employees = data;
               for (var i = 0; i < employees.length; i++) {
                 var employee = employees[i];
                 var row = "<tr><td>" + employee.name + "</td><td>" + employee.title + "</td><td>" + employee.last_login + "</td></tr>";
                 document.write(row);
               }
            </script>
         </tbody>
      </table>
      <!-- Load jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Load DataTables JS --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> <!-- Initialize DataTables --> <script> $(document).ready(function() { $('#employee-table').DataTable({ "paging": true, "pageLength": 10 }); }); </script> 
   </body>
</html>

data.js:

data = [
  {
    "name": "John Smith",
    "title": "Marketing Manager",
    "last_login": "2023-04-12T08:30:00Z"
  },
  {
    "name": "Sarah Johnson",
    "title": "Software Engineer",
    "last_login": "2023-04-13T15:45:00Z"
  },
  {
    "name": "Michael Lee",
    "title": "Sales Representative",
    "last_login": "2023-04-10T10:00:00Z"
  },
  {
    "name": "Emily Chen",
    "title": "Human Resources Manager",
    "last_login": "2023-04-14T09:15:00Z"
  },
  {
    "name": "David Kim",
    "title": "Product Manager",
    "last_login": "2023-04-11T14:20:00Z"
  },
  {
    "name": "Rachel Lee",
    "title": "Customer Support Specialist",
    "last_login": "2023-04-09T11:30:00Z"
  },
  {
    "name": "Thomas Johnson",
    "title": "Financial Analyst",
    "last_login": "2023-04-10T16:15:00Z"
  },
  {
    "name": "Melanie Davis",
    "title": "Project Manager",
    "last_login": "2023-04-13T12:45:00Z"
  },
  {
    "name": "Daniel Kim",
    "title": "Software Developer",
    "last_login": "2023-04-12T09:00:00Z"
  },
  {
    "name": "Jessica Lee",
    "title": "Marketing Coordinator",
    "last_login": "2023-04-14T08:00:00Z"
  },
  {
    "name": "Kevin Park",
    "title": "IT Support Specialist",
    "last_login": "2023-04-11T17:30:00Z"
  },
  {
    "name": "Hannah Kim",
    "title": "Sales Manager",
    "last_login": "2023-04-13T11:00:00Z"
  },
  {
    "name": "Lucas Brown",
    "title": "Web Designer",
    "last_login": "2023-04-09T13:20:00Z"
  },
  {
    "name": "Sophia Lee",
    "title": "Account Manager",
    "last_login": "2023-04-12T14:45:00Z"
  },
  {
    "name": "Jacob Kim",
    "title": "Business Analyst",
    "last_login": "2023-04-11T10:00:00Z"
  },
  {
    "name": "Olivia Lee",
    "title": "Graphic Designer",
    "last_login": "2023-04-13T09:00:00Z"
  },
  {
    "name": "Ethan Park",
    "title": "Systems Administrator",
    "last_login": "2023-04-10T11:30:00Z"
  },
  {
    "name": "Isabella Kim",
    "title": "Content Writer",
    "last_login": "2023-04-14T10:15:00Z"
  },
  {
    "name": "William Lee",
    "title": "Operations Manager",
    "last_login": "2023-04-12T11:20:00Z"
  },
  {
    "name": "Ava Kim",
    "title": "Social Media Manager",
    "last_login": "2023-04-13T08:30:00Z"
  },
  {
    "name": "Emily Lee",
    "title": "Data Analyst",
    "last_login": "2023-02-15T05:20:54Z"
  },
  {
    "name": "Brian Jones",
    "title": "Sales Representative",
    "last_login": "2023-03-30T22:14:45Z"
  },
  {
    "name": "Jessica Wilson",
    "title": "Marketing Manager",
    "last_login": "2023-01-28T09:43:03Z"
  },
  {
    "name": "Michael Miller",
    "title": "IT Support Specialist",
    "last_login": "2023-03-29T22:48:10Z"
  },
  {
    "name": "John Anderson",
    "title": "Software Engineer",
    "last_login": "2023-02-26T12:29:31Z"
  },
  {
    "name": "Kevin Davis",
    "title": "IT Support Specialist",
    "last_login": "2023-03-05T18:20:45Z"
  },
  {
    "name": "Amanda Garcia",
    "title": "Marketing Manager",
    "last_login": "2023-02-26T08:38:18Z"
  },
  {
    "name": "Sarah Brown",
    "title": "Sales Representative",
    "last_login": "2023-03-02T11:34:01Z"
  },
  {
    "name": "David Davis",
    "title": "IT Support Specialist",
    "last_login": "2023-03-03T01:18:31Z"
  },
  {
    "name": "Ashley Smith",
    "title": "Data Analyst",
    "last_login": "2023-02-18T17:59:11Z"
  },
  {
    "name": "Emily Wilson",
    "title": "Software Engineer",
    "last_login": "2023-01-16T08:08:52Z"
  },
  {
    "name": "Brian Smith",
    "title": "Marketing Manager",
    "last_login": "2023-02-21T09:52:46Z"
  },
  {
    "name": "Jessica Johnson",
    "title": "Sales Representative",
    "last_login": "2023-02-18T08:30:36Z"
  },
  {
    "name": "Michael Lee",
    "title": "IT Support Specialist",
    "last_login": "2023-01-11T23:02:57Z"
  },
  {
    "name": "John Garcia",
    "title": "Data Analyst",
    "last_login": "2023-03-06T00:24:02Z"
  },
  {
    "name": "Kevin Anderson",
    "title": "Software Engineer",
    "last_login": "2023-03-26T03:08:39Z"
  },
  {
    "name": "Amanda Davis",
    "title": "Marketing Manager",
    "last_login": "2023-02-09T10:41:57Z"
  },
  {
    "name": "Sarah Jones",
    "title": "Sales Representative",
    "last_login": "2023-01-23T15:28:48Z"
  },
  {
    "name": "David Wilson",
    "title": "IT Support Specialist",
    "last_login": "2023-03-20T11:53:55Z"
  },
  {
    "name": "Ashley Davis",
    "title": "Data Analyst",
    "last_login": "2023-01-26T05:49:22Z"
  },
  {
    "name": "Emily Johnson",
    "title": "Software Engineer",
    "last_login": "2023-02-09T14:48:35Z"
  },
  {
    "name": "Brian Lee",
    "title": "Marketing Manager",
    "last_login": "2023-02-08T04:46:09Z"
  },
  {
    "name": "Jessica Anderson",
    "title": "Sales Representative",
    "last_login": "2023-03-02T20:14:13Z"
  },
  {
    "name": "Michael Garcia",
    "title": "IT Support Specialist",
    "last_login": "2023-02-12T09:41:22Z"
  },
  {
    "name": "John Smith",
    "title": "Data Analyst",
    "last_login": "2023-01-13T19:47:45Z"
  },
  {
    "name": "Kevin Johnson",
    "title": "Software Engineer",
    "last_login": "2023-03-06T01:31:03Z"
  },
  {
    "name": "Amanda Lee",
    "title": "Marketing Manager",
    "last_login": "2023-02-03T11:22:21Z"
  },
  {
    "name": "Sarah Davis",
    "title": "Sales Representative",
    "last_login": "2023-03-14T20:11:12Z"
  },
  {
    "name": "David Smith",
    "title": "IT Support Specialist",
    "last_login": "2023-02-07T18:31:27Z"
  },
  {
    "name": "Ashley Johnson",
    "title": "Data Analyst",
    "last_login": "2023-02-05T17:10:38Z"
  }
]

Issue 1:
But the data is loaded before the pagination by datatable.js. (I have tried async, but I am not sure how to do, so all the data is still loaded before datatable.js function?)

I don’t expect all the data will be loaded in the first time. I may have made mistakes in code/ My code is not well-designed .. Would be appreciated if you could suggest any best/ industry practice (I am learning MEAN/ MERN stack, is it industry practice to use datatable.js with the stack?)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you @mplungjan. enter image description here His script works well. But sorry that I don't have enough reputation to cast a vote..

    My final code is like this:

    <!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>Employee Data</title>
      <!-- Load CSS --> 
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
      <!-- Load Custom CSS --> 
      <style> body { font-family: Arial, sans-serif; font-size: 14px; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } th { background-color: #f2f2f2; font-weight: bold; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } </style>
   </head>
   <body>
      <h1>Employee Data</h1>
      <table id="employee-table">
         <thead>
            <tr>
               <th>Name</th>
               <th>Title</th>
               <th>Last Login</th>
            </tr>
         </thead>
         <tbody>
         </tbody>
      </table>
      <!-- Load jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Load DataTables JS --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> 
      <!-- Initialize DataTables --> 
      <script> 
      $(function() {
        $("#employee-table tbody")
          .html(data.map(employee => `<tr><td>${employee.name}</td><td>${employee.title}</td><td>${employee.last_login}</td></tr>`).join(""));
      
        $("#employee-table")
          .DataTable({
            "paging": true,
            "pageLength": 10
          });
      });
      </script> 
      <script src="data.js">const data = data;</script>
   </body>
</html>

  2. 0

    I would definitely change your document.write to something like this

    NOTE I update the tbody but call datatables on the complete table

    $(function() {
  $("#employee-table tbody")
    .html(data.map(employee => `<tr><td>${employee.name}</td><td>${employee.title}</td><td>${employee.last_login}</td></tr>`).join(""));

  $("#employee-table")
    .DataTable({
      "paging": true,
      "pageLength": 10
    });
});

    $(function() {
  $("#employee-table tbody")
    .html(data.map(employee => `<tr><td>${employee.name}</td><td>${employee.title}</td><td>${employee.last_login}</td></tr>`).join(""));

  $("#employee-table")
    .DataTable({
      "paging": true,
      "pageLength": 10
    });
});
    body {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: left;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}
    <!-- Load [DataTables](poe://www.poe.com/_api/key_phrase?phrase=DataTables&prompt=Tell%20me%20more%20about%20DataTables.) CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

<h1>Employee Data</h1>
<table id="employee-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Last Login</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<!-- Load jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Load DataTables JS -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<!-- Initialize DataTables -->

<script>
  const data = [{
      "name": "John Smith",
      "title": "Marketing Manager",
      "last_login": "2023-04-12T08:30:00Z"
    }, {
      "name": "Sarah Johnson",
      "title": "Software Engineer",
      "last_login": "2023-04-13T15:45:00Z"
    }, {
      "name": "Michael Lee",
      "title": "Sales Representative",
      "last_login": "2023-04-10T10:00:00Z"
    }, {
      "name": "Emily Chen",
      "title": "Human Resources Manager",
      "last_login": "2023-04-14T09:15:00Z"
    }, {
      "name": "David Kim",
      "title": "Product Manager",
      "last_login": "2023-04-11T14:20:00Z"
    }, {
      "name": "Rachel Lee",
      "title": "Customer Support Specialist",
      "last_login": "2023-04-09T11:30:00Z"
    }, {
      "name": "Thomas Johnson",
      "title": "Financial Analyst",
      "last_login": "2023-04-10T16:15:00Z"
    }, {
      "name": "Melanie Davis",
      "title": "Project Manager",
      "last_login": "2023-04-13T12:45:00Z"
    }, {
      "name": "Daniel Kim",
      "title": "Software Developer",
      "last_login": "2023-04-12T09:00:00Z"
    }, {
      "name": "Jessica Lee",
      "title": "Marketing Coordinator",
      "last_login": "2023-04-14T08:00:00Z"
    }, {
      "name": "Kevin Park",
      "title": "IT Support Specialist",
      "last_login": "2023-04-11T17:30:00Z"
    }, {
      "name": "Hannah Kim",
      "title": "Sales Manager",
      "last_login": "2023-04-13T11:00:00Z"
    }, {
      "name": "Lucas Brown",
      "title": "Web Designer",
      "last_login": "2023-04-09T13:20:00Z"
    }, {
      "name": "Sophia Lee",
      "title": "Account Manager",
      "last_login": "2023-04-12T14:45:00Z"
    }, {
      "name": "Jacob Kim",
      "title": "Business Analyst",
      "last_login": "2023-04-11T10:00:00Z"
    }, {
      "name": "Olivia Lee",
      "title": "Graphic Designer",
      "last_login": "2023-04-13T09:00:00Z"
    }, {
      "name": "Ethan Park",
      "title": "Systems Administrator",
      "last_login": "2023-04-10T11:30:00Z"
    }, {
      "name": "Isabella Kim",
      "title": "Content Writer",
      "last_login": "2023-04-14T10:15:00Z"
    }, {
      "name": "William Lee",
      "title": "Operations Manager",
      "last_login": "2023-04-12T11:20:00Z"
    }, {
      "name": "Ava Kim",
      "title": "Social Media Manager",
      "last_login": "2023-04-13T08:30:00Z"
    }, {
      "name": "Emily Lee",
      "title": "Data Analyst",
      "last_login": "2023-02-15T05:20:54Z"
    }, {
      "name": "Brian Jones",
      "title": "Sales Representative",
      "last_login": "2023-03-30T22:14:45Z"
    }, {
      "name": "Jessica Wilson",
      "title": "Marketing Manager",
      "last_login": "2023-01-28T09:43:03Z"
    }, {
      "name": "Michael Miller",
      "title": "IT Support Specialist",
      "last_login": "2023-03-29T22:48:10Z"
    }, {
      "name": "John Anderson",
      "title": "Software Engineer",
      "last_login": "2023-02-26T12:29:31Z"
    },
    {
      "name": "Kevin Davis ",
      "title ": "IT Support Specialist ",
      "last_login": "2023-03-05T18:20:45Z"
    },
    {
      "name ": "Amanda Garcia",
      "title": "Marketing Manager ",
      "last_login": "2023-02-26T08:38:18Z"
    }, {
      "name": "Sarah Brown",
      "title": "Sales Representative",
      "last_login": "2023-03-02T11:34:01Z"
    }, {
      "name": "David Davis",
      "title": "IT Support Specialist",
      "last_login": "2023-03-03T01:18:31Z"
    }, {
      "name": "Ashley Smith",
      "title": "Data Analyst",
      "last_login": "2023-02-18T17:59:11Z"
    }, {
      "name": "Emily Wilson",
      "title": "Software Engineer",
      "last_login": "2023-01-16T08:08:52Z"
    }, {
      "name": "Brian Smith",
      "title": "Marketing Manager",
      "last_login": "2023-02-21T09:52:46Z"
    }, {
      "name": "Jessica Johnson",
      "title": "Sales Representative",
      "last_login": "2023-02-18T08:30:36Z"
    }, {
      "name": "Michael Lee",
      "title": "IT Support Specialist",
      "last_login": "2023-01-11T23:02:57Z"
    }, {
      "name": "John Garcia",
      "title": "Data Analyst",
      "last_login": "2023-03-06T00:24:02Z"
    }, {
      "name": "Kevin Anderson",
      "title": "Software Engineer",
      "last_login": "2023-03-26T03:08:39Z"
    }, {
      "name": "Amanda Davis",
      "title": "Marketing Manager",
      "last_login": "2023-02-09T10:41:57Z"
    }, {
      "name": "Sarah Jones",
      "title": "Sales Representative",
      "last_login": "2023-01-23T15:28:48Z"
    }, {
      "name": "David Wilson",
      "title": "IT Support Specialist",
      "last_login": "2023-03-20T11:53:55Z"
    }, {
      "name": "Ashley Davis",
      "title": "Data Analyst",
      "last_login": "2023-01-26T05:49:22Z"
    }, {
      "name": "Emily Johnson",
      "title": "Software Engineer",
      "last_login": "2023-02-09T14:48:35Z"
    }, {
      "name": "Brian Lee",
      "title": "Marketing Manager",
      "last_login": "2023-02-08T04:46:09Z"
    }, {
      "name": "Jessica Anderson",
      "title": "Sales Representative",
      "last_login": "2023-03-02T20:14:13Z"
    }, {
      "name": "Michael Garcia",
      "title": "IT Support Specialist",
      "last_login": "2023-02-12T09:41:22Z"
    }, {
      "name": "John Smith",
      "title": "Data Analyst",
      "last_login": "2023-01-13T19:47:45Z"
    }, {
      "name": "Kevin Johnson",
      "title": "Software Engineer",
      "last_login": "2023-03-06T01:31:03Z"
    }, {
      "name": "Amanda Lee",
      "title": "Marketing Manager",
      "last_login": "2023-02-03T11:22:21Z"
    }, {
      "name": "Sarah Davis",
      "title": "Sales Representative",
      "last_login": "2023-03-14T20:11:12Z"
    }, {
      "name": "David Smith",
      "title": "IT Support Specialist",
      "last_login": "2023-02-07T18:31:27Z"
    }, {
      "name": "Ashley Johnson",
      "title": "Data Analyst",
      "last_login": "2023-02-05T17:10:38Z"
    }
  ]
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search