Почему пользовательский интерфейс не отображается должным образом - PullRequest
Новая
       5

Почему пользовательский интерфейс не отображается должным образом

0 голосов
/ 06 июля 2018

Я новичок в angular, и я не знаю, почему это выглядит странно (таблица не выглядит должным образом) во время выполнения сниппета, это не дает мне внешний вид и ощущение данных.
Я хочу дать ему 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>

1 Ответ

0 голосов
/ 06 июля 2018

Чтобы прикрепить стиль таблицы начальной загрузки из файла dataTables.bootstrap.min.css, необходимо добавить классы к элементу таблицы. 

class="table table-striped table-bordered"

В противном случае вы получаете стандартный стиль начальной загрузки таблицы.

Если вы используете вкладку HTML на странице, на которую ссылаетесь, она показывает, как оформлена таблица на этой странице.

...