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

huangapple go评论74阅读模式
英文:

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

问题

我正在构建一个用于可视化类似这样的表格数据的网站:

index.html:

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>员工数据</title>
      <!-- 加载 CSS --> 
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
      <!-- 加载自定义 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>员工数据</h1>
      <table id="employee-table">
         <thead>
            <tr>
               <th>姓名</th>
               <th>职称</th>
               <th>最后登录</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>
      <!-- 加载 jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 加载 DataTables JS --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> <!-- 初始化 DataTables --> <script> $(document).ready(function() { $('#employee-table').DataTable({ "paging": true, "pageLength": 10 }); }); </script> 
   </body>
</html>

data.js:

data = [
  {
    "name": "约翰·史密斯",
    "title": "营销经理",
    "last_login": "2023-04-12T08:30:00Z"
  },
  // 其他员工数据...
]

问题1:
但是数据在datatable.js的分页之前加载。(我尝试过使用async,但我不确定如何做,所以所有数据仍然在datatable.js函数之前加载?)

我不希望所有数据在第一次加载时就加载。我可能在代码中犯了错误/我的代码设计不够好.. 如果您能提出任何最佳/行业实践建议,我将不胜感激(我正在学习MEAN/MERN堆栈,使用datatable.js是否是行业惯例?)

英文:

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

index.html:

&lt;!DOCTYPE html&gt; 
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Employee Data&lt;/title&gt;
&lt;!-- Load CSS --&gt; 
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css&quot;&gt;
&lt;!-- Load Custom CSS --&gt; 
&lt;style&gt; 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; } &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Employee Data&lt;/h1&gt;
&lt;table id=&quot;employee-table&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Title&lt;/th&gt;
&lt;th&gt;Last Login&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;	        
&lt;script src=&quot;data.js&quot;&gt;&lt;/script&gt;
&lt;script async&gt;
var employees = data;
for (var i = 0; i &lt; employees.length; i++) {
var employee = employees[i];
var row = &quot;&lt;tr&gt;&lt;td&gt;&quot; + employee.name + &quot;&lt;/td&gt;&lt;td&gt;&quot; + employee.title + &quot;&lt;/td&gt;&lt;td&gt;&quot; + employee.last_login + &quot;&lt;/td&gt;&lt;/tr&gt;&quot;;
document.write(row);
}
&lt;/script&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;!-- Load jQuery --&gt; &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt; &lt;!-- Load DataTables JS --&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt; &lt;!-- Initialize DataTables --&gt; &lt;script&gt; $(document).ready(function() { $(&#39;#employee-table&#39;).DataTable({ &quot;paging&quot;: true, &quot;pageLength&quot;: 10 }); }); &lt;/script&gt; 
&lt;/body&gt;
&lt;/html&gt;   

data.js:

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

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?)

答案1

得分: 1

以下是您提供的内容的中文翻译:

感谢 @mplungjan。
插入图像描述
他的脚本运行良好。
但很抱歉,我没有足够的声望来投票。

我的最终代码如下:

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>员工数据</title>
<!-- 加载 CSS --> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<!-- 加载自定义 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>员工数据</h1>
<table id="employee-table">
<thead>
<tr>
<th>姓名</th>
<th>职称</th>
<th>最后登录</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 加载 jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 加载 DataTables JS --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> 
<!-- 初始化 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>
英文:

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:

&lt;!DOCTYPE html&gt; 
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Employee Data&lt;/title&gt;
&lt;!-- Load CSS --&gt; 
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css&quot;&gt;
&lt;!-- Load Custom CSS --&gt; 
&lt;style&gt; 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; } &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Employee Data&lt;/h1&gt;
&lt;table id=&quot;employee-table&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Title&lt;/th&gt;
&lt;th&gt;Last Login&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;!-- Load jQuery --&gt; &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt; &lt;!-- Load DataTables JS --&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt; 
&lt;!-- Initialize DataTables --&gt; 
&lt;script&gt; 
$(function() {
$(&quot;#employee-table tbody&quot;)
.html(data.map(employee =&gt; `&lt;tr&gt;&lt;td&gt;${employee.name}&lt;/td&gt;&lt;td&gt;${employee.title}&lt;/td&gt;&lt;td&gt;${employee.last_login}&lt;/td&gt;&lt;/tr&gt;`).join(&quot;&quot;));
$(&quot;#employee-table&quot;)
.DataTable({
&quot;paging&quot;: true,
&quot;pageLength&quot;: 10
});
});
&lt;/script&gt; 
&lt;script src=&quot;data.js&quot;&gt;const data = data;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

答案2

得分: 0

以下是您要翻译的内容:

我肯定会将您的document.write更改为如下形式

注意:我更新了tbody,但在完整表格上调用datatables

$(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;
}
<!-- 加载DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

<h1>员工数据</h1>
<table id="employee-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>职位</th>
      <th>上次登录</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<!-- 加载jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 加载DataTables JS -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<!-- 初始化DataTables -->

<script>
  const data = [{
      "name": "约翰·史密斯",
      "title": "市场经理",
      "last_login": "2023-04-12T08:30:00Z"
    }, {
      "name": "莎拉·约翰逊",
      "title": "软件工程师",
      "last_login": "2023-04-13T15:45:00Z"
    }, {
      "name": "迈克尔·李",
      "title": "销售代表",
      "last_login": "2023-04-10T10:00:00Z"
    }, {
      "name": "艾米莉·陈",
      "title": "人力资源经理",
      "last_login": "2023-04-14T09:15:00Z"
    }, {
      "name": "大卫·金",
      "title": "产品经理",
      "last_login": "2023-04-11T14:20:00Z"
    }, {
      "name": "瑞秋·李",
      "title": "客户支持专员",
      "last_login": "2023-04-09T11:30:00Z"
    }, {
      "name": "托马斯·约翰逊",
      "title": "财务分析师",
      "last_login": "2023-04-10T16:15:00Z"
    }, {
      "name": "梅兰妮·戴维斯",
      "title": "项目经理",
      "last_login": "2023-04-13T12:45:00Z"
    }, {
      "name": "丹尼尔·金",
      "title": "软件开发人员",
      "last_login": "2023-04-12T09:00:00Z"
    }, {
      "name": "杰西卡·李",
      "title": "市场协调员",
      "last_login": "2023-04-14T08:00:00Z"
    }, {
      "name": "凯文·帕克",
      "title": "IT支持专员",
      "last_login": "2023-04-11T17:30:00Z"
    }, {
      "name": "汉娜·金",
      "title": "销售经理",
      "last_login": "2023-04-13T11:00:00Z"
    }, {
      "name": "卢卡斯·布朗",
      "title": "网页设计师",
      "last_login": "2023-04-09T13:20:00Z"
    }, {
      "name": "索菲亚·李",
      "title": "客户经理",
      "last_login": "2023-04-12T14:45:00Z"
    }, {
      "name": "雅各布·金",
      "title": "业务分析师",
      "last_login": "2023-04-11T10:00:00Z"
    }, {
      "name": "奥利维亚·李",
      "title": "平面设计师",
      "last_login": "2023-04-13T09:00:00Z"
    }, {
      "name": "伊桑·帕克",
      "title": "系统管理员",
      "last_login": "2023-04-10T11:30:00Z"
    }, {
      "name": "伊莎贝拉·金",
      "title": "内容写手",
      "last_login": "2023-04-14T10:15:00Z"
    }, {
      "name": "威廉·李",
      "title": "运营经理",
      "last_login": "2023-04-12T11:20:00Z"
    }, {
      "name": "艾娃·金",
      "title": "社交媒体经理",
      "last_login": "2023-04-13T08:30:00Z"
    }, {
      "name": "艾米莉·李",
      "title": "数据分析师",
      "last_login": "2023-02-15T05:20:54Z"
    }, {
      "name": "布莱恩·琼斯",
      "title": "销售代表",
      "last_login": "2023-03-30T22:14:45Z"
    }, {
      "name": "杰西卡·威尔逊",
      "title": "市场经理",
      "last_login": "2023-01-28T

<details>
<summary>英文:</summary>

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

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

    $(function() {
      $(&quot;#employee-table tbody&quot;)
        .html(data.map(employee =&gt; `&lt;tr&gt;&lt;td&gt;${employee.name}&lt;/td&gt;&lt;td&gt;${employee.title}&lt;/td&gt;&lt;td&gt;${employee.last_login}&lt;/td&gt;&lt;/tr&gt;`).join(&quot;&quot;));

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

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(function() {
      $(&quot;#employee-table tbody&quot;)
        .html(data.map(employee =&gt; `&lt;tr&gt;&lt;td&gt;${employee.name}&lt;/td&gt;&lt;td&gt;${employee.title}&lt;/td&gt;&lt;td&gt;${employee.last_login}&lt;/td&gt;&lt;/tr&gt;`).join(&quot;&quot;));

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

&lt;!-- language: lang-css --&gt;

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

&lt;!-- language: lang-html --&gt;

    &lt;!-- Load [DataTables](poe://www.poe.com/_api/key_phrase?phrase=DataTables&amp;prompt=Tell%20me%20more%20about%20DataTables.) CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css&quot;&gt;

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

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

&lt;!-- end snippet --&gt;



</details>



huangapple
  • 本文由 发表于 2023年4月17日 14:37:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/76032296.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定