web-development-server 相关问题

在开发时,将此标记用于与Web开发服务器相关的问题,即Web应用程序的后端/服务器端。

如何为具有相同 IP 的多个域/主机设置主机文件?

您肯定知道您可以使用“hosts”文件将主机名映射到 IP 地址。这非常有用,尤其是在您进行开发时,因为您可以更改 project1 的本地主机。 那部分很清楚......

回答 2 投票 0

使用 GIN、PostgreSQL 的 GO lang 电子商务项目

我正在使用 Gin、PostgreSQL 在 Go lang 上做我的第一个电子商务项目,我坚持使用 API 为产品添加产品项目……也就是说,如果我添加了 iPhone 14 pro,那么我需要添加 iPhone 14 pro。 ..

回答 0 投票 0

开发网络应用程序的步骤是什么? [关闭]

如何将代码变成可用的网络应用程序?以这个用 JavaScript 编写的简单猜谜游戏为例。编写代码和托管代码之间的过程是什么,比如 AWS。 笔记!!!我是一个

回答 0 投票 0

我在哪里可以找到有关将 PHP 编写的网站部署到服务器的好资源

我目前正在寻找资源来解释如何将我用 php 编写的网页部署到我公司的服务器。我找不到任何超级简洁的链接或解释……

回答 0 投票 0

用户使用正确的用户名和密码正确注册后,我没有正确重定向。我需要一个合适的代码

我使用 nodejs (mysql) 作为后端并作为前端做出反应。所以在这个模块中,当用户正确注册时,我试图重定向到另一个页面(用户名是唯一的,密码匹配重新...

回答 0 投票 0

如何从网站中删除以下 PHP 错误?

如果(array_key_exists('城市',$_GET)) { $city = str_replace(' ','',$_GET...

回答 0 投票 0

我在连接到 mysql 的节点 js 中收到错误消息“发送到客户端后无法设置标头”

我想创建一个注册表单,使用 node.js 连接到后端。它工作正常,但现在我面临着问题 发送到客户端后无法设置标头 当我们...

回答 2 投票 0

为什么我的 PHP 代码没有显示在屏幕上?

<?php // print_r($_POST); $error = ""; $successMessage = ""; if($_POST){ if(!$_POST["email"]){ $error .= "An email address is required.<br>"; } if(!$_POST["content"]){ $error .= "An content address is required.<br>"; } if(!$_POST["sub"]){ $error .= "An subject address is required.<br>"; } if($_POST['email'] && filter_var($_POST,FILTER_VALIDATE_EMAIL) === false ){ $error .= "The email is invalid.<br>"; } if($error != ""){ $error = '<div class="alert alert-danger" role="alert"><p><strong>There were error(s) in your form</strong></p>'.$error.'</div>'; } else{ $emailto = "[email protected]"; $subject = $_POST['sub']; $content = $_POST['content']; $headers = "From: ".$_POST['email']; if(mail($emailto,$sub,$content,$headers)){ $successMessage = '<div class="alert alert-success" role="alert">Your message was sent we\'ll get back to you ASAP.</div>'; } else{ $error = '<div class="alert alert-danger" role="alert"><p><strong>Your message couldn\'t be sent please try again!</div>'; } } } ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <body> <div class="container"> <h1>Get in touch!</h1> <div id="error"><? echo $error.$successMessage; ?></div> <form method="post"> <div class="mb-3"> <label for="email" class="form-label">Email address</label> <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> </div> <div class="mb-3"> <label for="subject" class="form-label">Subject</label> <input type="text" class="form-control" id="subject" name="sub"> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <div class="mb-3"> <label for="content" class="form-label">What would you like to ask us?</label> <textarea class="form-control" id="content" name="content" rows="3"></textarea> </div> <button type="submit" id="submit" class="btn btn-primary">Submit</button> </form> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <!-- <script type="text/javascript"> $("form").submit(function(e){ // e.preventDefault(); var error = ""; if($("#email").val() == ""){ error += "The email field is required.<br>"; } if($("#subject").val() == ""){ error += "The subject field is required.<br>"; } if($("#content").val() == ""){ error += "The content field is required."; } if(error != ""){ $("#error").html('<div class="alert alert-danger" role="alert"><p><strong>There were error(s) in your form</strong></p>'+error+'</div>'); return false; } else{ return true; // $("form").unbind("submit").submit(); } }); </script> --> </body> </html> 我创建了一个简单的表单,其中包含电子邮件、关于和主题字段以及一个提交按钮。当这些字段留空时,错误应该显示在屏幕顶部但错误没有出现。我已经注释掉了底部的 javascript 代码做同样的工作,但 PHP 代码不工作。有人可以帮我找出我的代码中的问题吗?

回答 0 投票 0

我可以使用 Python 而不是 javascript 吗?

我想问我是否可以使用Python而不是Javascript我对Python感兴趣并且我是初学者级别的Web开发人员 我想也许这是可能的?

回答 2 投票 0

如何改进我的网站加载数据/排序/jquery?以及 Web 开发的最佳实践Em...</desc> <question vote="0"> <p>我正在建立一个网站来可视化表格中的数据,如下所示:</p> <p>index.html:</p> <pre><code><!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> </code></pre> <p>数据.js:</p> <pre><code>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" } ] </code></pre> <p>问题一: 但是数据是在 datatable.js 分页之前加载的。 (我试过async,但我不知道该怎么做,所以所有数据仍然在datatable.js函数之前加载?)</p> <p>我不希望所有数据都在第一时间加载。我可能在代码中犯了错误/我的代码设计得不好..如果你能提出任何最佳/行业实践,我将不胜感激(我正在学习 MEAN/MERN 堆栈,将 datatable.js 与堆栈一起使用是行业惯例?)</p> </question> <answer tick="false" vote="0"> <p>我肯定会把你的 document.write 改成这样</p> <p>注意我更新了 tbody 但在完整表上调用了数据表</p> <pre><code>$(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 }); }); </code></pre> <p></p><div data-babel="false" data-lang="js" data-hide="true" data-console="true"> <div> <pre><code>$(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 }); });</code></pre> <pre><code>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; }</code></pre> <pre><code><!-- 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></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>谢谢@mplungjan。 <a href="https://i.stack.imgur.com/d6hTR.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2Q2aFRSLnBuZw==" alt="enter image description here"/></a> 他的剧本很好用。 但抱歉,我没有足够的声誉来投票..</p> <p>我的最终代码是这样的:</p> <pre><code><!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> </code></pre> </answer> </body></html>

我正在建立一个网站来可视化表格中的数据,如下所示: 索引.html: Em...</desc> <question vote="0"> <p>我正在建立一个网站来可视化表格中的数据,如下所示:</p> <p>index.html:</p> <pre><code><!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> </code></pre> <p>数据.js:</p> <pre><code>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" } ] </code></pre> <p>问题一: 但是数据是在 datatable.js 分页之前加载的。 (我试过async,但我不知道该怎么做,所以所有数据仍然在datatable.js函数之前加载?)</p> <p>我不希望所有数据都在第一时间加载。我可能在代码中犯了错误/我的代码设计得不好..如果你能提出任何最佳/行业实践,我将不胜感激(我正在学习 MEAN/MERN 堆栈,将 datatable.js 与堆栈一起使用是行业惯例?)</p> </question> <answer tick="false" vote="0"> <p>我肯定会把你的 document.write 改成这样</p> <p>注意我更新了 tbody 但在完整表上调用了数据表</p> <pre><code>$(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 }); }); </code></pre> <p></p><div data-babel="false" data-lang="js" data-hide="true" data-console="true"> <div> <pre><code>$(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 }); });</code></pre> <pre><code>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; }</code></pre> <pre><code><!-- 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></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>谢谢@mplungjan。 <a href="https://i.stack.imgur.com/d6hTR.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2Q2aFRSLnBuZw==" alt="enter image description here"/></a> 他的剧本很好用。 但抱歉,我没有足够的声誉来投票..</p> <p>我的最终代码是这样的:</p> <pre><code><!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> </code></pre> </answer> </body></html>

回答 0 投票 0

如何制作仪表板页面?

我的团队正在尝试为课堂项目制作一个网站。我必须制作一个用户仪表板。基本上,一个检查帐户、更改用户名或密码的地方。我们的团队正在为

回答 0 投票 0

在切换到新页面时,React js 主页保持呈现状态

当我按下按钮容器 1 内的按钮时,页面发生变化,但上一页的内容保持呈现状态。我该如何解决这个问题? 功能应用程序(){ const navigate = useNavigate()...

回答 1 投票 0

无法读取未定义的属性(读取“推”)TypeError:无法读取未定义的属性(读取“推”)

<Button onClick={addToCartHandler} className='btn-block' type='button' disabled={product.countInStock === 0} > addToCartHandler = () => { history.push(`/cart/${id}?qnty=${qnty}`); 我创建了这个在点击按钮时触发的处理程序,但这给了我一个错误。 所以每次我重新加载我的浏览器时一切都很好但是一旦我点击/提交按钮就会出现以下错误。 有知道的请帮忙 提前致谢 http://localhost:3000/product/6433aff75554e4fb06a43505?qnty=3 所以假设我输入“3”并使用按钮提交,URL 现在应该如上所示。 相反,它只是告诉我一个错误

回答 0 投票 0

如何运行要在我的网站上运行的 Flask 应用程序?

欢迎大家 这是我的 falsk 应用程序 http://207.246.77.1:5000/ashrafapp 我将它上传到我的服务器,我想在同一台服务器上的我的网站 https://www.ailottoexpert.com/ 上运行它 我怎样才能...

回答 0 投票 0

Flask WTForms 提交按钮根本不起作用

我似乎在提交注册时遇到问题,当我点击提交按钮时,什么也没有发生。 我目前正在关注 YT 上的 Flask 教程,由 JimShapedCoding 链接到 ...

回答 0 投票 0

为什么我在 React.js 中使用 ityped 包后得到双字母?

当我的 react.js 网站使用 typed 包时,它显示双字母而不是一个。 截图:https://ibb.co/pd6GmHQ 在没有 backDelay 和 backSpeed 的情况下运行一次时,它是 r ...

回答 4 投票 0

无法理解大公司的大型代码库[关闭]

每当我看到一些行业项目的文件夹结构时,我不明白这些东西是什么以及如何连接的。 我尝试了代码,但它只跟踪 GitHub 拉取请求。我有足够的知识...

回答 1 投票 0

POST 请求失败 -React 应用程序

请看代码: 我认为代码是合乎逻辑的,但前端“onFinish”函数有问题。我已经检查了 api 路由,它们看起来还不错..所以有点困惑 注册前台...

回答 1 投票 0

Hibernate - 主键问题 - 将对象持久化到 mySQL 数据库不起作用

我正在开发一个“简单”的 Web 应用程序项目,并使用 Hibernate 处理模型和数据库;特别是这是一个在线块笔记应用程序,所以在数据库中我有一个用户表......

回答 0 投票 0

我收到了一个已经编写好的 django 项目,该项目以前在另一台机器上运行过,但是当我尝试运行它时没有任何反应

这就是发生的事情 PS C:\Users\***\Downloads\zapisy.zip\zapisy\zapisy-old\src\main python manage.py runserver PS C:\Users\***\Downloads\zapisy.zip\zapisy\zapisy-旧\源\主要> 我刚打开它

回答 0 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.