I'm trying to make a table directly from a JSON produced by a feature layer query.
I want to do the same that you can watch in this tutorial: JSON data to HTML Table using Ajax Jquery getJSON method - YouTube
I try to use too some diferents plugins in wordpress, but no one work. I don't now why. Maybe is because this JSON format is not usual.
Any help will be appreciated
David,
It is just that the JSON structure is more complex then what they were demoing in that video. This work fine:
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN> Json to table using Ajax Jquery getJSON<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fcode.jquery.com%2Fjquery-latest.js" target="_blank">http://code.jquery.com/jquery-latest.js</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.1.0%2Fjquery.min.js" target="_blank">https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.6%2Fcss%2Fbootstrap.min.css" target="_blank">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css</A><SPAN>"</SPAN></SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js" target="_blank">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"container"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"table-responsive"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>h1<SPAN class="operator token">></SPAN> Proyectos Axial<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>h1<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>br <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>table <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"table table-bordered table-striped"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"proyecto_table"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>tr<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>th<SPAN class="operator token">></SPAN>Proyecto<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>th<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>th<SPAN class="operator token">></SPAN>País<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>th<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>th<SPAN class="operator token">></SPAN>Tipo<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>th<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>th<SPAN class="operator token">></SPAN>Año<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>th<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>th<SPAN class="operator token">></SPAN>Mw<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>th<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>th<SPAN class="operator token">></SPAN>Servicio<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>th<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>tr<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>table<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">ready</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> $<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getJSON</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="template-string token"><SPAN class="string token"><SPAN>`</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fservices3.arcgis.com%2FjnX4wFvqGblynr5O%2FArcGIS%2Frest%2Fservices%2F201801_Proyectos_Axial_P%2FFeatureServer%2F0%2Fquery%3Fwhere%3D1%253D1%26objectIds%3D%26time%3D%26geometry%3D%26geometryType%3DesriGeometryEnvelope%26inSR%3D%26spatialRel%3DesriSpatialRelIntersects%26resultType%3Dnone%26distance%3D0.0%26units%3DesriSRUnit_Meter%26returnGeodetic%3Dfalse%26outFields%3DProyecto%252C%2BPais%252C%2BTipo%252C%2BAno%252C%2BMw%252C%2BServicio%26returnHiddenFields%3Dfalse%26returnGeometry%3Dfalse%26multipatchOption%3DxyFootprint%26maxAllowableOffset%3D%26geometryPrecision%3D%26outSR%3D%26datumTransformation%3D%26applyVCSProjection%3Dfalse%26returnIdsOnly%3Dfalse%26returnCountOnly%3Dfalse%26returnExtentOnly%3Dfalse%26returnDistinctValues%3Dfalse%26orderByFields%3D%26groupByFieldsForStatistics%3D%26outStatistics%3D%26having%3D%26resultOffset%3D%26resultRecordCount%3D%26returnZ%3Dfalse%26returnM%3Dfalse%26returnExceededLimitFeatures%3Dtrue%26quantizationParameters%3D%26sqlFormat%3Dnone%26f%3Dpjson%26token%3DmVTNXfXrRsHNF3AwnE9WlVaSuZowDPXs8Tth7eP91A6g9oLS-a8diHtY14yxjayhoDLfXxdL2CqznnUlg_kxOT3ciSluph0jAPmmjaAa0r0TqZzR-kV12pd6H6XOSj1DbDEJ16FkF0TCnIzU4GF3L4wMbr-TWgYkKZvVgdQuzDP740Tkn0L2KkFgsiuDYK_IBHPuZ3oXKsRzsCFxPZVFmIhcb1UixG6i2Kzrn01K3EU" target="_blank">https://services3.arcgis.com/jnX4wFvqGblynr5O/ArcGIS/rest/services/201801_Proyectos_Axial_P/FeatureServer/0/query?where=1%3D1&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&resultType=none&distance=0.0&units=esriSRUnit_Meter&returnGeodetic=false&outFields=Proyecto%2C+Pais%2C+Tipo%2C+Ano%2C+Mw%2C+Servicio&returnHiddenFields=false&returnGeometry=false&multipatchOption=xyFootprint&maxAllowableOffset=&geometryPrecision=&outSR=&datumTransformation=&applyVCSProjection=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnDistinctValues=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&returnExceededLimitFeatures=true&quantizationParameters=&sqlFormat=none&f=pjson&token=mVTNXfXrRsHNF3AwnE9WlVaSuZowDPXs8Tth7eP91A6g9oLS-a8diHtY14yxjayhoDLfXxdL2CqznnUlg_kxOT3ciSluph0jAPmmjaAa0r0TqZzR-kV12pd6H6XOSj1DbDEJ16FkF0TCnIzU4GF3L4wMbr-TWgYkKZvVgdQuzDP740Tkn0L2KkFgsiuDYK_IBHPuZ3oXKsRzsCFxPZVFmIhcb1UixG6i2Kzrn01K3EU</A><SPAN>.`</SPAN></SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> proyecto_data <SPAN class="operator token">=</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">;</SPAN> console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> $<SPAN class="punctuation token">.</SPAN><SPAN class="token function">each</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>key<SPAN class="punctuation token">,</SPAN> value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> proyecto_data <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<tr>'</SPAN><SPAN class="punctuation token">;</SPAN> proyecto_data <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<td>'</SPAN> <SPAN class="operator token">+</SPAN> value<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Proyecto <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td>'</SPAN><SPAN class="punctuation token">;</SPAN> proyecto_data <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<td>'</SPAN> <SPAN class="operator token">+</SPAN> value<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Pais <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td>'</SPAN><SPAN class="punctuation token">;</SPAN> proyecto_data <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<td>'</SPAN> <SPAN class="operator token">+</SPAN> value<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Tipo <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td>'</SPAN><SPAN class="punctuation token">;</SPAN> proyecto_data <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<td>'</SPAN> <SPAN class="operator token">+</SPAN> value<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Ano <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td>'</SPAN><SPAN class="punctuation token">;</SPAN> proyecto_data <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<td>'</SPAN> <SPAN class="operator token">+</SPAN> value<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Mw <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td>'</SPAN><SPAN class="punctuation token">;</SPAN> proyecto_data <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<td>'</SPAN> <SPAN class="operator token">+</SPAN> value<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Servicio <SPAN class="operator token">+</SPAN> <SPAN class="string token">'</td>'</SPAN><SPAN class="punctuation token">;</SPAN> proyecto_data <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<tr>'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#proyecto_table'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN>proyecto_data<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Yeah, I originally specified the ordering in the REST query but didn't like having to then mess with the native styles. Sorry I edited my original before seeing your response...if I do client-side, I am limited to the 1,000 features returned by the server. So yes, I'm trying to do that concatenation you mention, but I don't know how to "snoop" on the order requested by the user when creating that concatenation. I'm searching for examples of where the DataTables request can be self-referenced.
I usually set the order in the REST query - typically I navigate to the service endpoint and use the graphical query builder to generate a URL. In the above example (service is now offline), there is no ordering, the data is already ordered appropriately.
You could also specify client-side ordering, or as per the link you provided it seems possible to pass the ordering specified by the table to the URL. To append the ordering to the URL, it seems like you would need to concatenate the values provided by the link you gave into the URL for the field and field order.
William, this is a great example. I'm currently struggling with getting DataTables to alter the AJAX request for sorting when my REST endpoint expects "orderByFields = <FIELD><ASC/DESC>", and DataTables just sends the two "order" params defined at https://datatables.net/manual/server-side
If I could somehow self-reference those options in the "data" function, I could customize the request and make it work. But your example makes me think you got it working WITHOUT customization. Maybe that's because you're not using the serverSide option and have less than the typical Esri REST-endpoint limit of 1,000 rows. Could you confirm that's true? Thanks --mike
You can also use the jQuery DataTables plugin to produce an interactive HTML table; this includes options for scrolling, pagination, download buttons, and much more. If the service is secured, you would need to get an OAuth Token first and then append the token to your URL query.
This is a commented template that I use for building tables from ArcGIS REST services, based on a URL to a JSON generated by the Query tool at the REST endpoint - this will work provided the the Max Record query limit is less than the total number of records. You can modify the query limit at the Admin REST endpoint for the service.
To begin, a references to jQuery DataTables and default CSS styles for DataTables will need to be added to the page header. If using the Buttons extension to enable download of table data, additional JS and CSS references will need to be included. The following shows the full header for a page with download options enabled:
Buttons
<SPAN class="comment token"><!-- Have to do this to support Internet Explorer --></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">http-equiv</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>X-UA-Compatible<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>IE<SPAN class="punctuation token">=</SPAN>edge<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="comment token"><!-- Must include references to jQuery 1.10 and jQuery datatables --></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>http://www.maine.gov/awt/js5/jquery-1.10.2.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">language</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="comment token"><!-- Include these references if using export buttons --></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">language</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">language</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">language</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">language</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">language</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">language</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">language</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="comment token"><!-- Prebuilt CSS styles for data tables --></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="comment token"><!-- CSS styles for export buttons --></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
<SPAN class="" style="color: #969896;"></SPAN>
Moving on to set up the style table in HTML - add a heading for the table and CSS styling. In the example I use default DataTables styling but then add custom CSS to center align text in the table. Note this would center align ANY table in the page.
<SPAN class="selector token"><!-- Heading for above the table --> <h3 id="landings_list_h">List of lobster landings per year.</h3> <!-- Include this style tag if adding search fields to the footer of the table --> <style type="text/css" class="init"> tfoot input</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 8pt<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 1px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">box-sizing</SPAN><SPAN class="punctuation token">:</SPAN> border-box<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token"></style> <!-- Optionally set custom CSS for table here. This CSS center aligns all columns in all tables. For help see here: https://www.w3schools.com/css/css_table.asp --> <style type="text/css" class="custom_table"> table</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">border-collapse</SPAN><SPAN class="punctuation token">:</SPAN> collapse<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">th</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">td</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> </style><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Then set up the actual table, assigning the table a unique ID and adding column headers for the data. The column names can be different from the name of the source field connecting to the table - the data from AGOL will be inserted by index, not by name. The table style was setup using the options available from DataTables, as explained here.
<SPAN class="comment token"><!-- Set table ID here and build HTML table. Use DataTables CSS options from https://datatables.net/manual/styling/classes or use class = "custom_table" if only using CSS defined in custom CSS above --></SPAN> <table id="landings_table" class= "stripe cell-border order-column hover" cellspacing="0" width="100%"> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>thead</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="comment token"><!-- Add the column header names for the table here --></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN>10</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Year<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN>10</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Port<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN>10</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Pounds Landed<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN>10</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Value Landed<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>thead</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="comment token"><!-- Include tfoot tag if using search fields at bottom of table, and put field names in. --></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tfoot</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Year<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Port<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Pounds Landed<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Value Landed<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tfoot</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tbody</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tbody</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>table</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
The HTML for the table is setup - now we need some JavaScript to insert the data from the query to AGOL into the table. The template below should be modified in the following ways:
#landings_table
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> JavaScript to populate table starts here <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script type<SPAN class="operator token">=</SPAN><SPAN class="string token">'text/javascript'</SPAN><SPAN class="operator token">></SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">ready</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Setup - add a text input to each footer cell. Omit this if no search fields needed.</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#landings_table tfoot th'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">each</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Change table element ID here</SPAN> <SPAN class="keyword token">var</SPAN> title <SPAN class="operator token">=</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#landings_table thead th'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">eq</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">index</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">text</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Change table element ID here</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">'<input type="text" placeholder="Search '</SPAN><SPAN class="operator token">+</SPAN>title<SPAN class="operator token">+</SPAN><SPAN class="string token">'" />'</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Put in URL to AGOL JSON, build using ArcGIS REST endpoint query tool (query 1=1, fields = *)</SPAN> <SPAN class="keyword token">var</SPAN> url <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://services1.arcgis.com/RbMX0mRVOFNTdLzd/arcgis/rest/services/MaineDMR_Lobster_Landings/FeatureServer/0/query?where=1%3D1&objectIds=&time=&resultType=none&outFields=*&returnHiddenFields=false&returnIdsOnly=false&returnUniqueIdsOnly=false&returnCountOnly=false&returnDistinctValues=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&sqlFormat=none&f=pjson"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// DataTable settings - for more help see here: https://datatables.net/reference/option/</SPAN> <SPAN class="keyword token">var</SPAN> table <SPAN class="operator token">=</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#landings_table'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">DataTable</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Change table element ID here</SPAN> dom<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Bfrtip'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Add this to enable export buttons</SPAN> buttons<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="comment token">// Add this to choose which buttons to display</SPAN> <SPAN class="string token">'copy'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'csv'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'excel'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'pdf'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'print'</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"autoWidth"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Feature control DataTables' smart column width handling</SPAN> <SPAN class="string token">"deferRender"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Feature control deferred rendering for additional speed of initialisation.</SPAN> <SPAN class="string token">"info"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Display info about table including filtering</SPAN> <SPAN class="string token">"lengthChange"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// If pagination is enabled, allow the page length to be changed by user</SPAN> <SPAN class="string token">"ordering"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Toggle user ordering of table columns</SPAN> <SPAN class="string token">"paging"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Toggle table paging</SPAN> <SPAN class="string token">"processing"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Toggle "processing" indicator useful when loading large table/filter</SPAN> <SPAN class="string token">"scrollX"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Left/right scrolling option, in pixels or false to disable</SPAN> <SPAN class="string token">"scrollY"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"400px"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Table height in pixels before up/down scrolling, or false to disable scrolling</SPAN> <SPAN class="string token">"searching"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Toggle search all columns field</SPAN> <SPAN class="string token">"stateSave"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// If true, table will restore to user filtered state when page is reopened </SPAN> <SPAN class="string token">"scrollCollapse"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// If true, the table will be collapsed if the height of the records is < the scrollY option; prevents footer from floating </SPAN> <SPAN class="string token">"ajax"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Load data from AJAX data source (JSON)</SPAN> <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">:</SPAN> url<SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// JSON URL</SPAN> <SPAN class="string token">"dataSrc"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"features"</SPAN> <SPAN class="comment token">// Within the JSON, the source for the data. For AGOL tables this will be "features"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"columns"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="comment token">// Location within the JSON of each column to pipe into the HTML table, in order of columns. For AGOL items, fields stored within attributes array of JSON.</SPAN> <SPAN class="punctuation token">{</SPAN> data<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"attributes.Year"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> data<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"attributes.PORT_2"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> data<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"attributes.TOTAL_POUNDS"</SPAN><SPAN class="punctuation token">,</SPAN> render<SPAN class="punctuation token">:</SPAN> $<SPAN class="punctuation token">.</SPAN>fn<SPAN class="punctuation token">.</SPAN>dataTable<SPAN class="punctuation token">.</SPAN>render<SPAN class="punctuation token">.</SPAN><SPAN class="token function">number</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">','</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'.'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Use render to format with commas, see here: https://datatables.net/manual/data/renderers#Number-helper</SPAN> <SPAN class="punctuation token">{</SPAN> data<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"attributes.TOTAL_VALUE"</SPAN><SPAN class="punctuation token">,</SPAN> render<SPAN class="punctuation token">:</SPAN> $<SPAN class="punctuation token">.</SPAN>fn<SPAN class="punctuation token">.</SPAN>dataTable<SPAN class="punctuation token">.</SPAN>render<SPAN class="punctuation token">.</SPAN><SPAN class="token function">number</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">','</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'.'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'$'</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">// Use render to format as $</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"language"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"emptyTable"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Loading..."</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"search"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Search all fields:"</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Apply the search, if using search fields for each column; remove if not using.</SPAN> table<SPAN class="punctuation token">.</SPAN><SPAN class="token function">columns</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">every</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> that <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">'input'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">footer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">'keyup change'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> that <SPAN class="punctuation token">.</SPAN><SPAN class="token function">search</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">draw</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Remove up to here if not using field searches</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Evan,
I have never worked with a windows auth secured service before but I would guess you need to pass a token in the url or something.
Thanks, this is great... Can you advise how I would go about loading a json from a windows auth arcgis server rest service?
If I use the above configuration with the rest endpoint for a windows auth service I get a "401 (unauthorized)"
Cheers
Great!! Thank you very much!!
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
