Attach JSON data to a table cell for each row
Attach JSON data to a table cell for each row
lfischer
Posts: 1Questions: 1Answers: 0
For each item in the JSON data (a course), the table row is generating properly. I need a button at the end of each row that contains all the data for that course to use to generate a course detail page. Just padding an ID and then doing another AJAX call is inefficient when we've already done one to build the dataTable. How do I pass a whole item from the JSON to the data for that cell, instead of the course_id?
JS
courseTable = $('.js-course-list').DataTable( {
"processing": false,
"searching": false,
"lengthChange": false,
"pageLength": 20,
"ajax":{"url":"/api/courses.json?" + type + "=" + id + "&year=" + year,"dataSrc":""},
"columnDefs": [ {
"targets": 7,
"data": "details",
"render": function ( data, type, row, meta ) {
return DO STUFF WITH DATA ITEM;
}
}
} ],
"columns": [
{ "data": "institution_name" },
{ "data": "course_details[0].prefix" },
{ "data": "course_details[0].number" },
{ "data": "course_details[0].he_gen_ed_code" },
{ "data": "course_details[0].title" },
{ "data": "course_details[0].core_code" },
{ "data": "course_details[0].core_title" },
{ "data": PASS WHOLE ITEM }
]
});
SAMPLE JSON (There are more than 800 entries like this)
{
"id":542,
"institution_id":8,
"created_at":"2017-08-10T20:04:17.248Z",
"updated_at":"2017-09-07T18:52:10.815Z",
"first_term":"fall",
"last_term":"",
"first_term_year":2015,
"last_term_year":null,
"likes_count":0,
"course_details":[
{
"id":906,
"course_id":542,
"hs_core_flag":false,
"prefix":"CMST",
"number":"2110",
"title":"Interpersonal Communications",
"created_at":"2017-10-18T14:52:13.637Z",
"updated_at":"2017-11-21T17:37:15.190Z",
"year":2017,
"notes":"",
"available_in_grades":"10, 11, 12",
"typically_available_in_grades":"11, 12",
"core_code":"06010013020",
"core_title":"Applied Communication 1 CE",
"cip_code":null,
"enrollment_conditions":"All sections must be capped at 30 students.",
"he_gen_ed_code":"H",
"like_courses":179,
"college_credit_hours":3,
"short_description":"Examination of theories, methods, and competencies relevant to studying, establishing, and maintaining interpersonal relationships in family, intercultural, professional, and other contexts. Classroom experiences with topics such as perception, language, nonverbal behavior, conflict resolution, and listening.",
"long_description":"",
"delivery_method":9,
"approval_date":"2014-11-30",
"exploratory_major":null,
"status":"active",
"first_term":"fall",
"last_term":"",
"perkins_cluster":3,
"world_of_work_map":"c",
"fulfillment_type":"",
"award_names":"",
"award_types":"",
"usbe_cte_pathways":"",
"deleted_at":null,
"he_gen_ed_text":"Humanities",
"exploratory_subpathways":[
{
"id":44,
"external_id":36,
"name":"Communication",
"exploratory_major":"Artistic",
"created_at":"2017-02-15T19:34:41.010Z",
"updated_at":"2017-02-15T19:34:41.010Z"
}
]
}
],
"liked":false,
"institution_name":"University"
}
This discussion has been closed.
Answers
Two options:
columns.data
to benull
in which case the entire object is passed in as thedata
columns.render
callback - in the case above it is calledrow
, so you could just set the data property to be the id and then use the row parameter.Allan