<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="Scripts/Script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<link href="Style.css" rel="stylesheet"/>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</html>
what is the issue in the code?
not able to fecth the-rdetails of employee using ng-repeat in Angular js
i m getting this ouput Id Name Gender Salary
{{employee.id}} {{employee.name}} {{employee.gender}} {{employee.salary
what is the issue in the code?
You need to place angularjs script before controller script:
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
<script src="Scripts/Script.js"></script>
<link href="Style.css" rel="stylesheet"/>
</head>
Just Use proper flow and structuring:
var app = angular.module("myApp", []);
app.controller('myController', function($scope){
$scope.employees = [
{ id : 100,
Name : 'ONE'
},
{ id : 102,
Name : 'TWO'
}
];
console.log("hi");
console.log($scope.employees);
});
<!DOCTYPE html>
<html ng-app="myApp">
<head >
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.Name}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<link href="Style.css" rel="stylesheet"/>
<script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</html>
Related
While I was working on a project I needed to generate around 2000 small tables which I also have to print in pages. I was generating those tables via using a for loop within my django project using jinja code.Here I am attaching a sample code-
{% load static %}
{% load tempos %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/bcard/bcard.css' %}">
<title>bcoutput</title>
</head>
<body>
<div class="container">
<div class="row">
{% for i in 30|get_range %}
<div class="col-lg-4">
<table class="table pagebreak table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
The css file I am using is:
#page {
size: A4;
margin: 0;
}
#media print {
body {
width:100%
height:100%
}
table {
width: 30% !important;
height: 50% !important;
}
.pagebreak {
page-break-inside:avoid;
}
}
Now, the problem I am facing is-I want to generate 6 tables in three columns per page while printing the pages. But, no matter what I do in the css section it isn't giving me the proper result.The ongoing print preview is-
Is there anyone to help ?
When I am trying to apply SelectedRowStyle for a gridview it is not applying. The application is using bootstrap template. Also table css I applied is table table-striped How to apply style for selected row?
You can refer below example
Use custom class for specific table.
$(".custom-table tbody tr").on('click', function() {
$('.custom-table tbody tr').removeClass("selected");
$(this).addClass("selected");
});
tr.selected {
background-color: red;
}
/* This is not necessary if your not using table-striped. */
.table-striped tbody tr.selected:nth-of-type(odd) {
background-color: red;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Bootstrap table example</title>
</head>
<body>
<table class="custom-table table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
you can do it like this, use of bootstrap active class.
$('.myTable').on('click', '.row', function() {
$(this).addClass('active').siblings().removeClass('active');
});
give active class custom css, since you are using striped table, to differentiate the selected row.
I'm trying to display DataTable in my project, It works only without Layout
This is my code Layout:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title Gestion Phosphate</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<! --NAVBAR-->
<div class="row">
#RenderBody()
</div>
<footer>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
And in my view :
#model IEnumerable<wb01.Models.Réception_camions>
#*#{ Layout = null;}*#
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<div>
<table class="display" id="MyDataTable">
<thead>
<tr #*class="active" style="color:blue; background-color:black"*#>
<th>
#Html.DisplayNameFor(model => model.Date_d_arrivée)
</th>
<th>
#Html.DisplayNameFor(model => model.heure_d_arrivée)
</th>
<th>
#Html.DisplayNameFor(model => model.Poids_cam)
</th>
<th>
#Html.DisplayNameFor(model => model.Camions.N_série)
</th>
<th>
#Html.DisplayNameFor(model => model.Qualité)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Date_d_arrivée)
</td>
<td>
#Html.DisplayFor(modelItem => item.heure_d_arrivée)
</td>
<td>
#Html.DisplayFor(modelItem => item.Poids_cam)
</td>
<td>
#Html.DisplayFor(modelItem => item.Camions.N_série)
</td>
<td>
#Html.DisplayFor(modelItem => item.Qualité.Qualité1)
</td>
<td>
#Html.ActionLink("Modifier", "Edit", new { id = item.Id_rec_cam }) |
#Html.ActionLink("Détails", "Details", new { id = item.Id_rec_cam }) |
#Html.ActionLink("Supprimer", "Delete", new { id = item.Id_rec_cam })
</td>
</tr>
}
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
$("#MyDataTable").DataTable();
})
Am I missing a reference or is not in its correctly place, please help; thanks in advance.I tried to change the order of references but I got the same result even with other Views!
Am I missing a reference or is not in its correctly place, please help; thanks in advance.I tried to change the order of references but I got the same result even with other Views!
You have multiplem problems. You are loading jQuery multiple times. Once in your layout, and once in your view. Remove the reference in your view.
Your next problem is, that you put script tags directly in your view. While this might work, it is probably causing an issue with the way your scripts are loaded.
You should wrap them in #section scripts { } block, to make sure, the scripts in your view are executed after layout and view are rendered. If you take a look at your layout, you will see that #RenderSection("scripts", required: false) comes after jQuery and bootstrap have been loaded up.
All in all your view should look more like this:
#model IEnumerable<wb01.Models.Réception_camions>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<!-- html omitted-->
#section scripts {
<!--jQuery is loaded when this executes, so now we can pull in our jquery plugins-->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$("#MyDataTable").DataTable();
})
<script>
}
I'm sure this is just something stupid, but I've copied the table header formatting example from bootstraps website here but it isn't actually changing the table header color. What am I doing wrong?
Running the code snippet shows the behavior I am describing when I want it to look like:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container">
<table class="table table-hover table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm testing a local site in my phone (Lumia 920), the Bootstrap 3 site shows OK, but when I access to my local site my table doesn't look responsive.
I even tried with the sample code of the Bootstrap page..
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-twttr-rendered="true">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>
Extra small devices
<small>Phones (<768px)</small>
</th>
<th>
Small devices
<small>Tablets (≥768px)</small>
</th>
<th>
Medium devices
<small>Desktops (≥992px)</small>
</th>
<th>
Large devices
<small>Desktops (≥1200px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap">Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th class="text-nowrap">Container width</th>
<td>None (auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<th class="text-nowrap">Class prefix</th>
<td><code>.col-xs-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<th class="text-nowrap"># of columns</th>
<td colspan="4">12</td>
</tr>
<tr>
<th class="text-nowrap">Column width</th>
<td class="text-muted">Auto</td>
<td>~62px</td>
<td>~81px</td>
<td>~97px</td>
</tr>
<tr>
<th class="text-nowrap">Gutter width</th>
<td colspan="4">30px (15px on each side of a column)</td>
</tr>
<tr>
<th class="text-nowrap">Nestable</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th class="text-nowrap">Offsets</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th class="text-nowrap">Column ordering</th>
<td colspan="4">Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-3">
asd
</div>
</div>
</div>
</body>
</html>
What am I doing wrong?.
Thank you.
Since IE10 on WP8 has some bugs regarding its processing of <meta name="viewport" content="width=device-width">, you need to apply the WP8 IE10-specific hack detailed in the Bootstrap documentation:
Add this CSS:
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
And this JavaScript:
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style');
msViewportStyle.appendChild(
document.createTextNode(
'#-ms-viewport{width:auto!important}'
)
);
document.querySelector('head').appendChild(msViewportStyle)
}
Or you can wait for Windows Phone 8.1, where the bug is said to be fixed.