Datatable JQuery plugin zoom to selected rows onclick

AlexGole

Hi all,

I am trying to figure out how to zoom to a feature when a datatable row is clicked on. Just like this but using datatables instead of GRID dojo.

Any ideas or recommendations would be helpful

My query  my table are fed as such:

function addToMap3(results) {
                             map.graphics.clear();
                             var featureArray = results.features;
                             if (featureArray && featureArray.length > 0) {
                                 // do stuff with the features
                                 arrayUtils.forEach(featureArray, function (feat) {
                                     feat.setSymbol(symbol8);
                                     map.graphics.add(feat);
                                 });
                                 var extent = esri.graphicsExtent(map.graphics.graphics);
                                 map.setExtent(extent, true);


                                 var cols = [],
                                 row = [],
                                 data = [];
                                 var selected = [];


                                 //create columns
                                 $.each(results.fields, function (index, value) {
                                     cols.push({ 'sTitle': value.name });
                                 });


                                 //create columns
                                 //create rows and push into data
                                 $.each(results.features, function (index, value) {


                                     row = [];
                                     $.each(value.attributes, function (index2, value2) {
                                         row.push(value2);
                                     });
                                     data.push(dojo.clone(row));
                                 });




                                 $('#example').dataTable({
                                     dom: 'Bfrtip',
                                     data: data,
                                     columns: cols,
                                     destroy: true,
                                     buttons: [
                                        'copy', 'csv', 'excel', 'pdf', 'print'
                                     ],
                                     "rowCallback": function (row, data) {
                                         if ($.inArray(data.OBJECTID, selected) !== -1) {
                                             $(row).addClass('selected');
                                         }
                                     }


                                 });
                                 $('#example tbody').on('click', 'td', function () {
                                     alert('Row index: ' + table.row(this).index());;
                                 });


                                    
                                 
                                 


                             } else {
                                 // do stuff when no features were found
                                 alert("No features found")
                             }


                         }

My code is here​.

Thanks,

Alex

rscheitlin

Alex,

  This will get you started (only tested for polygons):

Your use of a lower case "d" for DataTable on line 35 caused a real issue in your code.

function addToMap3(results) {
          map.graphics.clear();
          var featureArray = results.features;
          if (featureArray && featureArray.length > 0) {
            // do stuff with the features
            arrayUtils.forEach(featureArray, function (feat) {
              feat.setSymbol(symbol8);
              map.graphics.add(feat);
            });
            var extent = esri.graphicsExtent(map.graphics.graphics);
            map.setExtent(extent, true);

            var cols = [],
              row = [],
              data = [],
              selected = [];

            //create columns
            $.each(results.fields, function (index, value) {
              cols.push({
                'sTitle': value.name
              });
            });

            //create columns
            //create rows and push into data
            $.each(results.features, function (index, value) {
              row = [];
              $.each(value.attributes, function (index2, value2) {
                row.push(value2);
              });
              data.push(dojo.clone(row));
            });

            var table = $('#example').DataTable({
              dom: 'Bfrtip',
              data: data,
              columns: cols,
              destroy: true,
              buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
              "rowCallback": function (row, data) {
                if ($.inArray(data.OBJECTID, selected) !== -1) {
                  $(row).addClass('selected');
                }
              }
            });

            $('#example tbody').on('click', 'tr', function () {
              var d = table.row( this ).data();
              if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
              } else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
                arrayUtils.forEach(featureArray, function (feat) {
                  if(feat.attributes["OBJECTID"] === d[0]){
                    map.setExtent(feat.geometry.getExtent().expand(2.5));
                  }
                });
              }
            });
          } else {
            // do stuff when no features were found
            alert("No features found")
          }
        }