render function not being run
render function not being run
profoundhypnotic
Posts: 12Questions: 5Answers: 0
I want to display an icon in the last row (for now) of my datatable using the render option. however the function in my render is not running. Can anyone spot the issue with my render option? The data is returned as JSON and the datatable is created without issue just the icon is not showing up or anything I put in the render function. The render is in the last data column
$(document).ready(() => {
$.ajax({
type: 'post',
url: 'test.php',
dataType: 'json',
data: $('#filters').serialize(),
success: function(data){
$('#GA').DataTable({
dom: 't',
data: data,
createdRow: (tr, _,rowIndex) => $(tr).attr('rowIndex',rowIndex),
columns:[
{data: 'NAME', title: 'Name'},
{data: 'ROOF_ASSEMBLY', title: 'Roof Assembly'},
{data: 'DOOR_ASSEMBLY', title: 'Door Assembly'},
{data: 'WALL_ASSEMBLY', title: 'Wall Assembly'},
{data: 'PLENUM_ASSEMBLY', title: 'Plenum Assembly'},
{data: 'TANK_BASE_ASSEMBLY', title: 'Tank/Base Assembly'},
{data: 'FINAL_ENCLOSURE_ASSEMBLY', title: 'Final Enclosure Assembly'},
{data: 'ENCLOSURE_ELECTRICAL', title: 'Enclosure Electrical'},
{data: 'SUBPANEL_ASSY_WIRING_ELECTRICAL', title: 'Sub-Panel Assy Wiring'},
{data: 'PREP_ELECTRICAL', title: 'Prep Electrical'},
{data: 'TANK_BASE_ELECTRICAL', title: 'Tank/Base Electrical'},
{data: 'FINAL_ASSEMBLY_ELECTRICAL', title: 'Final Assembly Electrical'},
{data: 'CRANE_OPERATION_SAFETY', title: 'Crane Operation & Safety'},
{data: 'RESPIRATORY_PROTECTION', title: 'Respiratory Protection'},
{data: 'HEAVY_LIFTING', title: 'Heavy Lifting'},
{data: 'FORKLIFT_CERTIFIED', title: 'Forklift Certified'},
{data: 'LOCKOUT_TAGOUT_CERTIFIED', title: 'Lockout Tag-out Certified'},
{data: '5S_TRAINING', title: '5S Training'},
{data: 'CRANE_SLING_TRAINING', title: 'Crane & Sling Training', render: (cellData, _, __, meta) => cellData + '<i class="edit fa fa-pencil"></i>'}
],
pageLength: 50,
});
}
});
});
This question has an accepted answers - jump to answer
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
@colin Thanks for the reply. I made a test case but it doesn't match my scenario because I am using AJAX sourced data. And I get an error (unknown requested parameter) when running it in the test case but I don't when I run it on my web page. no errors of any kind and all the data shows up as I said above. Just the render function is not running or if it is, it it's not returning the icon with the data. Here is the test case: http://live.datatables.net/meheyaxo/1/edit?html,js,output
The
columns.render
function expects the rendered data to use a return statement. I updated yourcolumns.render
function and added the font awesome css in this example:http://live.datatables.net/meheyaxo/2/edit
Kevin
@kthorngren thank you for your reply. That worked in the test case but when I run it in my web app with AJAX data I do not get the icon. I just get the data. In developer tools I can see this in the return statement: return: "0<i class=\"edit fa fa-pencil\"></i>"
Did you install Font Awesome which contains the
fa-pencil
icon?Kevin
@kthorngren thank you. I thought I had included the font awesome css in my page but it turns out I didn't. Thank you for being cool and not making me feel like more of an idiot than I already do.
We all miss the simple things and need someone else to nudge us in the right direction.
Kevin