Using the dataTable Render function with the responsive attribute
Using the dataTable Render function with the responsive attribute

Im using DataTable after fetching my JSON Array, i used the render function to render only the first column.
everything worked fine.
i wanted the table to responsive so by using the instructions used in the site, which said to add a responsive :true with a fixedHeader. now my problem is i get the following warning when adding the responsive feature and i noticed when i delete the render part it works fine.
This is my success function after using "GET", im using a Rest web api.
function getOrderSuccess(OrdersData) {
Orders = OrdersData; // keep the cars array in a global variable;
try {
OrderTbl = $('#OrdersTable').DataTable({
responsive: true,
data: OrdersData,
pageLength: 9,
columns: [
{
render: function (data, type, row, meta) {
let dataOrder = "data-orderId='" + row.OrderID + "'";
viewBtnOrder = "<button type='button' class = 'viewBtnOrder btn btn-info' " + dataOrder + "> View </button>";
return viewBtnOrder;
}
},
{ data: "Name" },
{ data: "Email" },
{ data: "AirportFrom" },
{ data: "AirportTo" },
{ data: "AirlineName" },
{ data: "Departure" },
{ data: "Arrival" },
{ data: "Price" },
],
});
buttonEventsOrder();
new $.fn.dataTable.FixedHeader(OrderTbl);
}
catch (err) {
alert(err);
}
}
This question has an accepted answers - jump to answer
Answers
Even although you’ve given a
render
function you should still give adata
property to the column as well. You could give itnull
If you wanted to get the row’s data object as the first parameter to your rendering function.Allan
Thank you it Worked!!, i just added data:null after the render function