DataTables Jquery JSON

我是DataTables/JSON的新手，我遇到了一個編碼問題。問題是試圖將數據信息從一個對象數組集合到另一個對象數組中;如果我沒有正確解釋，請原諒我。我目前只能從「課程」對象中提取數據，但不能從「學校」中提取數據。我需要從學校提供信息到課程。是不是把在多個地方，但在一組對象數組的學校名稱和拉所需要的數據計劃取決於DataTables Jquery JSON

JSON txt文件，例如

下的「課程」給出的ID>「學校」

{ 
    "courses" : [ 
     { 
      "course_id" : "1", 
      "course_title" : "Mathematics", 
      "school" : [ 
       "1", 
       "3" 
      ] 
      "cost" : "$100" 
     }, 
     { 
      "course_id" : "2", 
      "course_title" : "Science", 
      "school" : [ 
       "2", 
       "3" 
      ] 
      "cost" : "$50" 
     } 
    ], 
    "schools" : [ 
     { 
      "school_id" : "1", 
      "school_name" : "School of Mathematics", 
      "school_info" : "You will learn more about math in this school",    
     }, 
     { 
      "school_id" : "2", 
      "school_name" : "School of Social Studies", 
      "school_info" : "You will learn more about geography and how it plays a role in science",    
     }, 
     { 
      "school_id" : "3", 
      "school_name" : "School of Science", 
      "school_info" : "You will learn more about math and science and how it relates to one another",    
     } 
    ] 
}

JQUERY - 數據表

該計劃是搶那些在「課程」（數據）>「學校」，以呈現出給定取決於身份證號碼，學校名稱列出的數字

基於關名

$(document).ready(function() { 
var table = $('#example').DataTable({ 
    "ajax": { 
       "url": "data/data.txt", 
       "dataSrc" : "courses" 
      }, 
    "columns": [ 
     { 
      "className":  'details-control', 
      "orderable":  false, 
      "data":   null, 
      "defaultContent": '' 
     }, 
     { "data": "course_id"}, 
     { "data": "course_title"}, 
     { "data": "cost" }, 
     { "data": "school" } 
    ], 
    "order": [] 
});

HTML

<!-- DataTable Layout -->     
      <table id="example" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Course ID</th> 
      <th>Course Title</th> 
      <th>Cost</th> 
      <th>Schools</th> 
     </tr> 
    </thead> 
</table>

附加JQUERY數據表的下拉列表中Datatable child rows

我額外的任務是繪製的下拉詩句列學校的信息。所以，當用戶點擊課程時，他們可以點擊下拉菜單來獲取關於學校的更多信息。目前，format (d)僅讀取第一個對象courses，但是，我希望它讀取兩個主要對象，如courses和schools，並根據ID呈現學校信息。（類似蒂姆·哈克只是在下拉菜單中是如何回答這個時候）

/* Formatting function for row details - modify as you need */ 
function format (d) { 



// `d` is the original data object for the row 
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
    '<tr>'+ 
     '<td>Course Title:</td>'+ 
     '<td>'+d.course+'</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
     '<td>School:</td>'+ 
     '<td>'+d.schools+'</td>'+ 
    '</tr>'+ 
    '</table>'; 
    } 

// Add event listener for opening and closing details 
$('#example tbody').on('click', 'td.details-control', function() { 
    var tr = $(this).closest('tr'); 
    var row = table.row(tr); 


    if (row.child.isShown()) { 
     // This row is already open - close it 
     row.child.hide(); 
     tr.removeClass('shown'); 
    } 
    else { 
     // Open this row 
     row.child(format(row.data())).show(); 
     tr.addClass('shown'); 
    } 
});

來源

2017-03-27 programmer12

這應該讓你的相當接近：

$(document).ready(function() { 
 
    var source = { 
 
    "courses": [{ 
 
     "course_id": "1", 
 
     "course_title": "Mathematics", 
 
     "school": [ 
 
      "1", 
 
      "3" 
 
     ], 
 
     "cost": "$100" 
 
     }, 
 
     { 
 
     "course_id": "2", 
 
     "course_title": "Science", 
 
     "school": [ 
 
      "2", 
 
      "3" 
 
     ], 
 
     "cost": "$50" 
 
     } 
 
    ], 
 
    "schools": [{ 
 
     "school_id": "1", 
 
     "school_name": "School of Mathematics", 
 
     "school_info": "You will learn more about math in this school" 
 
     }, 
 
     { 
 
     "school_id": "2", 
 
     "school_name": "School of Social Studies", 
 
     "school_info": "You will learn more about geography and how it plays a role in science" 
 
     }, 
 
     { 
 
     "school_id": "3", 
 
     "school_name": "School of Science", 
 
     "school_info": "You will learn more about math and science and how it relates to one another" 
 
     } 
 
    ] 
 
    }; 
 
    var table = $('#example').DataTable({ 
 
    "data": source.courses, 
 
    "columns": [{"data": "course_id"}, 
 
     {"data": "course_title"}, 
 
     {"data": "cost"},              
 
     {                 
 
     "data": "school", 
 
      render: function(data, type, row) {  
 
      var schools = ''; 
 
      $.each(data, function(index, value) { 
 
      schools += ', ' + source.schools[value - 1].school_name; 
 
      }); 
 
      return schools.substring(2);                 
 
     }            
 
     } 
 
    ], 
 
    "order": [] 
 
    }); 
 
})

<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css " rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js "></script> 
 
<table id="example" cellspacing="0" width="100%"> 
 
    <thead> 
 
    <tr> 
 
     <th>Course ID</th> 
 
     <th>Course Title</th> 
 
     <th>Cost</th> 
 
     <th>Schools</th> 
 
    </tr> 
 
    </thead> 
 
</table>

UPDATE：

課程屬於學校...

$(document).ready(function() { 
 
    var source = { 
 
    "courses": [{ 
 
     "course_id": "1", 
 
     "course_title": "Mathematics", 
 
     "school": [ 
 
      "1", 
 
      "3" 
 
     ], 
 
     "cost": "$100" 
 
     }, 
 
     { 
 
     "course_id": "2", 
 
     "course_title": "Science", 
 
     "school": [ 
 
      "2", 
 
      "3" 
 
     ], 
 
     "cost": "$50" 
 
     } 
 
    ], 
 
    "schools": [{ 
 
     "school_id": "1", 
 
     "school_name": "School of Mathematics", 
 
     "school_info": "You will learn more about math in this school" 
 
     }, 
 
     { 
 
     "school_id": "2", 
 
     "school_name": "School of Social Studies", 
 
     "school_info": "You will learn more about geography and how it plays a role in science" 
 
     }, 
 
     { 
 
     "school_id": "3", 
 
     "school_name": "School of Science", 
 
     "school_info": "You will learn more about math and science and how it relates to one another" 
 
     } 
 
    ] 
 
    }; 
 
    var table = $('#example').DataTable({ 
 
    "data": source.schools, 
 
    "columns": [ 
 
     {"data": "school_id"}, 
 
     {"data": "school_name"}, 
 
     {"data": "school_info"},              
 
     {                 
 
     "data": "courses", 
 
      render: function(data, type, row) {  
 
      var courses = ''; 
 
      $.each(source.courses, function(index, course) { 
 
      if (course.school.indexOf(row.school_id) > -1) 
 
       courses += ', ' + course.course_title; 
 
      }); 
 
      return courses.substring(2);           
 
     }            
 
     } 
 
    ], 
 
    "order": [] 
 
    }); 
 
})

<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css " rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js "></script> 
 
<table id="example" cellspacing="0" width="100%"> 
 
    <thead> 
 
    <tr> 
 
     <th>School ID</th> 
 
     <th>School Name</th> 
 
     <th>School Info</th> 
 
     <th>Courses</th> 
 
    </tr> 
 
    </thead> 
 
</table>

讓我知道，如果你有任何問題，樂於幫助更多。

來源

2017-03-28 01:19:44

不錯！這絕對有助於我走向正確的方向。我有一個問題是我們能否讓'var source'包含對腳本的ajax調用，並將它添加到同一頁面中？ – programmer12

我想通了。我很感激你的助手！我所做的是添加'$ .getJSON（url，function（data））'，並將包含我的數據表腳本的函數變量data包含在'var source = data'中。我必須這樣做，因爲它給了我一個null或undefined，否則。謝謝 – programmer12

我還有另一個問題。我實際上使用這種類型的DataTables：[https://www.datatables.net/examples/api/row_details.html]，我注意到我的下拉列表不起作用，我會嘗試解決這個問題。但真正的問題是，如果我想在下拉列表中添加學校名稱，我將如何着手這樣做？此外，如果有更好的方法來包含JSON txt數據詩句，就像我解決它的方式一樣，請隨時分享:)謝謝！ – programmer12

DataTables Jquery JSON

回答

相關問題