Question

我正在使用dynatable.js以表格格式打印我的json数据。当我将名称硬编码为jdbc_driver_id和database_id时，json数据被正确打印。但是每次收到的json数据都有不同的名称.I根据从json收到的数据，在标签内部需要不同的名称。请告诉我一个解决方案。

/ *************************** 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>

Answer 1

DynaTable现在不支持此功能。 Here是针对它的功能请求。作为一种解决方法，我在初始化DynaTable之前通过修改DOM来添加属性名称。

Answer 2

我想实现同样的目标，而且由于我很懒，我发现了一种不是最好的解决方法，但它正在发挥作用。

我使用this plugin (JsonToTable)从具有正确标题名称的JSON字符串生成HTML表格，然后在此生成的表格上使用dynatable来添加搜索，分页和排序功能。

这是一个JS代码示例：

$(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
      }
    });
});

标记：

<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>

生成的表有点难看，所以你可能想添加一点CSS，但我把它留给你。

使用dynatable.js的动态列名

2 个答案: