Hi,
I have searched high and low for an answer to my question but wasn't able to get a resolution to my question. I am trying to fit the datatable to fit inside a Google InfoWindow. Below is a snippet of code outlining how I approched to deal with this situationl
Any suggestions are greatly appreciated. Thanks in advance.
Michael
I have searched high and low for an answer to my question but wasn't able to get a resolution to my question. I am trying to fit the datatable to fit inside a Google InfoWindow. Below is a snippet of code outlining how I approched to deal with this situationl
function drawTable(items,e) { var tmpStr = ""; var tmpStr2 = ""; var contentString = [ '<div class="tabs">', '<ul>', '<li><a href="#tab-1"><span>E. Coli Results</span></a></li>', '<li><a href="#tab-2"><span>Cyanobacteria + Microcystin Results</span></a></li>', '</ul>', '<div id="tab-1">', '<h1 style="color:red">' + beach_location + '</h1>', '<p>' + beach_region + '</p>', '<table class="data" id="ecoli_table" style="width:100%">', /* '<tr>', '<th>Sample Date</th>', '<th>Average E. coli Density <br/>(E. coli / 100 mL of sample)</th>', '<th>Recreational Water Quality Guideline <br/> (200 E. coli / 100 mL of sample)</th>', '</tr>' */ ].join(''); // add Ecoli Rows for (var j = 0; j < items.length; j++) { //console.log(items[j]); tmpStr = tmpStr + '<tr> <td>' + items[j][5] + '</td><td>' + items[j][6] + '</td><td>' + items[j][7] + '</td></tr>'; } //contentString = contentString + tmpStr + '</table></div></div>'; contentString = contentString + tmpStr + '</table></div>'; var contentString2 = [ '<div id="tab-2">', '<h1 style="color:red">' + beach_location + '</h1>', '<p>' + beach_region + '</p>', '<table class="data" id="algae_table" style="width:100%">', /* '<tr>', '<th>Sample Date</th>', '<th>Algase Toxin Microcystin</th>', '<th>Recreational Guideline 20ug</th>', '<th>Blue Green Algae Cells</th>', '<th>Recreational Guideline</th>', '</tr>' */ ].join(''); // add Algae Rows for (var j = 0; j < items.length; j++) { //console.log(items[j]); tmpStr2 = tmpStr2 + '<tr> <td>' + items[j][9] + '</td><td>' + items[j][10] + '</td><td>' + items[j][11] + '</td><td>' + items[j][12] + '</td><td>' + items[j][13] + '</td></tr>'; } contentString2 = contentString2 + tmpStr2 + '</table></div>'; contentString = contentString + contentString2 + '</div>'; infoWindow.setContent(contentString); infoWindow.setPosition(e.latLng); infoWindow.open(map); $(".tabs").tabs({ selected: 0 }); $("#ecoli_table").dataTable({ "sPaginationType": "full_numbers", "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "aaSorting": [[0, "desc"]], "bAutoWidth": false, "aoColumns": [ { "sWidth": "25px", "aTargets": ["_all"], "sTitle": "Sample_Date" }, { "sWidth": "25px", "aTargets": ["_all"], "sTitle": "Average_E._coli_Density" }, { "sWidth": "25px", "aTargets": ["_all"], "sTitle": "Recreational_Water_Quality_Guideline" } ], "bProcessing": true, /* "aoColumns": [ { "sTitle": "Sample_Date" }, { "sTitle": "Average_E._coli_Density" }, { "sTitle": "Recreational_Water_Quality_Guideline" } ] */ }); $('#algae_table').dataTable({ "sPaginationType": "full_numbers", "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "bAutoWidth": true, "bProcessing": true, "aaSorting": [[0, "desc"]], "aoColumns": [ { "sTitle": "Sample_Date" }, { "sTitle": "Algal_Toxin_Microcystin" }, { "sTitle": "Recreational_Guideline_20" }, { "sTitle": "Blue_Green_Algae_Cells" }, { "sTitle": "Recreational_Guideline" } ] }); }
Any suggestions are greatly appreciated. Thanks in advance.
Michael