#javascript #datatable
#javascript #datatable
Вопрос:
Следующая html-таблица создается из файла данных json. Пожалуйста, скажите мне, как я могу использовать DataTable, и мне также нужно обновлять таблицу, это означает, что каждые несколько секунд новые данные поступают в файл json, поэтому код должен считывать новый файл json и обновлять его каждые несколько секунд. Запущенная таблица, которую я пытаюсь запустить с помощью DataTable, сообщает, что данные недоступны. Заранее спасибо
<!DOCTYPE HTML>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="js/myjs.js"></script>
<script
src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"
type="text/javascript"></script>
<link rel="stylesheet"
href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<title>qstat</title>
<style>
th,td,p,input {
font:14px Verdana;
}
table ,th, td
{
border: solid 1px#f345;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
color: #2f23d;
<div id="tables">
<div id="tabs">
<ul>
<li><a href="#running_jobs">Running Jobs</a></li>
<li><a href="#queued_jobs">Queued Jobs</a></li>
<li><a href="#hold">Hold Jobs</a></li>
</ul>
<div id="running_jobs">
<table class="data" id="running">
<thead>
<tr>
<th style="display: none">Color</th>
<th class="header_left">Job ID</th>
<th>Job Name</th>
<th>User</th>
<th>Time Use</th>
<th>Queue</th>
</tr>
</thead>
</table>
</div>
<div id="queued_jobs">
<table class="data" id="queued">
<thead>
<tr>
<th class="header_left">Job ID</th>
<th>Job Name</th>
<th>User</th>
<th>Time Use</th>
<th>Queue</th>
</tr>
</thead>
</table>
</div>
<div id="hold_jobs">
<table class="data" id="hold">
<thead>
<tr>
<th class="header_left">Job ID</th>
<th>Job Name</th>
<th>User</th>
<th>Time Use</th>
<th>Queue</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
<script>
function CreateTable()
{
$.getJSON("jsonoutput.json",function(data){
var Running = new Object();
var Queue = new Object();
var Hold = new Object();
for(var i in data)
{
var job = {};
var ndi = data[i]
job.Job_ID = i;
job.Job_Name=ndi["Name"];
job.Job_User=ndi["User"];
job.Job_Time_Use=ndi["Time Use"];
job.Job_State= ndi["State"];
job.Job_Queue= ndi["Queue"];
var job_data = ' ';
job_data = '<tr>';
job_data ='<td>' job.Job_ID '</td>';
job_data ='<td>' job.Job_Name '</td>';
job_data ='<td>' job.Job_User '</td>';
job_data ='<td>' job.Job_Time_Use '</td>';
job_data ='<td>' job.Job_Queue '</td>';
job_data ='</tr>';
if(job.Job_State=="R")
$('#running').append(job_data);
else if(job.Job_State=="Q")
$('#queued').append(job_data);
else
$('#hold').append(job_data);
}
});
}
</script>
<script>
CreateTable();
$('#running').DataTable();
</script>
Комментарии:
1. Добро пожаловать в stackoverflow. 1) Как вы хотите использовать DataTable? 2) Вы задали по крайней мере два вопроса одновременно. Лучшая практика — сосредоточиться на одном отдельном вопросе.
2. Я хочу использовать DataTable для добавления функциональности, такой как сортировка значений столбцов и добавление строки поиска и т.д. В мою существующую таблицу