dynamic column names using dynatable.js

Question

I am using dynatable.js to print my json data in table format.When i hard code the with names as jdbc_driver_id and database_id the json data is printed correctly.But the json data received each time is different with different names.I want different names inside tag depending upon the data received from json.Please tell me a solution for my query.

/***************************JS FILE********************************/

$(function(){
//HERE I AM GETTING MY JSON RESPONSE AS KEY AND VALUE.I WANT THE  NAME INSIDE <TH> DYNAMICALLY SINCE MY JSON DATA RECEIVED IS DIFFERENT EACH TIME.//    
        json response is
        [{"database_id":"1","jdbc_driver_id":"2"},
        {"database_id":"2","jdbc_driver_id":"1"},
        {"database_id":"3","jdbc_driver_id":"4"},
        {"database_id":"4","jdbc_driver_id":"1"}]
        //SO IN THE response I AM GETTING THE ABOVE JSON DATA//                 
    var response = jQuery.parseJSON(response);                                  
    var dynatable =$('#my-final-table').dynatable({                 
        table: {
            defaultColumnIdStyle: 'underscore'
        },
        dataset: {
            records: response//HERE IS THE JSON RESPONSE//
        }
    });
});

/************************JSP PAGE********************************/

//I WANT DYNAMIC NAMES INSIDE THE TH TAG//  
<table id="my-final-table">             
    <thead> 
        <th>jdbc_driver_id</th>                                                                                   
        <th>database_id</th>                                                                            
    </thead>
    <tbody>
    </tbody>
</table>

Simon Bengtsson · Answer 1 · 2014-08-24T21:25:34.600

0

DynaTable doesn't support this right now. Here is a feature request for it. As a workaround I ended up adding the attribute names by modifying the DOM before I initialized DynaTable.

edited Aug 24 '14 at 21:25

answered Aug 24 '14 at 20:56

Simon Bengtsson

7,573
3
58
87

score 0 · Answer 2 · answered Sep 29 '14 at 07:54

I wanted to achieve the same thing, and since I'm lazy, I found a workaround that isn't the best but is working.

I use this plugin (JsonToTable) to generate an HTML table from a JSON string with the correct header names, and then I use dynatable on this generated table to add the search, pagination and sorting features.

Here is a JS code sample:

$(document).ready(function() {
var str = 'YOUR_JSON_STRING';
var json = eval(str);
var jsonHtmlTable = ConvertJsonToTable(json, 'jsonTable', null, 'Download');    
$("#container").append(jsonHtmlTable);

$('#jsonTable').dynatable({
      dataset: {
        records: json
      }
    });
});

And the markup:

<html>
<head>
    <link rel="stylesheet" media="screen" href="stylesheets/jquery.dynatable.css">
    <script type="text/javascript" src="javascripts/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="javascripts/json-to-table.js"></script>
    <script type="text/javascript" src="javascripts/jquery.dynatable.js"></script>
</head>
<body>
    <div id="container">
    </div>
</body>
</html>

The table that is generated is kind of ugly, so you may want to add a little bit of CSS, but I leave that up to you.

dynamic column names using dynatable.js

2 Answers2