Skip to content

Instantly share code, notes, and snippets.

@vasadhananjay

vasadhananjay/fullExample-in-HTML.html

Created August 9, 2016 00:17
Show Gist options
  • Save vasadhananjay/c0b24e4f10b4150c64069102374d8afe to your computer and use it in GitHub Desktop.
Save vasadhananjay/c0b24e4f10b4150c64069102374d8afe to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fullExample-in-HTML.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>EditableGrid Demo - Grid with pagination</title>
<!-- include javascript and css files for the EditableGrid library -->
<script src="../../editablegrid.js"></script>
<!-- [DO NOT DEPLOY] --> <script src="../../editablegrid_renderers.js" ></script>
<!-- [DO NOT DEPLOY] --> <script src="../../editablegrid_editors.js" ></script>
<!-- [DO NOT DEPLOY] --> <script src="../../editablegrid_validators.js" ></script>
<!-- [DO NOT DEPLOY] --> <script src="../../editablegrid_utils.js" ></script>
<!-- [DO NOT DEPLOY] --> <script src="../../editablegrid_charts.js" ></script>
<link rel="stylesheet" href="../../editablegrid.css" type="text/css" media="screen">
<!-- include javascript and css files for jQuery, needed for the datepicker and autocomplete extensions -->
<script src="../../extensions/jquery/jquery-1.6.4.min.js" ></script>
<script src="../../extensions/jquery/jquery-ui-1.8.16.custom.min.js" ></script>
<link rel="stylesheet" href="../../extensions/jquery/jquery-ui-1.8.16.custom.css" type="text/css" media="screen">
<!-- include javascript and css files for the autocomplete extension -->
<script src="../../extensions/autocomplete/autocomplete.js" ></script>
<link rel="stylesheet" href="../../extensions/autocomplete/autocomplete.css" type="text/css" media="screen">
<!-- Uncomment this if you want to use the first variant of the autocomplete instead of the official one from jQuery UI -->
<!--
<script src="../../extensions/autocomplete_variant_1/jquery.autocomplete.min.js" ></script>
<script src="../../extensions/autocomplete_variant_1/autocomplete.js" ></script>
<link rel="stylesheet" href="../../extensions/autocomplete_variant_1/jquery.autocomplete.css" type="text/css" media="screen">
!-->
<!-- Uncomment this if you want to use the second variant of the autocomplete instead of the official one from jQuery UI -->
<!--
<script src="../../extensions/autocomplete_variant_2/jquery.autocomplete.min.js" ></script>
<script src="../../extensions/autocomplete_variant_2/autocomplete.js" ></script>
<link rel="stylesheet" href="../../extensions/autocomplete_variant_2/jquery.autocomplete.css" type="text/css" media="screen">
!-->
<!-- include javascript file for the Highcharts library -->
<script src="../../extensions/Highcharts-4.0.4/js/highcharts.js"></script>
<!-- include javascript and css files for this demo -->
<script src="javascript/demo.js" ></script>
<link rel="stylesheet" type="text/css" href="css/demo.css" media="screen"/>
<script type="text/javascript">
window.onload = function() {
// you can use "datasource/demo.php" if you have PHP installed, to get live data from the demo.csv file
editableGrid.onloadJSON("datasource/demo.json");
};
</script>
<!-- [DO NOT DEPLOY] <?php if (isset($_GET['php'])) { ?><script type="text/javascript">window.onload = function() { editableGrid.onloadJSON("datasource/demo.php"); } </script> <?php } ?> -->
<!-- [DO NOT DEPLOY] <?php if (isset($_GET['xml'])) { ?><script type="text/javascript">window.onload = function() { editableGrid.onloadXML("datasource/<?php echo isset($_GET['php']) ? "demo.php?xml" : "demo.xml" ?>"); } </script> <?php } ?> -->
<!-- [DO NOT DEPLOY] --> <script type="text/javascript">window.onload = function() { editableGrid.onloadHTML("htmlgrid"); } </script>
</head>
<body>
<div id="wrap">
<h1>EditableGrid Demo - Grid with pagination<a href="../index.html">Back to menu</a></h1>
<!-- Feedback message zone -->
<div id="message"></div>
<!-- Number of rows per page and bars in chart -->
<div id="pagecontrol">
<label for="pagecontrol">Rows per page: </label>
<select id="pagesize" name="pagesize">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
&nbsp;&nbsp;
<label for="barcount">Bars in chart: </label>
<select id="barcount" name="barcount">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</div>
<!-- Grid filter -->
<label for="filter">Filter :</label>
<input type="text" id="filter"/>
<!-- Grid contents -->
<div id="tablecontent">
<table id="htmlgrid" class="testgrid">
<tr>
<th>NAME</th>
<th>FIRSTNAME</th>
<th>AGE</th>
<th>HEIGHT</th>
<th>CONTINENT</th>
<th>COUNTRY</th>
<th>EMAIL</th>
<th>FREELANCE</th>
<th></th>
</tr>
<tr id="R1">
<td>Duke</td>
<td>Patience</td>
<td>33</td>
<td>1.842</td>
<td>eu</td>
<td>uk</td>
<td>patience.duke@gmail.com</td>
<td></td>
<td></td>
</tr>
<tr id="R2">
<td>Rogers</td>
<td>Denise</td>
<td>59</td>
<td>1.627</td>
<td>am</td>
<td>us</td>
<td>rogers.d@gmail.com</td>
<td></td>
<td></td>
</tr>
<tr id="R3">
<td>Dujardin</td>
<td>Antoine</td>
<td>21</td>
<td>1.73</td>
<td>eu</td>
<td>fr</td>
<td>felix.compton@yahoo.fr</td>
<td>true</td>
<td></td>
</tr>
<tr id="R4">
<td>Conway</td>
<td>Coby</td>
<td>47</td>
<td>1.96</td>
<td>af</td>
<td>za</td>
<td>coby@conwayinc.com</td>
<td>true</td>
<td></td>
</tr>
<tr id="R5">
<td>Shannon</td>
<td>Rana</td>
<td>24</td>
<td>1.56</td>
<td>eu</td>
<td>nl</td>
<td>ranna.shannon@hotmail.com</td>
<td>false</td>
<td></td>
</tr>
<tr id="R6">
<td>Benton</td>
<td>Jasmine</td>
<td>61</td>
<td>1.71</td>
<td>am</td>
<td>ca</td>
<td>jasmine.benton@yahoo.com</td>
<td>false</td>
<td></td>
</tr>
<tr id="R7">
<td>Belletoise</td>
<td>André</td>
<td>31</td>
<td>1.84</td>
<td>eu</td>
<td>be</td>
<td>belletoise@kiloutou.be</td>
<td>true</td>
<td></td>
</tr>
<tr id="R8">
<td>Santa-Maria</td>
<td>Martin</td>
<td>37</td>
<td>1.80</td>
<td>am</td>
<td>br</td>
<td>martin.sm@gmail.com</td>
<td>false</td>
<td></td>
</tr>
<tr id="R9">
<td>Dieumerci</td>
<td>Amédé</td>
<td>37</td>
<td>1.81</td>
<td>af</td>
<td>ng</td>
<td>dieumerci@gmail.com</td>
<td>true</td>
<td></td>
</tr>
<tr id="R10">
<td>Morin</td>
<td>Wanthus</td>
<td>46</td>
<td>1.77</td>
<td>af</td>
<td>zw</td>
<td>morin.x@yahoo.com</td>
<td>false</td>
<td></td>
</tr>
</table>
</div>
<!-- [DO NOT DEPLOY] --> <!--<?php if (isset($_GET['attach'])) include("htmlgrid.html"); ?>-->
<!-- Paginator control -->
<div id="paginator"></div>
<!-- Edition zone (to demonstrate the "fixed" editor mode) -->
<div id="edition"></div>
<!-- Charts zone -->
<div id="barchartcontent"></div>
<div id="piechartcontent"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment