为什么 UI 显示不正确

Question

我是 angular 的新手，我不知道为什么它看起来很奇怪（table 看起来不合适）而运行 snipet，它没有给我看起来和感觉像数据table。
我想给它 UI 就像 this 一样，我也尝试更改 css 的版本，但没有帮助。
谁能帮我解决这个问题。任何帮助将不胜感激。
在此先感谢。

//Angularjs and jquery.datatable with ui.bootstrap and ui.utils

var app=angular.module('formvalid', ['ui.bootstrap']);
app.controller('validationCtrl',function($scope){
  var table = $('#ajaxExample').DataTable({
     "ajax" : {
      "url": "http://datatable.getsandbox.com/datatable",
      "dataSrc": "users",
      "headers": "Content-Type : application/json"
     },
     "columns" : [
      { "data": "name" },
      { "data": "age" },
      { "data": "position" },
      { "data": "office" },
     ],
  });
 
});

  table tr th{
    background:#337ab7;
    color:white;
    text-align:left;
    vertical-align:center;
  }

<!DOCTYPE html>
<html lang="en">

 <head>
  <meta charset="UTF-8">
  <title>datatable using jquery.datatable in angularjs</title>
  <link rel='stylesheet prefetch'
   href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  <link rel='stylesheet prefetch'
   href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
 </head>
<body>

 <div class="container" ng-app="formvalid">
  <div class="panel" data-ng-controller="validationCtrl">
   <div class="panel-heading border">
    <h2>Data table using jquery datatable in Angularjs</h2>
   </div>
   <div class="panel-body">
    <table id="ajaxExample" class="display" width="100%" ui-jq="datatable" ui-options="ajaxOptions">
     <thead>
     <tr>
     <th>Name</th>
     <th>Age</th>
     <th>Position</th>
     <th>Office</th>
     </tr>
     </thead>
    </table>
   </div>
  </div>
  
 </div>
 <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
 <script
  src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
 <script
  src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js'></script>
 <script
  src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js'></script>
 <script
  src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js'></script>
 <script
  src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script>

</body>

</html>

Answer 1

要从 dataTables.bootstrap.min.css 文件附加 bootstrap table 样式，您需要将类添加到 table 元素。

class="table table-striped table-bordered"

否则你会得到标准的 bootstrap table 样式。

如果您在 link 访问的页面上使用 HTML 选项卡，它会显示该页面上 table 的样式。

为什么 UI 显示不正确

Why UI not displaying properly

datatable

user-interface

angular-datatables