mattmakesmaps/gist:5341381

## gistfile1.js

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Page through records</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/soria/soria.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/grid/resources/soriaGrid.css">
    <style>
      .soria .dojoxGridRowOver .dojoxGridCell { color:#000000; }
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/">
    </script>
    <script>
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dojo.data.ItemFileWriteStore");
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dijit.form.Button");
      dojo.require("dojox.grid.cells.dijit");
      dojo.require("dojo.number");

      var featureLayer, pageInfo, grid;
      // grid structure
      var layout = {
        cells: [
          {
          field: "Name",
          name: "Name",
          width:'315px'},
          {
          field: "Magnitude",
          name: "Magnitude",
          width: '110px',
          formatter: formatRound},
          {
          field: "Num_Deaths",
          name: "Number of deaths",
          width:'100px'},
          {
          field: "Date_",
          name: "Date",
          width:'auto',
          formatter: formatDate}
        ]
      };

      // Get object IDs from the table after the page is loaded
      dojo.ready(getObjectIds);

      function formatRound(value){
        return dojo.number.round(value,2);
      }
      function formatDate(value){
        var inputDate = new Date(value);
        return dojo.date.locale.format(inputDate, {
          selector: 'date',
          datePattern: 'MMMM d, y'
        });
      }

      function getObjectIds() {
        grid = dijit.byId("myGrid");

        featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0", {
          outFields: ["*"]
        });

        dojo.connect(featureLayer, "onLoad", function() {
          //create the grid layout
          grid.attr("structure", layout);
          // create the query to fetch object IDs for earthquakes that have a magnitude greater than 6.0
          //that occurred after January 1st 2007
          var query = new esri.tasks.Query();
          query.where = "Magnitude > 6.0 AND Num_Deaths >=1";
          query.timeExtent = new esri.TimeExtent(new Date("01/01/2007 UTC"));
          featureLayer.queryIds(query, function(objectIds) {
            fetchRecords(objectIds);
          });
        });
      }

      function fetchRecords(objectIds) {
        if (objectIds.length > 0) {
          updatePageInformation(objectIds);
          queryRecordsByPage(1);
        }
        else {
          grid.showMessage("No matching records");
          grid.setStore(null);
        }
      }

      function updatePageInformation(objectIds, page) {
        pageInfo = {
          objectIds: objectIds,
          totalRecords: objectIds.length,
          totalPages: Math.ceil(objectIds.length / 15),
          currentPage: page || 0,
          recordsPerPage: 15
        };

        dojo.byId("pageInfo").innerHTML = pageInfo.currentPage + "/" + pageInfo.totalPages;
        dojo.byId("recordsInfo").innerHTML = pageInfo.totalRecords;

        if (pageInfo.currentPage > pageInfo.totalPages) {
          queryRecordsByPage(pageInfo.currentPage - 1);
        }
      }

      function queryRecordsByPage(pageNumber) {
        // check if the page number is valid
        if (pageNumber < 1 || pageNumber > pageInfo.totalPages) {
          return;
        }

        grid.showMessage("Fetching records...");

        var begin = pageInfo.recordsPerPage * (pageNumber - 1);
        var end = begin + pageInfo.recordsPerPage;

        // create the query
        var query = new esri.tasks.Query();
        query.objectIds = pageInfo.objectIds.slice(begin, end);
        query.outFields = ["*"];

        // Query for the records with the given object IDs and populate the grid
        featureLayer.queryFeatures(query, function(featureSet) {
          updateGrid(featureSet, pageNumber);
        });
      }

      function updateGrid(featureSet, pageNumber) {
        // create the data store and add it to the grid
        var items = [];
        dojo.forEach(featureSet.features, function(feature) {
          items.push(feature.attributes);
        });

        var store = new dojo.data.ItemFileWriteStore({
          data: {
            items: items
          }
        });
        grid.setStore(store);
        grid.setSortIndex(2,false); //descending sort on the magnitude field
        grid.update();

        // update application state
        pageInfo.currentPage = pageNumber;
        dojo.byId("pageInfo").innerHTML = pageInfo.currentPage + "/" + pageInfo.totalPages;
      }
    </script>
  </head>

  <body class="soria">
    <p>
      &nbsp;&nbsp;Total records =
      <span id="recordsInfo">
        0
      </span>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <button dojoType="dijit.form.Button" onclick="queryRecordsByPage(pageInfo.currentPage - 1);">
        Prev Page
      </button>
      &nbsp;&nbsp
      <span id="pageInfo">
      </span>
      &nbsp;&nbsp
      <button dojoType="dijit.form.Button" onclick="queryRecordsByPage(pageInfo.currentPage + 1);">
        Next Page
      </button>
    </p>
    <!-- Grid to show records -->
    <table id="myGrid" dojoType="dojox.grid.DataGrid" rowsPerPage="15"
    style="width: 725px; height: 425px; border: solid 1px #000;">
    </table>
  </body>

</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
	<!--The viewport meta tag is used to improve the presentation and behavior of the samples
	on iOS devices-->
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
	<title>Page through records</title>

	<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/soria/soria.css">
	<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/grid/resources/Grid.css">
	<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/grid/resources/soriaGrid.css">
	<style>
	.soria .dojoxGridRowOver .dojoxGridCell { color:#000000; }
	</style>

	<script>var dojoConfig = { parseOnLoad: true };</script>
	<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/">
	</script>
	<script>
	dojo.require("esri.layers.FeatureLayer");
	dojo.require("dojo.data.ItemFileWriteStore");
	dojo.require("dojox.grid.DataGrid");
	dojo.require("dijit.form.Button");
	dojo.require("dojox.grid.cells.dijit");
	dojo.require("dojo.number");

	var featureLayer, pageInfo, grid;
	// grid structure
	var layout = {
	cells: [
	{
	field: "Name",
	name: "Name",
	width:'315px'},
	{
	field: "Magnitude",
	name: "Magnitude",
	width: '110px',
	formatter: formatRound},
	{
	field: "Num_Deaths",
	name: "Number of deaths",
	width:'100px'},
	{
	field: "Date_",
	name: "Date",
	width:'auto',
	formatter: formatDate}
	]
	};

	// Get object IDs from the table after the page is loaded
	dojo.ready(getObjectIds);

	function formatRound(value){
	return dojo.number.round(value,2);
	}
	function formatDate(value){
	var inputDate = new Date(value);
	return dojo.date.locale.format(inputDate, {
	selector: 'date',
	datePattern: 'MMMM d, y'
	});
	}

	function getObjectIds() {
	grid = dijit.byId("myGrid");

	featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0", {
	outFields: ["*"]
	});

	dojo.connect(featureLayer, "onLoad", function() {
	//create the grid layout
	grid.attr("structure", layout);
	// create the query to fetch object IDs for earthquakes that have a magnitude greater than 6.0
	//that occurred after January 1st 2007
	var query = new esri.tasks.Query();
	query.where = "Magnitude > 6.0 AND Num_Deaths >=1";
	query.timeExtent = new esri.TimeExtent(new Date("01/01/2007 UTC"));
	featureLayer.queryIds(query, function(objectIds) {
	fetchRecords(objectIds);
	});
	});
	}

	function fetchRecords(objectIds) {
	if (objectIds.length > 0) {
	updatePageInformation(objectIds);
	queryRecordsByPage(1);
	}
	else {
	grid.showMessage("No matching records");
	grid.setStore(null);
	}
	}

	function updatePageInformation(objectIds, page) {
	pageInfo = {
	objectIds: objectIds,
	totalRecords: objectIds.length,
	totalPages: Math.ceil(objectIds.length / 15),
	currentPage: page \|\| 0,
	recordsPerPage: 15
	};

	dojo.byId("pageInfo").innerHTML = pageInfo.currentPage + "/" + pageInfo.totalPages;
	dojo.byId("recordsInfo").innerHTML = pageInfo.totalRecords;

	if (pageInfo.currentPage > pageInfo.totalPages) {
	queryRecordsByPage(pageInfo.currentPage - 1);
	}
	}

	function queryRecordsByPage(pageNumber) {
	// check if the page number is valid
	if (pageNumber < 1 \|\| pageNumber > pageInfo.totalPages) {
	return;
	}

	grid.showMessage("Fetching records...");

	var begin = pageInfo.recordsPerPage * (pageNumber - 1);
	var end = begin + pageInfo.recordsPerPage;

	// create the query
	var query = new esri.tasks.Query();
	query.objectIds = pageInfo.objectIds.slice(begin, end);
	query.outFields = ["*"];

	// Query for the records with the given object IDs and populate the grid
	featureLayer.queryFeatures(query, function(featureSet) {
	updateGrid(featureSet, pageNumber);
	});
	}

	function updateGrid(featureSet, pageNumber) {
	// create the data store and add it to the grid
	var items = [];
	dojo.forEach(featureSet.features, function(feature) {
	items.push(feature.attributes);
	});

	var store = new dojo.data.ItemFileWriteStore({
	data: {
	items: items
	}
	});
	grid.setStore(store);
	grid.setSortIndex(2,false); //descending sort on the magnitude field
	grid.update();

	// update application state
	pageInfo.currentPage = pageNumber;
	dojo.byId("pageInfo").innerHTML = pageInfo.currentPage + "/" + pageInfo.totalPages;
	}
	</script>
	</head>

	<body class="soria">
	<p>
	Total records =
	<span id="recordsInfo">
	0
	</span>
	\|
	<button dojoType="dijit.form.Button" onclick="queryRecordsByPage(pageInfo.currentPage - 1);">
	Prev Page
	</button>
	&nbsp
	<span id="pageInfo">
	</span>
	&nbsp
	<button dojoType="dijit.form.Button" onclick="queryRecordsByPage(pageInfo.currentPage + 1);">
	Next Page
	</button>
	</p>
	<!-- Grid to show records -->
	<table id="myGrid" dojoType="dojox.grid.DataGrid" rowsPerPage="15"
	style="width: 725px; height: 425px; border: solid 1px #000;">
	</table>
	</body>

	</html>