Stack Overflow
Stack Overflow

Questions tagged [dynatable]

HTML5+JSON interactive table plugin.

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

87 questions
0
votes
1 answer

Stylized jquery table plugin

I'm quite taken with dynatables' stylized list. I was wondering whether anyone knew of any plugins with similar capabilities to style results in that way. I've had a look into datatables but haven't found examples of it working in this…
jmood
  • 77
  • 2
  • 9
0
votes
0 answers

JSON - populate a form from table links

I'm close to the edge here, so any help would be greatly appreciated. I attempting to make each row of data a clickable link and that link would be the id in the JSON data. The idea behind this would be that once the user clicks a link the code…
user3655651
  • 1
  • 1
0
votes
1 answer

Grouping Data with dynatable

I would like to check if there is any way that i could group data with the jquery plugin dynatable. I would like data to be displayed as below. …
maldivianGeek
  • 89
  • 1
  • 2
  • 10
0
votes
1 answer

reloading mathjax on dynatable

I would like to use MathJax together with Dynatable in order to display tables with rendered formulas. Here's a minimal example to show the problem: dynatable mathjax…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/mathjax" class="post-tag grid--cell" title="show questions tagged 'mathjax'" rel="tag">mathjax</a> <a href="../../questions/tagged/dynatable" class="post-tag grid--cell" title="show questions tagged 'dynatable'" rel="tag">dynatable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 21 '14 at 19:29">asked Apr 21 '14 at 19:29</time> <a href="../../users/3525188/moritz-firsching" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3525188.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Moritz Firsching" /> </a> <div class="s-user-card--info"> <a href="../../users/3525188/moritz-firsching" class="s-user-card--link">Moritz Firsching</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">143</li> <li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-22974945"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>0</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/22974945/loading-json-from-local-dynatable" class="question-hyperlink">Loading JSON from local dynatable</a></h3> <div class="excerpt">I'm trying to do something very similar to the last comment of this question - that is to load a whole bunch of data in an ajax call but then put it into dynatable as though it's a local JSON file. I am none to proficient at javascript/jquery, so…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/json" class="post-tag grid--cell" title="show questions tagged 'json'" rel="tag">json</a> <a href="../../questions/tagged/dynatable" class="post-tag grid--cell" title="show questions tagged 'dynatable'" rel="tag">dynatable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 09 '14 at 22:11">asked Apr 09 '14 at 22:11</time> <a href="../../users/728286/alex-s" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/728286.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Alex S" /> </a> <div class="s-user-card--info"> <a href="../../users/728286/alex-s" class="s-user-card--link">Alex S</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,726</li> <li class="s-award-bling s-award-bling__gold" title="7 gold badges">7</li> <li class="s-award-bling s-award-bling__silver" title="39 silver badges">39</li> <li class="s-award-bling s-award-bling__bronze" title="67 bronze badges">67</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-22474589"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>0</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/22474589/how-to-take-a-json-with-nested-jsons-to-an-html-table" class="question-hyperlink">How to take a JSON with nested JSONS to an html table?</a></h3> <div class="excerpt">I've got a JSON which some dictionaries inside it. I need to generate an html table so each outer key will be a column of the table. Inner key-value pairs should at least be added as a single text (I think there could be nested cells to represent…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/json" class="post-tag grid--cell" title="show questions tagged 'json'" rel="tag">json</a> <a href="../../questions/tagged/dynatable" class="post-tag grid--cell" title="show questions tagged 'dynatable'" rel="tag">dynatable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 18 '14 at 09:04">asked Mar 18 '14 at 09:04</time> <a href="../../users/742560/diegoaguilar" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/742560.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="diegoaguilar" /> </a> <div class="s-user-card--info"> <a href="../../users/742560/diegoaguilar" class="s-user-card--link">diegoaguilar</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">8,179</li> <li class="s-award-bling s-award-bling__gold" title="14 gold badges">14</li> <li class="s-award-bling s-award-bling__silver" title="80 silver badges">80</li> <li class="s-award-bling s-award-bling__bronze" title="129 bronze badges">129</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-21914472"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>0</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/21914472/dynatable-from-ajax-sort-not-working" class="question-hyperlink">Dynatable from ajax sort not working</a></h3> <div class="excerpt">I'm trying to load json with Dynatable The data looks good, but can't sort, what is the problem? Here's my JavaScript: $(document).ready(function() { var dynatable = $('table').dynatable({ dataset: { ajax:…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/ajax" class="post-tag grid--cell" title="show questions tagged 'ajax'" rel="tag">ajax</a> <a href="../../questions/tagged/json" class="post-tag grid--cell" title="show questions tagged 'json'" rel="tag">json</a> <a href="../../questions/tagged/dynatable" class="post-tag grid--cell" title="show questions tagged 'dynatable'" rel="tag">dynatable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 20 '14 at 16:55">asked Feb 20 '14 at 16:55</time> <a href="../../users/3330195/alexk1" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3330195.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="AlexK1" /> </a> <div class="s-user-card--info"> <a href="../../users/3330195/alexk1" class="s-user-card--link">AlexK1</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">86</li> <li class="s-award-bling s-award-bling__bronze" title="3 bronze badges">3</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-21837554"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>0</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/21837554/how-to-make-an-ajax-call-to-a-locally-defined-variable" class="question-hyperlink">How to make an AJAX call to a locally defined variable</a></h3> <div class="excerpt">I'm trying generate a list after an obtained JSON, I found docs from dynatable library so they can populate a table in the ajax way receiving a JSON. However, what if I already have the json stored in a variable. I've tried this so far: var json =…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/ajax" class="post-tag grid--cell" title="show questions tagged 'ajax'" rel="tag">ajax</a> <a href="../../questions/tagged/json" class="post-tag grid--cell" title="show questions tagged 'json'" rel="tag">json</a> <a href="../../questions/tagged/dynatable" class="post-tag grid--cell" title="show questions tagged 'dynatable'" rel="tag">dynatable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 17 '14 at 19:22">asked Feb 17 '14 at 19:22</time> <a href="../../users/742560/diegoaguilar" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/742560.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="diegoaguilar" /> </a> <div class="s-user-card--info"> <a href="../../users/742560/diegoaguilar" class="s-user-card--link">diegoaguilar</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">8,179</li> <li class="s-award-bling s-award-bling__gold" title="14 gold badges">14</li> <li class="s-award-bling s-award-bling__silver" title="80 silver badges">80</li> <li class="s-award-bling s-award-bling__bronze" title="129 bronze badges">129</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-21357086"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>0</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/21357086/how-to-get-dynatable-json-rails-to-work" class="question-hyperlink">How to get dynatable json rails to work</a></h3> <div class="excerpt">Im trying to get dynatable to ajax load json with rails but I get an error I need help explaining. How do I set this up? CONSOLE TypeError: 'undefined' is not an object (evaluating 'settings.dataset.records.length') THE LOG Started GET…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/ruby-on-rails" class="post-tag grid--cell" title="show questions tagged 'ruby-on-rails'" rel="tag">ruby-on-rails</a> <a href="../../questions/tagged/json" class="post-tag grid--cell" title="show questions tagged 'json'" rel="tag">json</a> <a href="../../questions/tagged/dynatable" class="post-tag grid--cell" title="show questions tagged 'dynatable'" rel="tag">dynatable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 25 '14 at 22:29">asked Jan 25 '14 at 22:29</time> <a href="../../users/1355936/petter" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1355936.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Petter" /> </a> <div class="s-user-card--info"> <a href="../../users/1355936/petter" class="s-user-card--link">Petter</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">130</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badge">1</li> <li class="s-award-bling s-award-bling__bronze" title="11 bronze badge">11</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-37538554"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>-1</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/37538554/no-data-appears-in-javascript" class="question-hyperlink">no data appears in javascript</a></h3> <div class="excerpt">I have the following script: var dataSet; d3.json("/TableData", function(error, json) { if (error) return console.warn(error); dataSet = json; }); $('#data-table').dynatable({ dataset: { records: dataSet } }); /TableData is a…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/d3.js" class="post-tag grid--cell" title="show questions tagged 'd3.js'" rel="tag">d3.js</a> <a href="../../questions/tagged/flask" class="post-tag grid--cell" title="show questions tagged 'flask'" rel="tag">flask</a> <a href="../../questions/tagged/dynatable" class="post-tag grid--cell" title="show questions tagged 'dynatable'" rel="tag">dynatable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 31 '16 at 06:41">asked May 31 '16 at 06:41</time> <a href="../../users/1687633/killersnail" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1687633.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="KillerSnail" /> </a> <div class="s-user-card--info"> <a href="../../users/1687633/killersnail" class="s-user-card--link">KillerSnail</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,321</li> <li class="s-award-bling s-award-bling__gold" title="11 gold badges">11</li> <li class="s-award-bling s-award-bling__silver" title="46 silver badges">46</li> <li class="s-award-bling s-award-bling__bronze" title="64 bronze badges">64</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-23204551"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>-1</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/23204551/add-css-class-to-dynatable-columns" class="question-hyperlink">Add css class to dynatable columns</a></h3> <div class="excerpt">I'm trying to add a class name to dynatable generated <td>s, but I don't know how. I've tried this, but does not work: <table id="my-final-table"> <thead> <th>Band</th> <th>Song</th> <th style="display:none;" class="td-id">id</th> …</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/dynatable" class="post-tag grid--cell" title="show questions tagged 'dynatable'" rel="tag">dynatable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 21 '14 at 19:35">asked Apr 21 '14 at 19:35</time> <a href="../../users/689779/maysam" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/689779.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Maysam" /> </a> <div class="s-user-card--info"> <a href="../../users/689779/maysam" class="s-user-card--link">Maysam</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,246</li> <li class="s-award-bling s-award-bling__gold" title="13 gold badges">13</li> <li class="s-award-bling s-award-bling__silver" title="68 silver badges">68</li> <li class="s-award-bling s-award-bling__bronze" title="106 bronze badges">106</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-13881113"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>-2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>4</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/13881113/javascript-add-delete-row-sends-form-instead-of-adding-row" class="question-hyperlink">Javascript add delete row sends form instead of adding row</a></h3> <div class="excerpt">Can anyone help my with this script. Why is this form being submitted, instead of adding a new row on the table? If I delete the form tags and the submit button it works well to add and delete rows. <html> <head> <script…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/forms" class="post-tag grid--cell" title="show questions tagged 'forms'" rel="tag">forms</a> <a href="../../questions/tagged/html-table" class="post-tag grid--cell" title="show questions tagged 'html-table'" rel="tag">html-table</a> <a href="../../questions/tagged/row" class="post-tag grid--cell" title="show questions tagged 'row'" rel="tag">row</a> <a href="../../questions/tagged/dynatable" class="post-tag grid--cell" title="show questions tagged 'dynatable'" rel="tag">dynatable</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 14 '12 at 15:01">asked Dec 14 '12 at 15:01</time> <a href="../../users/1904345/fabian-k" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1904345.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Fabian K" /> </a> <div class="s-user-card--info"> <a href="../../users/1904345/fabian-k" class="s-user-card--link">Fabian K</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">71</li> <li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <a class="s-pagination--item" href="../../questions/tagged/dynatable_page=5" rel="prev" title="Go to page 5">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/dynatable_page=1" rel="" title="Go to page 1">1</a> <a class="s-pagination--item" href="../../questions/tagged/dynatable_page=2" rel="" title="Go to page 2">2</a> <a class="s-pagination--item" href="../../questions/tagged/dynatable_page=3" rel="" title="Go to page 3">3</a> <a class="s-pagination--item" href="../../questions/tagged/dynatable_page=4" rel="" title="Go to page 4">4</a> <a class="s-pagination--item" href="../../questions/tagged/dynatable_page=5" rel="" title="Go to page 5">5</a> <div class="s-pagination--item is-selected">6</div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>
Accounts