Saved!

Dynatable.js HTML5+JSON interactive table plugin. - 58bgrnfd

Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it's not just for tables.

  
    <link rel="stylesheet" media="all" href="https://s3.amazonaws.com/dynatable-docs-assets/css/reset.css" />
    <link rel="stylesheet" media="all" href="https://s3.amazonaws.com/dynatable-docs-assets/css/bootstrap-2.3.2.min.css" />

    <script type='text/javascript' src='https://s3.amazonaws.com/dynatable-docs-assets/js/jquery-1.9.1.min.js'></script>
    
    <link rel="stylesheet" media="all" href="https://s3.amazonaws.com/dynatable-docs-assets/css/jquery.dynatable.css" />
    
    <script type='text/javascript' src='https://s3.amazonaws.com/dynatable-docs-assets/js/jquery.dynatable.js'></script>
    
    <script type='text/javascript' src='https://s3.amazonaws.com/dynatable-docs-assets/js/highcharts.js'></script>
    





<div class="dynatable-demo">

<table id="example-table" class="table table-bordered">
<thead>
<tr>
<th>Rank</th>
<th>Country</th>
<th>US $</th>
<th>Year</th>
</tr>
</thead>
<tr>
<td>1</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Luxembourg.svg.png" width="22" height="13" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Luxembourg" title="Luxembourg">Luxembourg</a></td>
<td>113,533</td>
<td>2012</td>
</tr>
<tr>
<td>2</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Qatar.svg.png" width="22" height="9" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Qatar" title="Qatar">Qatar</a></td>
<td>98,329</td>
<td>2013</td>
</tr>
<tr>
<td>3</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Norway.svg.png" width="22" height="16" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Norway" title="Norway">Norway</a></td>
<td>97,255</td>
<td>2012</td>
</tr>
<tr>
<td>4</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/20px-Flag_of_Switzerland.svg.png" width="20" height="20" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Switzerland" title="Switzerland">Switzerland</a></td>
<td>81,161</td>
<td>2013</td>
</tr>
<tr>
<td>5</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_the_United_Arab_Emirates.svg.png" width="22" height="11" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/United_Arab_Emirates" title="United Arab Emirates">United Arab Emirates</a></td>
<td>67,008</td>
<td>2011</td>
</tr>
<tr>
<td>6</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Australia.svg.png" width="22" height="11" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Australia" title="Australia">Australia</a></td>
<td>65,477</td>
<td>2011</td>
</tr>
<tr>
<td>7</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Denmark.svg.png" width="22" height="17" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Denmark" title="Denmark">Denmark</a></td>
<td>59,928</td>
<td>2011</td>
</tr>
<tr>
<td>8</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Sweden.svg.png" width="22" height="14" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Sweden" title="Sweden">Sweden</a></td>
<td>56,956</td>
<td>2011</td>
</tr>
<tr>
<td>9</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Canada.svg.png" width="22" height="11" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Canada" title="Canada">Canada</a></td>
<td>50,436</td>
<td>2011</td>
</tr>
<tr>
<td>10</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_the_Netherlands.svg.png" width="22" height="15" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Netherlands" title="Netherlands">Netherlands</a></td>
<td>50,355</td>
<td>2011</td>
</tr>
<tr>
<td>11</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Austria.svg.png" width="22" height="15" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Austria" title="Austria">Austria</a></td>
<td>49,809</td>
<td>2011</td>
</tr>
<tr>
<td>12</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Finland.svg.png" width="22" height="13" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Finland" title="Finland">Finland</a></td>
<td>49,350</td>
<td>2011</td>
</tr>
<tr>
<td>13</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Singapore.svg.png" width="22" height="15" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Singapore" title="Singapore">Singapore</a></td>
<td>49,271</td>
<td>2011</td>
</tr>
<tr>
<td>14</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_the_United_States.svg.png" width="22" height="12" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/United_States" title="United States">United States</a></td>
<td>48,387</td>
<td>2011</td>
</tr>
<tr>
<td>15</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Kuwait.svg.png" width="22" height="11" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Kuwait" title="Kuwait">Kuwait</a></td>
<td>47,982</td>
<td>2011</td>
</tr>
<tr>
<td>16</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Ireland.svg.png" width="22" height="11" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Republic_of_Ireland" title="Republic of Ireland">Ireland</a></td>
<td>47,513</td>
<td>2011</td>
</tr>
<tr>
<td>17</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Belgium_%28civil%29.svg.png" width="22" height="15" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Belgium" title="Belgium">Belgium</a></td>
<td>46,878</td>
<td>2011</td>
</tr>
<tr>
<td>18</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Japan.svg.png" width="22" height="15" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Japan" title="Japan">Japan</a></td>
<td>45,920</td>
<td>2011</td>
</tr>
<tr>
<td>19</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_France.svg.png" width="22" height="15" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/France" title="France">France</a></td>
<td>44,008</td>
<td>2011</td>
</tr>
<tr>
<td>20</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Germany.svg.png" width="22" height="13" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Germany" title="Germany">Germany</a></td>
<td>43,742</td>
<td>2011</td>
</tr>
<tr>
<td>21</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Iceland.svg.png" width="22" height="16" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Iceland" title="Iceland">Iceland</a></td>
<td>43,088</td>
<td>2011</td>
</tr>
<tr>
<td>22</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_the_United_Kingdom.svg.png" width="22" height="11" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/United_Kingdom" title="United Kingdom">United Kingdom</a></td>
<td>38,592</td>
<td>2011</td>
</tr>
<tr>
<td>23</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_New_Zealand.svg.png" width="22" height="11" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/New_Zealand" title="New Zealand">New Zealand</a></td>
<td>36,648</td>
<td>2011</td>
</tr>
<tr>
<td>24</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Brunei.svg.png" width="22" height="11" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Brunei" title="Brunei">Brunei</a></td>
<td>36,584</td>
<td>2011</td>
</tr>
<tr>
<td>999</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Italy.svg.png" width="22" height="15" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Italy" title="Italy">Italy</a></td>
<td>36,267</td>
<td>2011</td>
</tr>
<tr>
<td>666</td>
<td align="left"><i><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Europe.svg.png" width="22" height="15" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/European_Union" title="European Union">European Union</a></i></td>
<td>35,116</td>
<td>2011</td>
</tr>
<tr>
<td>xyz</td>
<td align="left"><i><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Hong_Kong.svg.png" width="22" height="15" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Hong_Kong" title="Hong Kong">Hong Kong</a></i></td>
<td>34,049</td>
<td>2011</td>
</tr>

<tr>
<td>181</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Liberia.svg.png" width="22" height="12" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Liberia" title="Liberia">Liberia</a></td>
<td>298</td>
<td>2011</td>
</tr>
<tr>
<td>182</td>
<td align="left"><span class="flagicon"><img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_Burundi.svg.png" width="22" height="13" class="thumbborder" />&#160;</span><a target="_blank" href="http://en.wikipedia.org/wiki/Burundi" title="Burundi">Burundi</a></td>
<td>279</td>
<td>2011</td>
</tr>
<tr>
<td>183</td>
<td align="left">
	<span class="flagicon">
		<img alt="" src="https://s3.amazonaws.com/dynatable-docs-assets/images/flag_icons/22px-Flag_of_the_Democratic_Republic_of_the_Congo.svg.png" width="22" height="17" class="thumbborder" />
		&#160;
	</span>
	<a target="_blank" href="http://en.wikipedia.org/wiki/Democratic_Republic_of_the_Congo" title="Democratic Republic of the Congo">
		Congo, Democratic Republic of the
	</a>
</td>
<td>216</td>
<td>2011</td>
</tr>
</table>
	



</div>




<script type="text/javascript">
  $('#example-table').dynatable({
    features: {
      pushState: true
    },
    readers: {
      'rank': function(el, record) {
        return Number(el.innerHTML) || 0;
      }, 
      'us-$': function(el, record) {
        return Number(el.innerHTML.replace(/,/g, ''));
      }
    },
    writers: {
      'rank': function(record) {
        return record['rank'] ? record['rank'].toString() : '-';
      }, 
      'us-$': function(record) {
        return record['us-$'].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
    }
  });
</script>


<br><br><hr><br><br>




<div class="dynatable-demo">
<div id="search-example-year-filter" style="float: left;">
  Year:
  <select id="search-year" name="year">
    <option></option>
    <option>2001</option>
    <option>2003</option>
    <option>2008</option>
    <option>2013</option>
  </select>
</div>

<div style="position: absolute; top: 14379.1px; left: 331.65px; width: 903px; height: 76px; display: none;" class="dynatable-processing" id="dynatable-processing-search-example">
	
	<span style="position: relative; top: 27.9667px; left: 410.5px;">Processing...</span></div>
	<span class="dynatable-search" id="dynatable-search-search-example">Search: <input data-dynatable-query="search" id="dynatable-query-search-search-example" type="search"></span>

	<table id="search-example" class="table table-bordered">
	  <thead>
		<tr>
		  <th class="dynatable-head" data-dynatable-column="make"><a href="#" class="dynatable-sort-header">Make</a></th>
		  <th class="dynatable-head" data-dynatable-column="model"><a href="#" class="dynatable-sort-header">Model</a></th>
		  <th class="dynatable-head" data-dynatable-column="year"><a href="#" class="dynatable-sort-header">Year</a></th>
		</tr>
	  </thead>
	  <tbody> 
	<tr><td style="text-align: left;"><img src="https://s3.amazonaws.com/dynatable-docs-assets/images/ford-icon.png"> Ford</td><td style="text-align: left;">Escape</td><td style="text-align: left;">2001</td></tr>
	<tr><td style="text-align: left;"><img alt="A won't affect sorting" src="https://s3.amazonaws.com/dynatable-docs-assets/images/mini-icon.png"> Mini</td><td style="text-align: left;">Cooper</td><td style="text-align: left;">2003</td></tr>
	<tr><td style="text-align: left;"><img src="https://s3.amazonaws.com/dynatable-docs-assets/images/ford-icon.png"> Ford</td><td style="text-align: left;">Escape</td><td style="text-align: left;">2008</td></tr>
	<tr><td style="text-align: left;"><img alt="A won't affect sorting" src="https://s3.amazonaws.com/dynatable-docs-assets/images/mini-icon.png"> Mini</td><td style="text-align: left;">Cooper</td><td style="text-align: left;">2013</td></tr>
	<tr><td style="text-align: left;"><img alt="A won't affect sorting" src="https://s3.amazonaws.com/dynatable-docs-assets/images/mini-icon.png"> Mini</td><td style="text-align: left;">Cooper</td><td style="text-align: left;">2001</td></tr>
	</tbody>
	</table>
	
	
</div>




<script>
(function() {
  var dynatable = $('#search-example').dynatable({
    features: {
      paginate: false,
      recordCount: false,
      sorting: false
    }
  }).data('dynatable');

  $('#search-year').change( function() {
    var value = $(this).val();
    if (value === "") {
      dynatable.queries.remove("year");
    } else {
      dynatable.queries.add("year",value);
    }
    dynatable.process();
  });
})();
</script>



<br><br><hr><br><br>

<script>
	
	$('#my-ajax-table').dynatable({
  dataset: {
    ajax: true,
    ajaxUrl: 'https://www.dynatable.com/dynatable-ajax.json',
    ajaxOnLoad: true,
    records: []
  }
});

	
	
</script>





<table id="my-ajax-table">
  <thead>
    <th>Some Attribute</th>
    <th>Some Other Attribute</th>
  </thead>
  <tbody>
  </tbody>
</table>


  
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js