Is there a way to prevent JQuery DataTables cells from extending width after adding hyperlink to cell?
I am facing an issue where I have two tables on the same page. The first table column has a link which populates the second table. It works fine when the first table is rendered for the first time, but the column width does not remain consistent when rendering the table again.
First Time Table Render:
https://i.stack.imgur.com/b50JK.png
Rendering the Same Table Again:
https://i.stack.imgur.com/DvxzE.png
var tblJanusPlate = $('#tbl').DataTable({
"processing": true,
//"serverSide": true,
"bPaginate": false,
"bFilter": false,
"bInfo": false,
"scrollY": "300px",
"scrollCollapse": true,
"bDestroy": true,
"columns": [{
"data": "Name",
"width": "10%"
},
{
"data": "Country",
"render": function(data, type, row, meta) {
return "<a href='" + data + "' id= '" + row + "' style='color: black; text-decoration: none;' onclick='return populateDetails(this,\"" + row.Name + "\",\"region\",\"" + regDate + "\");' >" + row.Record_Count + "</a>";
}, "width": "10%"
}
]
});
$.ajax({
type: "POST",
url: "Service.asmx/PlateStats",
contentType: "application/json",
dataType: "json",
data: "{ regDate: '" + regDate + "', type: '" + command + "'}",
success: function(response) {
response = JSON.parse(response);
tblJanusPlate.clear();
tblJanusPlate.rows.add(response[0]).draw();
}
});