I have a Google visualization data table that works well, but I am facing an issue with the width of the table. When I click as shown in the image, I call the function drawTable(); and then I encounter this:
As you can see, the table does not have a width of 100%;
However, when I click on "Mehanizacija" again, as shown in the photo, I call the function drawTable() once more and everything is okay:
So, what is causing the problem with the datatable width? Why do I need to call the drawTable() function twice for it to work properly? Is there any way to fix this so that the datatable gets the width: 100% with just one click?
Here is my function drawTable();:
function drawTable() {
// Create and populate the data table.
var JSONObject = $.ajax({
url: 'call_radnici.php', // make sure this URL points to the correct data file
dataType: 'json',
data:{ajdi:ajdi},
async: false,
type: 'POST',
}).responseText;
var data = new google.visualization.DataTable(JSONObject, 0.5);
data.addColumn('string', '');
for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
var mc = data.getNumberOfColumns()-1;
data.setValue(y, mc, '<div data-toggle="tooltip" data-placement="top" title="Delete this day data"><i class="fa fa-trash-o" ></i></div>');
}
var table = new google.visualization.Table(document.getElementById('tplradnici'));
table.draw(data, {'allowHtml': true, cssClassNames: {
'headerRow': 'zaglavlje1',
'tableRow': 'red',
'oddTableRow': 'red',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': 'prekoreda',
'headerCell': 'gold-border',
'tableCell': 'cell',
'rowNumberCell': 'underline-blue-font'}
});
};