DataTables Jquery

Question

我是DataTables/JSON的新手，我遇到了编码问题。问题是试图将数据信息从一组对象数组中提取到另一组对象数组中；如果我没有正确解释这一点，请原谅。我目前只能从“课程”对象中提取数据，而不能从“学校”中提取数据。我需要把学校的信息提供给课程。该计划不是将学校名称放在多个地方，而是放在一组对象数组中，并根据“课程”>“学校”下提供的id提取所需的数据。

JSON文件示例

{
   "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 - DataTables

该计划是获取列在“课程”(数据)>“学校”下的数字，根据所给的id号提供学校名称。

$(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": [] 
} );  

<!-- 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数据下拉列表

我的另一项任务是提供学校关于下拉式诗句列的信息。因此，当用户单击课程时，他们可以单击下拉列表以获得有关学校的其他信息。目前，format (d)只读取第一个对象courses，但是，我希望它同时读取courses和schools这样的主要对象，并根据ids呈现学校信息。(就像蒂姆·哈克这次在跌势中的回答一样)

/* 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');
    }
} );

Answer 1

这会让你离得很近：

​

$(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>

​

更新：

属于学校的课程..。

​

$(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>

​

如果您还有其他问题，请告诉我，我很乐意提供更多的帮助。