[英]AngularJS, UI Bootstrap's Tabs and Datatables
I am using UI Bootstrap's Tabs and inserting Datatables in each tab but the datatable is not getting rendered. 我正在使用UI Bootstrap的选项卡并在每个选项卡中插入数据表,但数据表未被渲染。
If I remove uib-tabset
and uib-tab
the datatable gets rendered. 如果我删除了uib-tabset
和uib-tab
, uib-tab
呈现数据表。
Here's the html code 这是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>
... and the js ......和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";
}
}
});
}
});
What should I do? 我该怎么办?
Don't use a jQuery solution like the comment above is suggesting. 不要像上面的评论那样使用jQuery解决方案。 ui-bootstrap doesn't require jQuery, just modify the examples on the doc page to your need. ui-bootstrap不需要jQuery,只需修改doc页面上的示例即可。 this also means don't use $
in your controller, but rather just a function that will refresh the table. 这也意味着不要在你的控制器中使用$
,而只是一个刷新表的函数。 you can populate a table using the ngRepeat directive. 您可以使用ngRepeat指令填充表。
Like so 像这样
<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>
Now everything is getting rendered 现在一切都在渲染
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.