AnsweredAssumed Answered

How to use FeatureTable to display query results

Question asked by zhouleizhou on Jun 26, 2016
Latest reply on Jun 28, 2016 by zhouleizhou

I am studying the following ESRI "Select with Feature layer" sample codes: 

ArcGIS API for JavaScript Sandbox


After that query is finished, I would like to create a FeatureTable and let all the query pink points within the 1 mile buffer go to the FeatureTable. Currently all the records go to the Feature Table, but I just need want to display data in table for the points inside the buffer. Below is my codes. Thanks a lot!


<!DOCTYPE html>



    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Select with feature layer</title>

    <link rel="stylesheet" href="">

    <link rel="stylesheet" href="">


      html, body, #mapDiv {

        padding: 0;

        margin: 0;

        height: 100%;



        background-color: #fff;

        box-shadow: 0 0 5px #888;

        font-size: 1.1em;

        max-width: 15em;

        padding: 0.5em;

        position: absolute;

        right: 20px;

        top: 20px;

        z-index: 40;



    <script src=""></script>


      var map;


        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/FeatureTable",

        "esri/tasks/query", "esri/geometry/Circle",

        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",

        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",

        "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"

      ], function(

        Map, FeatureLayer,FeatureTable,

        Query, Circle,

        Graphic, InfoTemplate, SimpleMarkerSymbol,

        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,

        esriConfig, Color, dom

      ) {

        // use a proxy page if a URL generated by this page is greater than 2000 characters


        // this should not be needed as nearly all query & select functions are performed on the client = "/proxy/";



        map = new Map("mapDiv", {

          basemap: "streets",

          center: [-95.249, 38.954],

          zoom: 14,

          slider: false



        //add the census block points in on demand mode. Note that an info template has been defined so when

        //selected features are clicked a popup window will appear displaying the content defined in the info template.

        var featureLayer = new FeatureLayer("",{

          //infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),

          outFields: ["*"]




        // selection symbol used to draw the selected census block points within the buffer polygon

        var symbol = new SimpleMarkerSymbol(



          new SimpleLineSymbol(


            new Color([247, 34, 101, 0.9]),



          new Color([207, 34, 171, 0.5])




        //make unselected features invisible

        var nullSymbol = new SimpleMarkerSymbol().setSize(0);

        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));




        var circleSymb = new SimpleFillSymbol(


          new SimpleLineSymbol(


            new Color([105, 105, 105]),


          ), new Color([255, 255, 0, 0.25])


        var circle;



        //when the map is clicked create a buffer around the click point of the specified distance.

        map.on("click", function(evt){

          circle = new Circle({

            center: evt.mapPoint,

            geodesic: true,

            radius: 1,

            radiusUnit: "esriMiles"




          var graphic = new Graphic(circle, circleSymb);




          var query = new Query();

          query.geometry = circle.getExtent();

          //use a fast bounding box query. will only go to the server if bounding box is outside of the visible map

          featureLayer.queryFeatures(query, selectInBuffer);






        function selectInBuffer(response){

          var feature;

          var features = response.features;

          var inBuffer = [];

          //filter out features that are not actually in buffer, since we got all points in the buffer's bounding box

          for (var i = 0; i < features.length; i++) {

            feature = features[i];





          var query = new Query();

          query.objectIds = inBuffer;

          myFeatureTable.selectedRowIds = query.objectIds;  // here is what I added

          myFeatureTable._showSelectedRecords(); //



          //use a fast objectIds selection query (should not need to go to the server)

          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){

            var totalPopulation = sumPopulation(results);

            var r = "";

            r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";

            dom.byId("messages").innerHTML = r;








        function sumPopulation(features) {

          var popTotal = 0;

          for (var x = 0; x < features.length; x++) {

            popTotal = popTotal + features[x].attributes["POP2000"];





          return popTotal;




          myFeatureTable = new FeatureTable({

            "featureLayer" : featureLayer,

            "outFields": [



            fieldInfos: [


                name: 'POP2000',

                alias: 'POP2000',




                name: 'HOUSEHOLDS',

                alias: 'Household Name',



            "map" : map

          }, 'myTableNode');










    <span id="messages">Click on the map to select census block points within 1 mile.</span>

    <div id="mapDiv"></div>

    <div id="myTableNode"></div>