Question

以下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>

在以下情况下如何使用DataTable？

0 个答案: