1

我正在使用UI Bootstrap 的选项卡并在每个选项卡中插入数据表，但数据表没有被呈现。

如果我删除uib-tabset并且uib-tab数据表被渲染。

这是html代码

<uib-tabset active="active" >
    <uib-tab index="0" heading="Successful">
        <div class="panel">
            <div class="panel-body">
                <table id="table-messagestatus-view-successful" class="table table-hover dataTable table-striped width-full">
                    <thead>
                        <tr>
                            <th>MessageID</th>
                            <th>Date</th>
                            <th>Message Name</th>
                            <th>Phone Number</th>
                            <th>Status</th>
                            <th>Cost</th>
                            <th>SMS Group</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>MessageID</th>
                            <th>Date</th>
                            <th>Message Name</th>
                            <th>Phone Number</th>
                            <th>Status</th>
                            <th>Cost</th>
                            <th>SMS Group</th>
                        </tr>
                    </tfoot>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </uib-tab>
    <uib-tab index="1" heading="Unsuccessful">
         <div class="panel">
            <div class="panel-body">
                <table id="table-messagestatus-view-unsuccessful" class="table table-hover dataTable table-striped width-full">
                    <thead>
                        <tr>
                            <th>MessageID</th>
                            <th>Date</th>
                            <th>Message Name</th>
                            <th>Phone Number</th>
                            <th>Status</th>
                            <th>Cost</th>
                            <th>SMS Group</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>MessageID</th>
                            <th>Date</th>
                            <th>Message Name</th>
                            <th>Phone Number</th>
                            <th>Status</th>
                            <th>Cost</th>
                            <th>SMS Group</th>
                        </tr>
                    </tfoot>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </uib-tab>        
</uib-tabset>

...和js

var app = angular.module('smsmanagement', ['ui.bootstrap']);

app.controller('MessageStatusController', function ($scope, $http, $routeParams, $routeParams) {

var messageID = $routeParams.param;

// Refresh the table
if ($('#table-messagestatus-view-successful').length > 0) {
    $('#table-messagestatus-view-successful').DataTable({
        sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
        "processing": true,
        "serverSide": true,
        "order": [[1, "desc"]],
        "ajax": {
            "url": "messagestatus/dt",
            "data": function (d) {
                d.messageID = messageID;
                d.status = "successful";
            }
        }
    });
}
});

我应该怎么办？

4

1 回答 1

0

不要使用上面评论建议的 jQuery 解决方案。ui-bootstrap 不需要 jQuery，只需根据您的需要修改文档页面上的示例。这也意味着不要$在你的控制器中使用，而只是一个刷新表格的函数。您可以使用ngRepeat指令填充表。

像这样

<table id="table-messagestatus-view-successful" class="table table-hover dataTable table-striped width-full">
          <thead>
            <tr>
              <th>MessageID</th>
              <th>Date</th>
              <th>Message Name</th>
              <th>Phone Number</th>
              <th>Status</th>
              <th>Cost</th>
              <th>SMS Group</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in tableData2">
              <th>{{row.MessageID}}</th>
              <th></th>
              <th></th>
              <th></th>
              <th>{{row.Status}}</th>
              <th></th>
              <th></th>
            </tr>
          </tbody>
        </table>

现在一切都在渲染

这是一个演示 plunker

于 2017-05-29T09:37:31.510 回答