使用等于对象数组的对象填充DataTable

时间:2016-06-08 20:17:11

标签: javascript jquery arrays object datatables

我的DataTable结构如下:

<div class="table-responsive">
   <table class="table table-striped  table-condensed table-bordered" id="mainSutable2" style="width: 100%">
      <thead>
         <tr>
            <th>Comment Time</th>
            <th>ID</th>
            <th>Status</th>
            <th>Comment</th>
         </tr>
      </thead>
      <tbody>
      </tbody>
   </table>
</div>
var mainSutable2 =$('#mainSutable2').DataTable({
    paging:   false,
    ordering: true,
    info:     true,
    oLanguage:{
        sProcessing: 'No Data To Display',  //change language of default "Processing" dialogue
        sSearch: 'Filter'
    },
    data: trackingNotes,
    columns: [
        { data: "ID" },
        { data: "comment" },
        { data: "dt" },
        { data: "status"}
    ]
});

我正在尝试使用以下内容填充此表:请注意,MainSutable是另一个包含对象值的行的表。

var trackingNotes = {};
trackingNotes = mainSutable.row(this).data().tracking_notes;

//tracikingNotes equals the following
/*
Object {tracking_note: Array[2]}
tracking_note: Array[2]
0:Object
ID: "12345"
comment: "yo"
dt: "2016-06-06 12:50:46.0"
guid: "9999"
status: "1"
1:Object
ID: "12346"
comment: "hey"
dt: "2016-06-08 12:50:46.0"
guid: "9999"
status: "2"
*/

如果任何人有任何可以引导我朝正确方向发展的信息提示,我们将不胜感激。

1 个答案:

答案 0 :(得分:0)

不确定为什么它不适合你。我试过复制问题,但它对我有效,数据显示在DataTable可能是对dataTable.js的脚本引用有问题,或者你可能没有调用文档加载中的绑定逻辑

将下面的示例复制并粘贴到新页面并运行它,您将看到它的工作原理。在我的代码中找出与我的不同之处,我相信它会帮助您解决问题:

<head runat="server">
    <title></title>
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script>
        $(function () {

            var trackingNotes = [];

            var note1 = { ID: "1", comment: "comment1", dt: new Date(), guid:"1", status: "1" };
            var note2 = { ID: "2", comment: "comment 2", dt: new Date(), guid: "2", status: "1" };
            var note3 = { ID: "3", comment: "comment 3", dt: new Date(), guid: "3", status: "0" };

            trackingNotes.push(note1);
            trackingNotes.push(note2);
            trackingNotes.push(note3);

            var mainSutable2 = $('#mainSutable2').DataTable({
                paging: false,
                ordering: true,
                info: true,
                oLanguage: {
                    sProcessing: 'No Data To Display',  //change language of default "Processing" dialogue
                    sSearch: 'Filter'
                },
                data: trackingNotes,
                columns: [
                    { data: "ID" },
                    { data: "comment" },
                    { data: "dt" },
                    { data: "status" }
                ]
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="table-responsive">
            <table class="table table-striped  table-condensed table-bordered" id="mainSutable2" style="width: 100%">
                <thead>
                    <tr>
                        <th>Comment Time</th>
                        <th>ID</th>
                        <th>Status</th>
                        <th>Comment</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </form>
</body>