2

我正在使用 dynatable.js 以表格格式打印我的 json 数据。当我将名称硬编码为 jdbc_driver_id 和 database_id 时，json 数据打印正确。但是每次接收到的 json 数据因名称不同而不同。我想要不同的名称内部标签取决于从 json 收到的数据。请告诉我查询的解决方案。

/ ***************************JS文件************************ ************ /

$(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 页面**************************** ********* /

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

2 回答 2

0

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

于 2014-08-24T20:56:29.633 回答
0

我想实现同样的目标，但由于我很懒，我找到了一个不是最好但有效的解决方法。

我使用这个插件（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，但我把它留给你。

于 2014-09-29T07:54:44.800 回答