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:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="http://www.maine.gov/awt/js5/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
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.
<!-- 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 {
width: 100%;
font-size: 8pt;
padding: 1px;
box-sizing: border-box;
}
</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 {
border-collapse: collapse;
}
th {
text-align: center;
}
td {
text-align: center;
}
</style>
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.
<table id="landings_table" class= "stripe cell-border order-column hover" cellspacing="0" width="100%">
<thead>
<tr>
<th width=10>Year</th>
<th width=10>Port</th>
<th width=10>Pounds Landed</th>
<th width=10>Value Landed</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Year</th>
<th>Port</th>
<th>Pounds Landed</th>
<th>Value Landed</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
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:
- The table ID from above should be inserted anywhere in the below example where
#landings_table is found. - The URL from the REST endpoint should be inserted after the URL variable - make sure it is in quotes and has a semi-colon at the end.
- The attributes fields, in the order of how they should appear in the table, must be specified.
- Numerous options can be toggled for the table appearance, such as scrolling, pagination, download options, etc; each of these options is commented in the included template code and below.
<!-- JavaScript to populate table starts here -->
<script type='text/javascript'>
$(document).ready(function() {
$('#landings_table tfoot th').each( function () {
var title = $('#landings_table thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var url = "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";
var table = $('#landings_table').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"autoWidth": false,
"deferRender": true,
"info": true,
"lengthChange": false,
"ordering": true,
"paging": false,
"processing": true,
"scrollX": false,
"scrollY": "400px",
"searching": true,
"stateSave": false,
"scrollCollapse": true,
"ajax": {
"url": url,
"dataSrc": "features"
},
"columns": [
{ data: "attributes.Year" },
{ data: "attributes.PORT_2"},
{ data: "attributes.TOTAL_POUNDS",
render: $.fn.dataTable.render.number( ',', '.', 0)},
{ data: "attributes.TOTAL_VALUE",
render: $.fn.dataTable.render.number( ',', '.', 2, '$' )}
],
"language": {
"emptyTable": "Loading...",
"search": "Search all fields:"
}
});
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
that
.search( this.value )
.draw();
});
});
});
</script>
</body>
</html>
