Question

我在页面上有一些数据表，我要做的是遍历所有行（可见和隐藏），如果行是可见的，我想在页面的其他地方显示另一段内容，否则隐藏相关的标记。以下是我的尝试，但它不起作用，我怎样才能完成以下功能？标记是google地图标记要清楚。

     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

好吧，我最终解决了这个问题并希望分享，因为链接Datatables和Google Map Markers的示例非常有限，在下面的示例中，为了便于阅读，我删除了一堆列，我的live table中有24列。

诀窍是确保数据表是操作的中心，这意味着实际为其创建的每一行创建标记所需的数据表。这让我看到表格所做的回调顺序很重要，或者标记再次消失。

    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));

        }                       
    });

循环遍历jQuery DataTable Rows

1 个答案: