Hi i want to implement DataTable in the table to populate data from my db in my php page, the below code i used, but its not working, not getting the data table, instead i am getting the normal table only -
<head>
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.7/media/css/jquery.dataTables.min.css">
<script src="../DataTables-1.10.7/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.7/extensions/Responsive/css/dataTables.responsive.css">
<script src="../DataTables-1.10.7/extensions/Responsive/js/dataTables.responsive.js" type="text/javascript"></script>
</head>
<div id="example_wrapper" class="dataTables_wrapper" role="grid">
<div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">
<?php
$sql="select product_id,product_name,original_price,offer_price,product_rating,image_main,stock_in_hand from niad_products order by product_id desc";
$result=$linkID1->query($sql);
$c=#mysqli_num_rows($result);
if($c>=1){?>
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
</script>
<div id="printable">
<table id="example" class="display" cellspacing="0" width="100%" style="color:#FFF">
<thead>
<tr>
<th>Image</th>
<th>Product Name</th>
<th>Original Price</th>
<th>Offer Price</th>
<th>Rating</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<?php while($row=mysqli_fetch_array($result)){?>
<tr>
<td>
<?php echo "<img width='100' height='100' src=../product-images/".$row['image_main'] ." />"; ?></td>
<td>
<?php echo $row['product_name']; ?>
</td>
<td>
<?php echo $row['original_price']; ?>
</td>
<td>
<?php echo $row['offer_price']; ?>
</td>
<td>
<?php echo $row['product_rating']; ?>
</td>
<td>
<?php echo $row['stock_in_hand']; ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<?php } else {echo "No records";} ?>
</div>
</div>
Can anyone guide me with my mistake. It will be very helpful. Thanks
Related
I'm using jquery-confirm, and I need to capture the name of the element which i clicked to edit.
jQuery and jQuery-confirm
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
</head>
PHP
<?php
$products = array(['name'=>'Balloon'],
['name'=>'Bike']);
?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php foreach($products as $prod) { ?>
<tr>
<td><?php echo $prod['name'] ?></td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
<?php } ?>
</tbody>
</table>
SCRIPT
$('a.edit').confirm({
content: '<input type="text" value="$ Name of the product.">'
});
Obs: Where It's written "$ Name of the product", should appear the name of each product that I click.
You can use this.$target to get a tag which is clicked then using .closest('tr').find('td:eq(0)').text() get first td content.
Demo Code :
$('.edit').confirm({
content: function() {
//get closest tr and find get product name..
return '<input type="text" value="' + this.$target.closest('tr').find('td:eq(0)').text().trim() + '">'
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Abc
</td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
<tr>
<td>
Abcd
</td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
<tr>
<td>
Abce
</td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
</tbody>
</table>
I make Jquery to read data from db and when I click the list it shown roe data on detail box.
But.... problem: I make div where I show content. I load page with Jquery to div.
but when I do this the row click dont work. I can not understan why. It is shild element but id i understan right when I use getElementById it should to take current row, but no.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<?php include './config/init.php'; ?>
<html>
<head>
<meta charset="UTF-8">
<title>Biisilista</title>
<script src="./js/jquery-3.2.1.js"></script>
<link href="css/basic.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>KaraokeBiisit </h1>
<div id="edit" style="display:none">
<div>
<form name="formedit" method="post" action="">
<table id="edittable" border="1" cellspacing="2" cellpadding="1">
<tbody>
<tr>
<td>
<label>Nimi:</label>
</td>
<td>
<input id="nimi" name="nimi" placeholder="Kappaleen nimi" type="text">
</td>
<td>
<label>Levy:</label>
</td>
<td>
<input id="levy" name="levy" placeholder="Levyn tunnus" type="text" width="10px">
</td>
</tr>
<tr>
<td>
<label>Artisti:</label>
</td>
<td>
<input id="artisti" name="artisti" placeholder="Kappaleen esittäjä" type="text">
</td>
<td>
<label>Kieli:</label>
</td>
<td>
<input id="kieli" name="kieli" placeholder="Alkuperäiskieli" type="text" width="20">
</td>
</tr>
<tr>
<td>
<label>Numero:</label>
</td>
<td>
<input id="numero" name="numeron" placeholder="Numero" type="text">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div id="pageContent">
</div>
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
jQuery(document).ready(function ($) {
$("#pageContent").click(function () {
$('tr').removeClass('selected');
$(this).addClass('selected');
var selectedRow;
selectedRow = $(rivi);
var td = $(selectedRow).children('td');
$('#nimi').val(td[0].innerText);
$('#artisti').val(td[1].innerText);
$('#levy').val(td[2].innerText);
$('#kieli').val(td[3].innerText);
$('#numero').val(td[4].innerText);
console.log("test");
});
$(".clickable-row").on('click', () => {
$('#edit').show();
});
$('#pageContent').load('container.php');
// $('#pageContent').load('biisit.php');
});
function showBiisit() {
console.log("Näytetään sisältö");
$('#pageContent').load('container.php');
}
<?php include './config/init.php'; ?>
<?php
//luodaan tietokantaobjekti
$db = new DataBase();
// tehdään kysely
$db->query("SELECT * FROM kappaleet");
//query("SELECT `id`,`nimi`,`artisti`,`levy`,`kieli`,`numero` FROM `kappaleet`;");
//yhdistetään hakutulokseen
$kappaleet = $db->resultset();
?>
<table id="dataTable">
<tr>
<th>Nimi</th>
<th>Artisti</th>
<th width="100" align="left">Levy</th>
<th width="100" align="left">Kieli</th>
<th width="100" align="left">Numero</th>
</tr>
<?php foreach ($kappaleet as $biisi): ?>
<tr class='clickable-row' >
<td><?php echo $biisi->nimi ?></td>
<td><?php echo $biisi->artisti ?></td>
<td><?php echo $biisi->levy ?></td>
<td><?php echo $biisi->kieli ?></td>
<td><?php echo $biisi->numero ?></td>
</tr>
<?php endforeach; ?>
</table>
try this
...
$("body").on('click', '.clickable-row', function () { //i change this line
$('tr').removeClass('selected');
$(this).addClass('selected');
var selectedRow = $(this);
//selectedRow = $(rivi); idk what is this
var td = selectedRow.children('td');
$('#nimi').val(td[0].innerText);
$('#artisti').val(td[1].innerText);
$('#levy').val(td[2].innerText);
$('#kieli').val(td[3].innerText);
$('#numero').val(td[4].innerText);
console.log("test");
});
...
I have a php page to present in a table characteristics after you select a name in a dropbox. But when you make a selection all the page is reloaded and dublicate the upper div that I have.
<?php include("datalogin.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ιατρείο Πόνου</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<link href="template.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script>
function showDetails(id)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("details").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","patients.php?q="+id,true);
xmlhttp.send();
}
</script>
<?php
date_default_timezone_set("Europe/Athens");
?>
<script type="text/javascript">
function checkWindowSize() {
if ( $(window).height() > 800 ) {
document.getElementById('sidebar').class="large");
$('sidebar').addClass('large');
}
else {
$('body').removeClass('large');
}
}
$(window).resize(checkWindowSize);
</script>
<!--[if lt IE 7]>
<style type="text/css">
div, img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
</head>
<body onload="checkWindowSize();">
<div>
<div id="sidebar">
<p align="center" style="font-size:21px">Ιατρείο Πόνου<br/>Σελίδα Διαχείρισης</p>
<?php if( (session_is_registered("username")) ) {?>
<p align="center" style="font-size:19px;">Καλως ήλθες <b><span class="yellow"><?php echo $_SESSION['username'];?></span></b>. <br/> Αποσύνδεση</p>
<?php } ?>
<ul id="main-nav">
<li>Ασθενείς </li>
<li>Επιτυχόντες </li>
<li>Σχέδια </li>
<li>Ρυθμίσεις Λογαριασμού</li>
</li>
</ul>
<div id="top_menu">
<ul id="links" class="clear">
<li>Η ΣΧΟΛΗ ΜΑΣ</li>
<li>ΑΡΧΙΤΕΚΤΟΝΙΚΗ-ΤΕΙ</li>
<li>ΚΑΛΩΝ ΤΕΧΝΩΝ</li>
<li>PORTFOLIO</li>
<li>ΣΧΕΔΙΑ</li>
<li>ΣΧΟΛΕΣ ΜΕ ΣΧΕΔΙΟ</li>
<li>ΑΝΑΚΟΙΝΩΣΕΙΣ</li>
<li>ΕΠΙΤΥΧΟΝΤΕΣ</li>
<li>FAQ</li>
<li>ΕΠΙΚΟΙΝΩΝΙΑ</li>
</ul>
</div>
</div>
<div id="main-content">
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="patients.php"><img src="images/announcement.png" alt="Ανακοινώσεις" /><span>Ανακοινώσεις</span></a>
<a class="dock-item" href="success.php"><img src="images/success.png" alt="Επιτυχόντες" /><span>Επιτυχόντες</span></a>
<a class="dock-item" href="gallery.php"><img src="images/gallery.png" alt="Σχέδια" /><span>Σχέδια</span></a>
<a class="dock-item" href="settings.php"><img src="images/settings.png" alt="Ρυθμίσεις Λογαριασμού" /><span>Ρυθμίσεις Λογαριασμού</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 64,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 50,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
<h2>Ασθενείς</h2>
<div align="right"><table><tr><td align="center"><img src="images/new.png" alt="Νέα Ανακοίνωση"/></td></tr><tr><td>Νέος Ασθενής</td></tr></table></div>
<p></p>
<div align="center" id='details'>Επιλέξτε Ασθενή:
<select name="users" onchange="showDetails(this.value)">
<option value="result">Select</option>
<?php
$id=$_GET['q'];
echo $result = mysql_query("SELECT pa_id, pa_surname, pa_name FROM patient ORDER BY pa_surname");
while ($row = mysql_fetch_array($result))
{
echo "<option value='".$row["pa_id"]. "'";
if($row["pa_id"]==$id) { echo " selected";}
echo ">".$row["pa_surname"]." ".$row["pa_name"]."</option>";
}?>
</select>
</div>
<?php
$details_query= mysql_query("SELECT * FROM patient WHERE pa_id='".$id."'");
while ($details = mysql_fetch_array($details_query))
{ ?>
<p></p>
<div align="center">
<table width="100%" class="box-table-a">
<tr>
<th colspan="5"><div align="center">Στοιχεία Ασθενή</div></th>
</tr>
<tr>
<td>Όνομα :</td>
<td><?php echo $details['pa_name'];?></td>
</tr>
<tr>
<td>Επίθετο :</td>
<td><?php echo $details['pa_surname'];?></td>
</tr>
<tr>
<td>Φύλλο :</td>
<td>
<?php
$sex_query= mysql_query("SELECT * FROM sex WHERE sex_id='".$details['sex_id']."'");
$sex1 = mysql_fetch_array($sex_query);
echo $sex1['sex_name'];?></td>
</tr>
<tr>
<td>Ημερ/νία Γέννησης :</td>
<td>
<?php
$phpdate = strtotime( $details['pa_birth'] );
$mysqldate = date( 'd-m-Y', $phpdate );
echo $mysqldate;
echo " ";
$bday = new DateTime($details['pa_birth']);
// $today = new DateTime('00:00:00'); - use this for the current date
$today = new DateTime(); // for testing purposes
$diff = $today->diff($bday);
printf('( %d Ετών )', $diff->y);
?>
</td>
</tr>
<tr>
<td >Διεύθυνση κατοικίας :</td>
<td><?php echo $details['pa_address'];?></td>
</tr>
<tr>
<td>Περιοχή :</td>
<td><?php echo $details['pa_area'];?></td>
</tr>
<tr>
<td>Πόλη :</td>
<td><?php echo $details['pa_city'];?></td>
</tr>
<tr>
<td>Τ.Κ. :</td>
<td><?php echo $details['pa_tk'];?></td>
</tr>
<tr>
<td>Τηλέφωνο :</td>
<td><?php echo $details['pa_tel'];?></td>
</tr>
<tr>
<td>Κινητό :</td>
<td><?php echo $details['pa_tel2'];?></td>
</tr>
<tr>
<td>E mail :</td>
<td><?php echo $details['pa_mail'];?></td>
</tr>
<tr>
<td>Ταμείο :</td>
<td>
<?php
$asfalisi_query= mysql_query("SELECT * FROM asfalisi WHERE asfalisi_id='".$details['asfalisi_id']."'");
$asfalisi1 = mysql_fetch_array($asfalisi_query);
echo $asfalisi1['asfalisi_name'];?></td>
</tr>
<tr>
<td>Παραπέμπων Ιατρός:</td>
<td><?php echo $details['doctor_come'];?></td>
</tr>
<tr>
<td>Ιστορικό :</td>
<td><?php echo $details['pa_history'];?></td>
</tr>
<tr>
<td>Φάρμακα που έπερνε :</td>
<td><?php echo $details['pa_farmaka'];?></td>
</tr>
<tr>
<td>Σχόλια :</td>
<td><?php echo $details['pa_com'];?></td>
</tr>
<tr>
<td>Πάθηση :</td>
<td>
<?php
$pathisi1= mysql_query("SELECT path_id FROM meeting WHERE pa_id= 1 ORDER BY path_id DESC LIMIT 1");
$pathisi2 = mysql_fetch_array($pathisi1);
$pathisi_query= mysql_query("SELECT * FROM pathiseis WHERE path_id='".$pathisi2['path_id']."'");
$pathisi = mysql_fetch_array($pathisi_query);
echo $pathisi['path_name'];?></td>
</tr>
<tr>
<td>Θεραπεία :</td>
<td>
<?php
$therapy1= mysql_query("SELECT ther_id FROM meeting WHERE pa_id= 1 ORDER BY ther_id DESC LIMIT 1");
$therapy2 = mysql_fetch_array($therapy1);
$therapy_query= mysql_query("SELECT * FROM therapy WHERE ther_id='".$therapy2['ther_id']."'");
$therapy = mysql_fetch_array($therapy_query);
echo $therapy['ther_name'];?></td>
</tr>
</table>
<p></p>
<table width="100%" class="box-table-a">
<tr>
<th colspan="2"><div align="center">Εξετάσεις</div></th>
</tr>
<?php
$result1 = mysql_query("SELECT * FROM document WHERE pa_id='".$id."'");
while ($row = mysql_fetch_array($result1)) {
?>
<tr>
<td><?php echo "<li><a href='eggrafa/".$id."/".$row['document_link']."' target='blank'>".$row['document_title']."</a></li> ";?></td>
<?php } ?>
</tr>
</table>
<p></p>
<table width="100%" class="box-table-a">
<tr>
<th colspan="2"><div align="center">Επισκέψεις</div></th>
</tr>
<?php
$result2 = mysql_query("SELECT * FROM meeting WHERE pa_id='".$id."' ORDER BY meet_id ASC ");
while ($row2 = mysql_fetch_array($result2)) {
?>
<tr>
<td colspan="2"><?php echo "<li><a href='meeting.php?id=".$row2['meet_id']."' class='fancybox'>";$phpdate = strtotime( $row2['meet_date'] );
$mysqldate = date( 'd-m-Y', $phpdate );
echo $mysqldate;"</a></li> ";?></td>
<?php } ?>
</tr>
<tr>
<th colspan="2"><div align="center">Επόμενο ραντεβού</div></th>
</tr>
<?php
$result3 = mysql_query("SELECT * FROM meeting WHERE pa_id='".$id."' ORDER BY meet_id DESC LIMIT 1" );
$result4 = mysql_fetch_array($result3);{
?>
<tr>
<td width="20%">Ημερομηνία:</td>
<td><?php $phpdate2 = $result4['next_date'] ;
if(($result4['next_date'])=='0000-00-00')
{
$mysqldate3 ='Δεν έχει καθοριστεί επόμενο ραντεβού';
echo $mysqldate3;
}
else
{
$mysqldate3 = date('d-m-Y', strtotime($result4['next_date']));
echo $mysqldate3;
}
?>
</td>
</tr>
</tr>
<tr>
<td width="20%">Τοποθεσία :</td>
<td>
<?php
$company_query8= mysql_query("SELECT * FROM mplace WHERE mp_id='".$result4['mp3_id']."'");
$company8 = mysql_fetch_array($company_query8);
echo $company8['mp_name'];?></td>
</tr>
<?php } ?>
</table>
</div>
<?php } ?>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
so i want to reload after the "Επιλέξτε Ασθενή:"
help please
I am getting from the database data in a PHP table bootstrap. What I want is to do the pagination now, because the table I get is to long, and I want to have for example 6 rows/page. This is my code with DataTables Plugin but it's not working :/ Can anyone help me?
<html>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.11.1.min.js"></script >
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<div class="container">
<div class="row vertical-center-row">
<div class="col-lg-12">
<div class="row">
<div class="table-responsive">
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-xs-offset-4">
<table id="table" class="table table-striped" cellspacing="0" width="100%">
<h3>Update/Remove Access Rights</h3>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Surname</th>
<th>Nickname</th>
<th> Door Description </th>
</tr>
</thead>
<tbody>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#table').dataTable( {
"pagingType": "full_numbers"
} );
} );
</script>
<?php
$stmt="select id_access_rights,name,surname,nickname, description
from users
join access_rights on users.rfidcode=access_rights.users_rfidcode
join doors
on doors.id_doors=access_rights.doors_id_doors
order by name ";
$result=$conn->query($stmt);
if($result === FALSE) {
die(mysqli_error()); // TODO: better error handling
}
while($row =$result->fetch_assoc()){
$f1=$row['id_access_rights'];
$f2=$row['name'];
$f3=$row['surname'];
$f4=$row['nickname'];
$f5=$row['description'];
?>
<tr>
<td><?php echo $f1 ?>
<td><?php echo $f2 ?>
<td><?php echo $f3 ?>
<td><?php echo $f4 ?>
<td><?php echo $f5 ?>
<td><?php echo "<a href='updateAccessRights.php?id_access_rights=" . htmlentities($f1). "'>Update";?>
<td><?php echo "<a href='deleteAccessRights.php?id_access_rights=" . htmlentities($f1). "'>Remove";?>
</td>
<?php
}
?>
</tr>
</table>
</tbody>
</table>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can make use of Data Tables
Javascript Code
$(document).ready(function() {
$('#example').dataTable();
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
//code.jquery.com/jquery-1.11.1.min.js
//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js
//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js
HTML Code
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
CSS Code -
body { font-size: 140%; }
The following CSS library files are loaded for use in this example to provide the styling of the table:
//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css
Please refer this for further details -
https://datatables.net/examples/styling/bootstrap.html
You need to use datatables, javascript plugin.
https://www.datatables.net/
I just made a PHP script to retrieve entry from database. When I retrieve entry from a table, the page look like this. The header and form below table is repeated. I need help, thanks.
Here's the whole code I'm using:
<?php
session_start();
include('connection.php');
$username='username';
mysql_query("SELECT * FROM regmember WHERE username='$username'");
$query=("SELECT * FROM product");
$result=mysql_query($query);
while($row=mysql_fetch_array($result))
{
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Music Light</title>
<div align="center"><h1>Music Light</h1></div>
<div id="menu">
<ul>
<li><?php echo 'Welcome, '.$_SESSION['username']; ?></li>
<li>Home</li>
<li>Product</li>
<li>Profile</li>
<li>Cart</li>
<li>Testimony</li>
<li>Transaction</li>
<li>Logout</li>
</ul>
</div>
<br>
<br>
<div align="center">
<table border="0">
<tr>
<td>ID</td>
<td></td>
<td><?php echo $row[0];?></td>
</tr>
<tr>
<td>Brand</td>
<td></td>
<td><?php echo $row[1];?></td>
</tr>
<tr>
<td>Instrument Type</td>
<td></td>
<td><?php echo $row[2];?></td>
</tr>
<tr>
<td>Price</td>
<td></td>
<td><?php echo $row[3];?></td>
</tr>
<tr>
<td>Stock</td>
<td></td>
<td><?php echo $row[4];?></td>
</tr>
<tr>
<td>Image</td>
<td></td>
<td><img height="150" width="150" src="productimg/<?php echo $row[6];?>"/></td>
</table>
</div>
<div align="center">
<table>
<form name="deleteentry" action="delete.php" method="get">
<tr>
<td>Delete which entry? (enter product id)</td>
<td><input type="text" name="delete"></td>
<td><input type="button" name="deletebutton" value="Delete"></td>
</tr>
</form>
</table>
</div>
<?php
}
?>
<br>
<br>
<div align="center"><p>Description template</p></div>
<footer>
<p align="center">Copyright © 2013 Music Light</p>
</footer>
missing </head> and <body> and </body>
i would suggest that the <html> <head></head> and <body> to be used outside the loop if u donot actually want to repeat. by loop i mean the while loop
You didn't closed your header with </head>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Music Light</title>
</head> <= Include this
.
.
.
</html> <= Include this as well at the end