Loop through jQuery DataTable Rows

Question

I have some datatables on a page, what I am looking to do is loop through ALL rows (visible and hidden) and if the row is visible I want to display another piece of content elsewhere on the page otherwise hide the associated marker. Below is what I have tried, but it doesn't work, how can i accomplish the below functionality? the markers are google map markers to be clear.

     var oTable = $('#myTable').dataTable();
     var rows = oTable.fnGetNodes();

     for (var i = 0; i < rows.length;i ++)
     {
         //how do i check if node is visible
         if (rows[i].isShown())
         {
              markers[i].show();
         }
         else
         {
              markers[i].hide();
         }
     }

Answer 1

Well I ended up solving this and wanted to share since there are very limited examples of linking Datatables and Google Map Markers, in the example below I removed a bunch of columns for ease of reading there are 24 columns in my live table.

the trick was to make sure the datatable is the center of action, so that meant the datatable needed to actually create the markers for each row it created. that made me look at the order of callbacks the table did which is important or the markers disappear again.

    var markers = new Array(),
        infoWindows = new Array(),
        map;
    //helper functions
    function selectRow(table, row){
            if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
        }
        else {
            // Open this row
            $(".expandcollapse").each(function() {
                var tr = $(this).closest('tr');
                var tmp = table.row(tr);
                tmp.child.hide();

            });
            row.child( format(row.data()) ).show();
        }
    }

     function closeAllInfoWindows() {

        for (var infoWindowIndex in infoWindows) {
            infoWindows[infoWindowIndex].close();
        }
     }

            //remove existing markers
    for (var iM = 0; iM < markers.length; iM++)
    {   
        markers[iM].setMap(null);
    }
            //prep arrays for new content
    markers = new Array();
    infoWindows = new Array();
    //map definition
    var bounds = new google.maps.LatLngBounds();
    var mapProp = {
        center: new google.maps.LatLng(47.17, -120.3331),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('googleMap'), mapProp);

            //setup jQuery Datatable
    var table = $('#listings').DataTable({
        "data": props,
        "searching": true,
        "oTableTools": { "sRowSelect": "single" },
        "paging": false,
        "sDom": 't',
        "bScrollCollapse": true,
        "bDestroy": true,
        "scrollY": "650px",
        "columns": [
            { "title": "",          //0 Icon
            "class": "expandcollapse",
            "defaultContent": "-" },
            { "title": "Address",       //1 Address
            "class": "expandcollapse",
            "defaultContent": "-" },
            { "title": "Bed",           //5 Beds
            "class": "expandcollapse",
            "defaultContent": "-" },
            { "title": "Bath",          //6 Baths
            "class": "expandcollapse",
            "defaultContent": "-"},
            { "title": "Price",         //7 Price
            "class": "expandcollapse",
            "defaultContent": "-" },
            { "title": "SQ/FT",         //8 SQ/FT
            "class": "expandcollapse",
            "defaultContent": "-" },
            { "title": "Lot Size",      //9 Lot Size
            "class": "expandcollapse",
            "defaultContent": "-" },
            { "title": "ROI",           //10 ROI
            "class": "expandcollapse",
            "defaultContent": "-" },
            {
             "title": "Latitude",       //11 Latitude
            "defaultContent": "",
            "bSearchable": false,
             "visible": false
            },
            {
             "title": "Longitude",      //12 Longitude
            "defaultContent": "",
            "bSearchable": false,
             "visible": false
            },
            {
             "title": "Image",          //14 Image
            "defaultContent": "../images/silhouette.png",
            "bSearchable": false,
             "visible": false
            },
            {
             "title": "YearBuilt",  //23 YearBuilt
            "defaultContent": "-",
            "bSearchable": true,
             "visible": false
            }                               

        ],          
        "createdRow": function(row, data, index) {
            var jRow = $(row);
            jRow.on('click', function(e) {
                $('tr').removeClass("focused");
                $(this).addClass("focused");
                closeAllInfoWindows();
                infoWindows[index].open(map, markers[index]);
            });     
        },
        "preDrawCallback": function(settings) {
            for (var i = 0; i < markers.length; i++)
            {
                markers[i].setMap(null);
            }
        },          
        "rowCallback": function(row, data, index) {
                //infoWindow content
            var chHtml = "<h3><a href=''"
                + " target='_blank'>" + data[1] + "</a></h3><div>"
                + "<img src=" + data[14]
                + " width='80' height='61' />"
                + "</div><div>" + data[7] + "</div>";

           var infoWindow = new google.maps.InfoWindow({content: chHtml});
           infoWindows.push(infoWindow);
               //marker setup
           var latLng = new google.maps.LatLng(data[11], data[12]);
            //alert(data[11] + " " + data[12]);
            var marker = new google.maps.Marker({
               position: latLng,
               map: map,
               icon: GetIcon(data[15])
            });
            markers.push(marker);

            google.maps.event.addListener(marker, 'click', (function(marker, index) {
                return function() {
                    var table = $('#listings').DataTable({ "bRetrieve": true });
                    var row = table.row(index);
                    var data = row.data();
                    selectRow(table, row);
            closeAllInfoWindows();
                    infoWindow.open(map, marker);
                }
            })(marker, index));

        }                       
    });