Printing from database - mysql

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>

Related

QATester weird Error: clickable element "ADD" was not found by text|CSS|

Now... the App runs smoothly and fulfill every functionalities, thing is when I try to run the QATest, everyone pass through, except one:
Error: clickable element "ADD" was not found by text|CSS|xpath
This error its driving me nuts, as ADD button runs OK on the remaining test. Here is my Index.php:
<?php include("db.php"); ?>
<!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.0">
<title>TEST ASSESMENT</title>
<!--- Bootstrap CSS --->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="header"style="margin-top:50px;">
<form action="delete_product.php" method="post">
<div class="alignButton" style="display:flex; justify-content:space-between">
<a style="margin-left:30px;text-decoration:none;color:black;font-size:30px;" href="index.php">Product List</a>
<div class="alignButtons" style="display:flex; justify-content:flex-end">
<button style="margin-right:50px;" id="add" type="button" class="btn btn-primary" name="add" onclick="window.location.href='product_add.php'">ADD</button>
<button style="margin-right:50px;" id="delete-product-btn" type="submit" name="mass_delete" class="btn btn-danger">MASS DELETE</button>
</div>
</div>
<hr/>
</div>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<!--Get all products from DB-->
<?php
$query = "SELECT * FROM products";
$result_products = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result_products)) { ?>
<!-- <?php
if(isset($_SESSION['status'])){
echo "<h4>".$_SESSION['status']."</h4>";
unset($_SESSION['status']);
}
?> -->
<div class="col-sm-4">
<div class="card" style="margin:10px;padding:10px;width:250px;">
<input class="delete-checkbox" type="checkbox" name="check_list[]" value="<?php echo $row['id']; ?>">
<label><?php echo $row['sku']; ?> : <?php echo $row['prod_type']; ?></label>
<h5><?php echo $row['name']; ?></h5>
<p>$<?php echo $row['price']; ?></p>
<!--Conditional rendering depending on product type-->
<?php if ($row['prod_type'] == 'DVD'): ?>
<p>Size: <?php echo $row['dvd']; ?>MB</p>
<?php elseif ($row['prod_type'] == 'BOOK'): ?>
<p>Weight: <?php echo $row['book']; ?> Kgs.</p>
<?php elseif ($row['prod_type'] == 'FUR'): ?>
<p> H:<?php echo $row['fur_h']; ?>x W:<?php echo $row['fur_h']; ?>x L:<?php echo $row['fur_l']; ?></p>
<?php endif ?>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</form>
</div>
<!--- Bootstrap JS --->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
And here is the QATester issue:
Check homepage basic requirements
951ms

Error: Clickable element "ADD" was not found by text|CSS|XPath
Error: Clickable element "ADD" was not found by text|CSS|XPath
at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
I }) => {
I.amOnPage('/');
I.click('MASS DELETE');
I.click('ADD');
The 11th following test passes OK. Even the button MASS DELETE on the same test.I have tried to Switch button order ( Mass Delete & Add), declare them with class/id; Rename button to add, Add, ADD; moved the button outside container div... Can't figure out what's the problem or what I have missing. I would really appreciate any help/clue/tip about it.
Answer: Just add the text ADD in the add button. it will pass. If you have multiple navigation for different page. type the exact 'ADD' text inside the button tag.
This is my navigation and it worked: it is in react, but similar with the html
<header>
<nav className="nav px-3 m-auto d-flex justify-content-between align-items-center border-bottom">
<h3 className="nav-title">
<Link to="/">Product {isProductListPage ? "List" : "Add"}</Link>
</h3>
<div className="nav-list d-flex align-items-center">
<Link to="/add-product">
<button className="nav-list-add btn me-3">
ADD
</button>
</Link>
<button id="delete-product-btn" onClick={handleDelete} className="btn btn-danger">MASS DELETE</button>
</div>
</nav>
</header>
I had the same problem. Just put bigger margin between buttons :)

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>

How to add sort option in Footable?

I have included necessary files required for Footable sorting , but columns dont have an option to sort the column values , any help would be of great help .
Code :
<!DOCTYPE html>
<html>
<head>
<title> Sorting Html Table Using FooTable </title>
<link rel="stylesheet" href="css/footable.core.css">
<link rel="stylesheet" href="css/footable.metro.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/footable.js"></script>
<script src="js/footable.sort.js"></script>
</head>
<body>
<table class="footable" >
<thead >
<!-- data-type = data type in the column -->
<!-- data-sort-ignore = disable sorting for the column -->
<!-- data-sort-initial = sort the column when the FooTable is initialized -->
<tr>
<th >Name</th>
<th ">Mark1</th>
<th ">Mark2</th>
<th " >Total</th>
</tr>
</thead >
<tbody >
<!-- populate table from mysql database -->
<?php while($row1 = mysqli_fetch_array($result)):;?>
<tr>
<td><?php echo $row1[0];?></td>
<td><?php echo $row1[1];?></td>
<td><?php echo $row1[2];?></td>
<td><?php echo $row1[3];?></td>
</tr>
<?php endwhile;?>
</tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.footable').footable();
});
</script>
</html>
Added the following bootstrap and jquery links to html file which solved my issue on sorting , now i can sort them :
<link data-require="bootstrap-css#3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="footable.core.css" />
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="jqueryui#*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

Database rows displayed in one line, not in separate <td>

I have set up a search bar on my php page but the results are all displayed in one long in the table. How would I make it display search one of the results on a separate line, or maybe 2 on a line? Here is the code for the page.
<?php
$names = array();
if(isset($_POST['searchterm'])) {
mysql_connect("localhost", "root", "Oliver");
mysql_select_db("videos");
$search = mysql_real_escape_string(trim($_POST['searchterm']));
$find_videos = mysql_query("SELECT * FROM `videos` WHERE `keywords` LIKE'%$search%'");
while ($row = mysql_fetch_assoc($find_videos)) {
$names[] = $row['name'];
}
}
include('session.php');
?>
<!DOCTYPE html>
<html>
<head>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<link rel="icon" type="image/ico" href="images/favicon.ico">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<style type="text/css">
.vjs-default-skin .vjs-control-bar { font-size: 125% }
</style>
<meta charset="utf-8">
<title>Network TV | search</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css" />
<link href="css/font-awesome.css" rel="stylesheet" />
<link href="css/3.1.1/animate.css" rel="stylesheet" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body style="overflow-x: hidden">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Network TV</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="">Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<section style="padding-top:100px; width:100%"class="container-fluid" id="section2">
<h1 class="text-center" style="color:white">Network TV</h1>
<h3 class="text-center" style="color:white"><u>Search results</u></h3>
<table class="table" style="color: white">
<thead>
<tr>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php foreach($names as $name) { ?>
<td><?php echo $name; ?> <strong><h7><u>Watch!</u></h7></strong></td>
<?php } ?></td>
</tr>
</tbody>
</table>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</html>
Update
Added updated picture
Instead of putting every result into the same <tr> and <td>, place them into multiple of them.
Looking at your HTML setup, I get the feeling you didn't quite grasp how the <tr> and <td> tags function. Remember that a <tr> (table row) adds a new row to the table, and inside that row you can place a <td> (table division), which functions as a column inside that row.
If that didn't explain it for you, perhaps one of these two resources will help you further: [1] [2].
Inside your HTML, replace the <tr> block with the following:
<?php
foreach($names as $name) {
echo '<tr>
<td>' . $name . '</td>
<td><strong><h7><u>Watch!</u></h7 </strong></td>
</tr>';
}
?>
you have extra <td> tag here
<td><?php foreach($names as $name) { ?>
<td><?php echo $name; ?> <strong><h7><u>Watch!</u></h7></strong></td>
<?php } ?></td>
Try follwing and see if it aligns the result
<?php foreach($names as $name) { ?>
<td><?php echo $name; ?></td>
<td><strong><h7><u>Watch!</u></h7></strong></td>
<?php } ?>

Datatables not rendering on my table in MVC project

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.....