如何使用 bootstrap 中的数据-table 访问 json 文件中数组内的对象
How to access object inside array in json file using data-table in bootstrap
JSON数据：
[{"kContentProcessing":1,"appData":{"kAppData":1,"name":"500px.com"},"owner":"Sup Julius.","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"no","dv_req":"no","iibe_req":"no","createdate":"2015-08-03"},{"kContentProcessing":2,"appData":{"kAppData":2,"name":"9gag.com"},"owner":"amey","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"no","dv_req":"no","iibe_req":"no","createdate":"2015-08-10"},{"kContentProcessing":3,"appData":{"kAppData":3,"name":"abc.go.com"},"owner":"jack","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":4,"appData":{"kAppData":3,"name":"abc.go.com"},"owner":"jill","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":5,"appData":{"kAppData":5,"name":"aliexpress.com"},"owner":"jones","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":6,"appData":{"kAppData":6,"name":"allthecooks.com"},"owner":"Mark","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":7,"appData":{"kAppData":7,"name":"bigoven.com"},"owner":"jons","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":8,"appData":{"kAppData":8,"name":"bookmyshow.com"},"owner":"joes","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":9,"appData":{"kAppData":9,"name":"crackle.com"},"owner":"jnes","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":10,"appData":{"kAppData":10,"name":"eat24.com"},"owner":"ones","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"}]
HTML:
<th data-field=appData.name[0] data-sortable="True" data-align="center" id="o">Name</th>
那么如何使用 data-field 访问名称字段？
SOLUTION
您可以通过为 table 元素设置 data-column-defs 属性来做到这一点
<table id="example" class="display" cellspacing="0" width="100%" data-column-defs='[{"targets":0,"data":"appData.name"}]'>
根据 manual:
There are two important points to consider when using data-* attributes as initialization options:
- jQuery will automatically convert from dashed strings to the camel case notation used by DataTables (e.g. use
data-page-length for pageLength).
- If using a string inside the attribute it must be in double quotes (and therefore the attribute as a whole in single quotes). This is another requirement of jQuery's due to the processing of JSON data data.
但是，您可以直接使用初始化选项 columnDefs 而不是使用 data- 属性。
DEMO
有关代码和演示，请参阅 this jsFiddle。
JSON数据：
[{"kContentProcessing":1,"appData":{"kAppData":1,"name":"500px.com"},"owner":"Sup Julius.","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"no","dv_req":"no","iibe_req":"no","createdate":"2015-08-03"},{"kContentProcessing":2,"appData":{"kAppData":2,"name":"9gag.com"},"owner":"amey","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"no","dv_req":"no","iibe_req":"no","createdate":"2015-08-10"},{"kContentProcessing":3,"appData":{"kAppData":3,"name":"abc.go.com"},"owner":"jack","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":4,"appData":{"kAppData":3,"name":"abc.go.com"},"owner":"jill","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":5,"appData":{"kAppData":5,"name":"aliexpress.com"},"owner":"jones","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":6,"appData":{"kAppData":6,"name":"allthecooks.com"},"owner":"Mark","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":7,"appData":{"kAppData":7,"name":"bigoven.com"},"owner":"jons","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":8,"appData":{"kAppData":8,"name":"bookmyshow.com"},"owner":"joes","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":9,"appData":{"kAppData":9,"name":"crackle.com"},"owner":"jnes","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"},{"kContentProcessing":10,"appData":{"kAppData":10,"name":"eat24.com"},"owner":"ones","cp_status":"done","dv_status":"done","iibe_status":"done","cp_req":"done","dv_req":"done","iibe_req":"done","createdate":"2015-08-11"}]
HTML:
<th data-field=appData.name[0] data-sortable="True" data-align="center" id="o">Name</th>
那么如何使用 data-field 访问名称字段？
SOLUTION
您可以通过为 table 元素设置 data-column-defs 属性来做到这一点
<table id="example" class="display" cellspacing="0" width="100%" data-column-defs='[{"targets":0,"data":"appData.name"}]'>
根据 manual:
There are two important points to consider when using
data-*attributes as initialization options:
- jQuery will automatically convert from dashed strings to the camel case notation used by DataTables (e.g. use
data-page-lengthforpageLength).- If using a string inside the attribute it must be in double quotes (and therefore the attribute as a whole in single quotes). This is another requirement of jQuery's due to the processing of JSON data data.
但是，您可以直接使用初始化选项 columnDefs 而不是使用 data- 属性。
DEMO
有关代码和演示，请参阅 this jsFiddle。