Quantcast
Channel: DataTables 1.9 — DataTables forums
Viewing all articles
Browse latest Browse all 1816

Table Resizing and Google InfoWindow

$
0
0
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

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

Viewing all articles
Browse latest Browse all 1816

Trending Articles