I have been attempting to use Jquery's datatables for the first time and the tutorials available have left me rather confused. I've done the following script trying to incorporate jquery in with my php table display that I knew was working fine. I may have something fundamentally wrong here and now I'm very stuck. Would anyone be able to clear this up? (Just trying to display a basic mysql database with jquery datatables.) Thanks very much in advance.
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT Sid, Fname, Lname, Email, Dtype, Mac, Date FROM StudentDeviceReg";
$result = $conn->query($sql);
<script src="media/js/jquery.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
<style type="text/css">
#import "media/css/demo_table.css";
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#datatables').dataTable();
})
</script>
if ($result->num_rows > 0) {
echo "<table id="datatables" class="display">
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Device</th>
<th>Mac Address</th>
<th>Date</th>
</tr>";
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr>
<td>".$row["Sid"]."</td>
<td>".$row["Fname"]."</td>
<td>".$row["Lname"]."</td>
<td>".$row["Email"]."</td>
<td>".$row["Dtype"]."</td>
<td>".$row["Mac"]."</td>
<td>".$row["Date"]."</td>
</tr>";
}
echo "</table>";
} else {
echo "0 results";
}
$conn->close();
?>
The following section need to be either echoed or declared outside php brackets
?>
<script src="media/js/jquery.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
<style type="text/css">
#import "media/css/demo_table.css";
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#datatables').dataTable();
})
</script>
<?php
ALSO the section below require escape sequence or a single quote:
echo "<table id=\"datatables\" class=\"display\">
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Device</th>
<th>Mac Address</th>
<th>Date</th>
</tr>";
what do you mean error on this line?
echo "<table id="datatables" class="display">
You should note the double quotes in the attribute table, it signifies the closing echo. you can use a single quote.
echo "<table id='datatables' class='display'>
or use the backslash.
echo "<table id="\datatables\" class="\display\">
Related
I have a table of thousands of lines of code in which I have to load some data coming from a database in some of the "td" of the table ...
Wandering through SO I found several examples of uploads but all of them needed a rewrite of the whole table ...
So I ask you, is there a simpler way to pass the values of a database within the table?
In simple words with a SELECT I have to be able to load data inside "td" that contain textBox.
Without the need to rewrite the table (given that there are thousands of lines) ...
I am attaching the examples I found on SO:
1° : Load data from MySQL database to HTML textboxes on button click
To load data from MySQL/MariaDB database to table you can use this code:
<!DOCTYPE html>
<?php
//This is the connection
$mysqli = new mysqli('localhost', 'root', 'DatabasePassword', 'Database Name'); ?>
<html>
<head>
<title></title>
</head>
<body>
<div class="content">
<table class='table table-bordered table-striped'>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<?php while ($row = $mysqli->fetch_array(MYSQLI_ASSOC)): ?>
<?php foreach ($row as $key => $value): ?>
<td alt="<?=$key?>"><?=$value?></td>
<?php endforeach; ?>
<?php endwhile; ?>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You want to fill a <table> with database datas?
1) Build your sql query.
2) Execute and retrieve datas.
3) Inject datas into <table> using a foreach.
<?php
//Connection to db
$db = new mysqli('127.0.0.1', 'login', 'pass', 'database');
//Query
$sql = "SELECT name, surname FROM example";
//Execution + error checking
if(!$result = $db->query($sql)){
die('There was an error running the query [' . $db->error . ']');
}
?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
<?php
while($row = $result->fetch_assoc()){
//Displaying results in table rows
echo "<tr>
<td>".$row["name"]."</td>
<td>".$row["surname"]."</td>
</tr>";
}
?>
</tbody>
</table>
Hi I am new to javascript/JS or jquery . All i know is to code in php but i want to learn JS too.
My code didnt diplay the get data from json_encode to HTML TABLE.
please help me to do this. I search all way how to that. but they always use like var but when i try to do the same i didnt display anything so i start again from basics.
what i want is to display the data get from process.php json_encode into my html table TBODY part only not the whole table.
please correct me if there are something missing.(i.e jquery plugin? where to download please)
below are my code.
For Index.html
<html>
<head>
<title>LEARN AJAX</title>
<style type="text/css">
#mytable,td{
border:0px solid blue;
}
</style>
</head>
<body>
<table>
<thead>
<th>ID No.</th>
<th>Full Name</th>
<th>Address</th>
</thead>
<tbody>
<!--*/data should go Here-- >
<!--Data from process.php-->
</tbody>
</table>
</body>
</html
For Process.php
<?php
include ('connection.php');
if (mysqli_connect_errno()) {
die('Could not connect: ' . mysql_error());
}
$return_arr = array();
$sql="SELECT * FROM members";
if ($result = mysqli_query( $conn, $sql )){
while ($row = mysqli_fetch_array($result))
{
$row_array['id'] = $row['id'];
$row_array['name'] = $row['fname'];
$row_array['address'] = $row['ad'];
array_push($return_arr,$row_array);
}
}
//echo json_encode($return_arr);
$result = json_encode($return_arr);
?>
For my DB connection:
<?php
//for MySQLi OOP
$conn = new mysqli('localhost', 'root', '', 'mydatabase');
if($conn->connect_error){
die("Connection failed: " . $conn->connect_error);
}
?>
In your tbody just loop through the result you get from php:
<tbody>
<?php
foreach ($result as $value) {
echo "<tr><td>"+$value['id']+"</td><td>"+$value['fname']+"</td><td>"+$value['ad']+"</td></tr>";
}
?>
</tbody>
i want to use the tableedit JQuery Plugin. This is a code example. The edit of the table is working. But the delete doesnt work. I get the error:
Tabledit Ajax fail => parsererror : SyntaxError: Unexpected token < in JSON
I dont understand why. I have read some Posts here, but I have the Problem yet.
Here is my code:
<?php
$connect = mysqli_connect("localhost", "root", "root", "testing");
$query = "SELECT * FROM tbl_user ORDER BY id DESC";
$result = mysqli_query($connect, $query);
?>
<html>
<head>
<title>Live Table Data Edit Delete using Tabledit Plugin in PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="jquery.tabledit.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<h3 align="center">Live Table Data Edit Delete using Tabledit Plugin in PHP</h3><br />
<table id="editable_table" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["firstname"].'</td>
<td>'.$row["lastname"].'</td>
</tr>
';
}
?>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#editable_table').Tabledit({
url:'action.php',
columns:{
identifier:[0, "id"],
editable:[[1, 'firstname'], [2, 'lastname']]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#'+data.id).remove();
}
}
});
});
</script>
<?php
//action.php
$connect = mysqli_connect('localhost', 'root', 'root', 'testing');
$input = filter_input_array(INPUT_POST);
$firstname = mysqli_real_escape_string($connect, $input["firstname"]);
$lastname = mysqli_real_escape_string($connect, $input["lastname"]);
if($input["action"] === 'edit'){
$query = "
UPDATE tbl_user
SET firstname = '".$firstname."',
lastname = '".$lastname."'
WHERE id = '".$input["id"]."'
";
mysqli_query($connect, $query);
}
if($input["action"] === 'delete'){
$query = "
DELETE FROM tbl_user
WHERE id = '".$input["id"]."'
";
mysqli_query($connect, $query);
}
header('Content-type: application/json');
print_r(json_encode($input));
?>
in the code i used csv file in which i want to edit the rows of 3rd coulmn as want to make them a http link by using tag but i cant do that. right now the code chowing only the link but i want to make them hyperlink
<html>
<head>
</head><body>
<table width="10%" cellpadding="1" cellspacing="0" border="1" ;">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<?php
$f = fopen("http://localhost/csv/cr.csv", "r");
while (($line = fgetcsv($f)) !== false) {
echo "<tr>";
$data = count($line);
foreach ($line as $cell) {
echo "<td>" . htmlspecialchars($cell) . "</td>";
}
echo "</tr>\n";
}
fclose($f);
?>
</tr>
</thead>
</table>
</body>
</head>
try:
<?php
$f = fopen("http://localhost/csv/cr.csv", "r");
while (($line = fgetcsv($f)) !== false) {
if (!isset($line[2])) {
continue;
}
echo "<tr><td><a href='url'>" . htmlspecialchars($line[2]) . "</a></td></tr>";
}
fclose($f);
?>
In my admin panel I've a user page where all users are showing using Bootstrap Table with sorting option, pagination option.
Now I want to show more information about a user below each row when I click on a whole row then a div box will appear with more information.
How can i show this hidden div box below the each row ?
Javascript I'm using in html head section:
<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#example').dataTable();
$('#example tbody').on('click', 'tr', function () {
var name = $('td', this).eq(0).text();
} );
} );
</script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Php & Html code I'm using in the html body section
<?php
$getUser = mysql_query("select * from members ORDER BY user_id DESC");
$num = mysql_num_rows($getUser);
?>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
<th>Position</th>
<th>Status</th>
<th>Kit type</th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
while($search_result = mysql_fetch_array($getUser)){
$i++;
$uid = (int) $search_result['user_id'];
$email = $search_result['email'];
$fname = $search_result['fname'];
$lname = $search_result['lname'];
$company = $search_result['company'];
$position = $search_result['position'];
$status = $search_result['status'];
echo "<tr>";
echo "<td class='row' $class valign='top'>$fname</td>";
echo "<td class='row' $class valign='top'>$lname</td>";
echo "<td class='row' $class valign='top'>$company</td>";
echo "<td class='row' $class valign='top'>$position</td>";
echo "<td class='row' $class valign='top'>$status</td>";
echo "<td class='row' $class valign='top'>$kittype</td>";
echo "</tr>";
}
?>
</tbody>
</table>