Блог

Главная - Вопросы по программированию - Как я могу использовать DataTable в следующем случае?

Как я могу использовать DataTable в следующем случае?

#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 для добавления функциональности, такой как сортировка значений столбцов и добавление строки поиска и т.д. В мою существующую таблицу