Datatables not rendering on my table in MVC project - html

I want to improve the look and feel of my tables and jQuery datatables looks great for doing that but I can not work out why it is not rendering on my table. I have registered the plugin correctly on my bundle config. Followed the tutorial and ensured everything was in correct place, but no effect.
Here is my generated code from browser.
I have put an alert in the JavaScript which calls dataTable(), this is being called.
the head and body of document are in a different file _layout.cshtml to my index page which is where my table is. Not that this should effect anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Content/DataTables-1.9.4/media/css/demo_table.css"></script>
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.js"></script>
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p>
<a class="site-title" href="/">
<img src="../../Content/Images/TrakMan_white240.png" ,alt="sort", style="border-style:none"/></a>
</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/SGAccount/Manage" title="Manage">simon</a>!
<form action="/SGAccount/LogOff" id="logoutForm" method="post">
<input name="__RequestVerificationToken" type="hidden" value="qouuJJI98XkICybk1UEozbZayptmhHh1zgsHQfTcu9kz6PJrZ_TObkO8Yhkkqv06jtklWRKOSAhUs3w1Bqm58Y-cy7Q8I5dl_loxDuU6AqReCRtWRHg7p4ipeTVKzNzGG50b7D-x3562Hj2q2In_m-LctFmsLIQ1qpM_iYv0MSQ1" />
Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<br />
<br />
<br />
<li>Change Password</li>
<li>Servers</li>
<li>Security Guard</li>
<li>Connections</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script src="/Scripts/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var el = doucument.getElementByName("customerIndex")
el.dataTable({ "sScrolly": "200px", "bPaginate": false });
});
</script>
<h2>Customers</h2>
<p>
<a class="createButton" href="/Customer/Create">Create New</a>
</p>
<table id="customerIndex" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</section>
</div>
</body>
</html>

There are a few problems:
Your code says "var el = doucument..." but that should be "document".
Also you are using "getElementByName" when your table doesn't have the name attribute set, just the ID set.
But why not use the built in jQuery function to select by ID:
$('#customerIndex').dataTable({ "sScrolly": "200px", "bPaginate": false });

you load two different jquery version:
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.js"></script> // in the header
<script src="/Scripts/jquery-2.0.2.js"></script> // in the body
another small correction:
<script src="/Content/DataTables-1.9.4/media/css/demo_table.css"></script>
// should be
<link href="/Content/DataTables-1.9.4/media/css/demo_table.css" rel="stylesheet" />
maybe this will correct your error
Edit:
change
$(document).ready(function () {
var el = doucument.getElementByName("customerIndex")
el.dataTable({ "sScrolly": "200px", "bPaginate": false });
});
to
$(document).ready(function () {
$("#customerIndex").dataTable({ "sScrolly": "200px", "bPaginate": false });
});

had an extra script src="/Scripts/jquery-2.0.2.js"
at bottom of page.....

Related

How to display an array of objects on the html page when using angularjs?

I have a json file which i will be fetching using $http service.
The sample json is added.
I am saving the json to angularjs scope variable.
How to display the dat in html.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>English Premier League</title>
</head>
<body ng-controller="mainController">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Premier League</a>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/soccer-bg.jpg')">
</header>
<div ng-repeat="blog in array">
<ul class "nav nav-pills">
<li><a href ng-click ="tab"={{$index+1}}>{{blog.matches}}</a></li>
</ul>
</div>
</body>
</html>
JSON file->
{"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1}]},{"name":"Matchday 2","matches":[{"date":"2015-08-14","team1":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"team2":{"key":"manutd","name":"Manchester United","code":"MUN"},"score1":0,"score2":1},{"date":"2015-08-15","team1":{"key":"southampton","name":"Southampton","code":"SOU"},"team2":{"key":"everton","name":"Everton","code":"EVE"},"score1":0,"score2":3}]}]}
IN the output whole array is displaying.Below is the app.js file
app.js
var myApp = angular.module('blogApp', []);
myApp.controller('mainController',['$http','$scope',function($http,$scope) {
$http.get('https://xxxxx.json').success(function(data){
$scope.array=data;
console.log(data);
console.log($scope.array);
});
}]);
This is how you need to be displaying in html page.
Instead of getting the json over http request i have hardcoded the value and made the following example.
Hope it helps
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
angular.module("blogApp", []).controller('mainController', ['$http', '$scope', function($http, $scope) {
$scope.array = {"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1}]},{"name":"Matchday 2","matches":[{"date":"2015-08-14","team1":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"team2":{"key":"manutd","name":"Manchester United","code":"MUN"},"score1":0,"score2":1},{"date":"2015-08-15","team1":{"key":"southampton","name":"Southampton","code":"SOU"},"team2":{"key":"everton","name":"Everton","code":"EVE"},"score1":0,"score2":3}]}]};
}]);
}());
</script>
<style></style>
</head>
<body ng-app="blogApp">
<div ng-controller="mainController">
<div>
<h1>Test: {{array.name}}</h1>
<div ng-repeat="round in array.rounds">
<h3>Round: {{round.name}}</h3>
<table class="table">
<tr>
<th>Date</th>
<th>Team 1</th>
<th>Team 2</th>
<th>Score 1</th>
<th>Score 2</th>
</tr>
<tr ng-repeat="match in round.matches">
<td>{{ match.date | date}}</td>
<td>{{ match.team1.name }}</td>
<td>{{ match.team2.name }}</td>
<td>{{ match.score1 }}</td>
<td>{{ match.score2 }}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

Printing from database

Im trying to make a system that will print label's. but dont know how to make it as i want. It is working when i only have one row in the DB, but when i get more rows, that is when i hit some problems with the layout.
<!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>Din Matmerking</title>
<!-- style -->
<link href="config/stil/style.css" rel="stylesheet" type="text/css">
<link href="config/stil/oppskrift.css" rel="stylesheet" type="text/css">
<link href="config/stil/merk.css" rel="stylesheet" type="text/css">
<!-- <link href="/config/stil/base_style.css" rel="stylesheet" type="text/css"> -->
<!-- W3 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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>
<div id="main" class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class="logo"><img src="/img/Logo2.png" class="img-responsive"></div>
</div>
<br>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Velkommen</a>
</div>
<ul class="nav navbar-nav">
<li>Hjem</li>
<li>Oppskrifter</li>
<li>Matmerking</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-out"></span> Logg ut</li>
</ul>
</div>
</nav>
<div class="panel-body">
<div class="well">
<div id="printableArea">
<form id="merk">
<table>
<thead>
<!-- <tr>
<th id="text">Matmerking</th>
</tr>
<tr>
<th><br></th>
</tr> -->
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td id="text"><b>Produkt: </b></td>
<td><b>'.$row["name"].'</b></td>
</tr>
<tr>
<td id="text"><b>Laget: </b></td>
<td><b>'.$row["produsert"].'</b></td>
</tr>
<tr>
<td id="text"><b>Holdbarhet: </b></td>
<td><b>'.$row["holdbarhet"].'</b></td>
</tr>
<tr>
<td id="text"><b>Pris pr kg: </b></td>
<td><b>'.$row["pris_kg"].' ,-</b></td>
</tr>
<tr>
<td id="text"><b>Laget av: </b></td>
<td><b>'.$row["signatur"].'</b></td>
</tr>
';
}
?>
</tbody>
</table>
</form>
</div>
<br>
<input type="button" class="btn btn-primary" onclick="printDiv('printableArea')" value="Print" />
</div>
</div>
<div class="panel-footer">
<br>
<label><p>© DIN-MATMERKING.NO 2017</p></label>
<br>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</body>
</html>
I want the user to be able to chose form a name that is displyed in a table whit data from MySqlDB.
this is how I want it to be displayed:
Here you see how it looks when I have more rows in the DB:
Any adwise? Maybe ita possible to have a DB table displayd in html and have it so the name can be a link and open a modual where the info i want printed out is displayd.
<?php
$connect = mysqli_connect("connection",
"username", "password", "DB");
$query = "SELECT * FROM merkelapp";
$result = mysqli_query($connect, $query);
?>
DB structure
So the basic structure of your HTML should be as follows, for each label:
<div id="printableArea"> <!-- HERE YOU MUST HAVE A UNIQUE ID FOR EACH LABEL -->
<form id="merk"> <!-- HERE YOU MUST HAVE A UNIQUE ID FOR EACH LABEL AS WELL -->
<table><!-- LABEL DETAILS --></table>
<!-- HERE YOU NEED TO PASS THE UNIQUE ID OF THE AREA YOU WANT TO PRINT -->
<input type="button" class="btn btn-primary" onclick="printDiv('printableArea')" value="Print" />
</form>
</div>
My suggestion is that you create a separate .well wrapper for each label, and by using the unique id of each row in the merkelapp table, you can create a unique ID attributes for your elements:
<?php while($row = mysqli_fetch_array($result)) { ?>
<div class="well">
<div id="printableArea<?php echo $row['id']; ?>">
<form id="merk<?php echo $row['id']; ?>">
<table>
<tbody>
<tr>
<td id="text"><b>Produkt: </b></td>
<td><b><?php echo $row["name"]; ?></b></td>
</tr>
<tr>
<td id="text"><b>Laget: </b></td>
<td><b><?php echo $row["produsert"]; ?></b></td>
</tr>
<tr>
<td id="text"><b>Holdbarhet: </b></td>
<td><b><?php echo $row["holdbarhet"]; ?></b></td>
</tr>
<tr>
<td id="text"><b>Pris pr kg: </b></td>
<td><b><?php echo $row["pris_kg"]; ?> ,-</b></td>
</tr>
<tr>
<td id="text"><b>Laget av: </b></td>
<td><b><?php echo $row["signatur"]; ?></b></td>
</tr>
</tbody>
</table>
</form>
</div>
<br>
<input type="button" class="btn btn-primary" onclick="printDiv('printableArea<?php echo $row['id']; ?>')" value="Print" />
</div>
<?php } ?>
Note that I appended the ID of each row after the id attributes (printableArea<?php echo $row['id']; ?>) so the output of the id's will be printableArea1, printableArea2, printableArea3 and so on. I did the same for each form (merk1, merk2...).
I also changed the printDiv('printableArea') and added the row ID there so when you click on a button, it will pass the correct ID to that function.
As a side note, I recommend to escape the output using htmlentities so characters like > will not break the HTML structure by replacing it with the corresponding >, so instead of just having:
<td><b><?php echo $row["name"]; ?></b></td>
You output it like this:
<td><b><?php echo htmlentities( $row["name"] ); ?></b></td>

I am trying to have a date picker (pikaday.js) in an html page

I am making a web service using ASP.NET. I have three dropdown lists that work, but somehow, the date picker doesn't work when I put code in the table. BUT, it works when I use it outside. Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet"/>
<link href="customStyleSheet.css" rel="stylesheet" />
<link href="css/pikaday.css" rel="stylesheet" type="text/css" />
<link href="css/theme.css" rel="stylesheet" type="text/css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="scripts/Pikaday/moment.js" type="text/javascript"></script>
<script src="scripts/Pikaday/pikaday.js" type="text/javascript"></script>
<style>
table{
font-size:20pt;
}
select{
width:300px;
}
TextBox{
width:300px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<%--Left sidebar--%>
<div class ="col-lg-4">
<table>
<tr>
<td>Building</td>
<td>
<select id="buildings"></select>
</td>
</tr>
<tr>
<td>Room</td>
<td>
<select id="rooms"></select>
</td>
</tr>
<tr>
<td>Employee</td>
<td>
<select id="employees"></select>
</td>
</tr>
<tr>
<td>Start Day</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<script = "text/javascript">
var picker = new Pikaday(
{
field: document.getElementById("TextBox1"),
firstDay: 1,
format: "YYYY-MM-DD",
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020],
numberOfMonths: 2
});
</script>
</td>
</tr>
</table>
<%--Row #1--%>
<div class ="row">
<div class ="col-lg-4">
<div class = "singleLabel">Start date:</div>
</div>
<div class ="col-lg-7">
<div class = "textBox"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
<script = "text/javascript">
var picker = new Pikaday(
{
field: document.getElementById("TextBox1"),
firstDay: 1,
format: "YYYY-MM-DD",
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020],
numberOfMonths: 2
});
</script>
</div>
</div>
<%--Row #2--%>
<div class ="row">
<div class ="col-lg-4">
<div class = "singleLabel">End date:</div>
</div>
<div class ="col-lg-7">
<div class = "textBox"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></div>
<script = "text/javascript">
var picker = new Pikaday(
{
field: document.getElementById("TextBox2"),
format: "YYYY-MM-DD",
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020],
numberOfMonths: 2
});
</script>
</div>
</div>
</div>
<%--Right main column--%>
<div class ="col-lg-8">
<div class = "customDiv">Main area</div>
</div>
</form>
</body>
</html>
I have read similar posts, but I still can't see it. Moreover, if please possible, is there a way to put everything neatly in a table. Here is a screenshot:
Thank you very much for your help!

angularjs infinite scroll from external json

how to implement infine scroll as json data is large file. i have a bit of trouble as creating an infinite scroll in angularjs from a JSON file generated on an external site. How to I get the infinite scroll to work relative to the inner content div scrollbar? below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="table.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).resize(function() {
if ($(window).width() < 960) {
window.location = "http://www.stackoverflow.com";
}
else {
window.location = "http://www.google.com";
}
});
</script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body class="body" ng-app="myApp" ng-controller="customersCtrl">
<header class="mainHeader">
<nav>
<ul>
<li class="active">Sokranti Data Analytics</li>
</ul>
</nav>
</header>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<content>
<div class="mytable">
<table >
<tr>
<td>eng_rev_type</td>
<td>year_start</td>
<td>year_end</td>
<td>type</td>
<td>amount</td>
</tr>
<tr ng-repeat="x in names | filter:test">
<td>{{ x.eng_rev_type }}</td>
<td>{{ x.year_start }}</td>
<td>{{ x.year_end }}</td>
<td>{{ x.type }}</td>
<td>{{ x.amount }}</td>
</tr>
</table>
</div>
</content>
</article>
</div>
<aside class="top-sidebar">
<article>
<h2>Filter</h2>
<p><input type="text" ng-model="test"></p>
</article>
</aside>
</div>
<footer class="mainFooter">
<p>Copyright © 2015 </p>
</footer>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("data.json")
.success(function (response) {$scope.names = response.data;});
});
</script>
</body>
</html>
You can create a directive that will bind on the scroll event. Then you can increase the size of the scroll height.

Fancybox iframe openning only first link

I am a layman in html, but for my personal website, I am trying to add some lightbox (Fancybox).
The problem I am facing is that it is only opening the first link as the lightbox, not the 2nd one. If I interchange the position (i.e. the 2nd link which was not opening became 1st) then the present first link is opening, and not the previous one.
I have tried to make an minimal example:
index.html:
<!DOCTYPE html>
<head>
<title>Learning Fancybox</title>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
</head>
<body>
<div id="content">
<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td>
<h3>Trying Fancybox</h3>
<li><a id="iframe" href="jbn.html" />content1</a></li>
<li><a id="iframe" href="chabi.html" />content2</a></li>
</td>
</tr>
</table>
</div>
</body>
</html>
content1(jbn.html)
<!DOCTYPE html>
<head>
<title>content2</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="content">
Some txt for content2
</div>
</div>
</div>
</body>
</html>
and content 2(chabi.html)
<!DOCTYPE html>
<head>
<title>lb content1</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="content">
Some txt here
</div>
</div>
</div>
</body>
</html>
As it is now, the jbn.html is opening as lightbox, chabi.html is opening as an independent webpage.
Please help
UPDATE It is possibly not a fancybox problem, as I have just checked, if I add an identical id as #iframe2 and change the id of the 2nd links id to that, it is working properly.
Please help.
Problem is solved by changing the id to class(.iframe)