DT not responsive
DT not responsive
Purplexmas
Posts: 3Questions: 1Answers: 0
Hello,
I am a new web developer and Im having issues implementing the DataTables plugin on my project.
I cannot achieve a responsive table in Chrome.
here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Users Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Include Datatable -->
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
<!-- DataTables responsive JS-->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.js"></script>
<!-- DataTables css -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<!-- DataTables responsive CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css">
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#table_id').DataTable({
responsive: true
} );
} );
</script>
</head>
And here's the body:
<body unresolved fullbleed>
<!-- Main structure -->
<?php
` //the title that will appear in the Windows window bar
$pagetitle = 'MCQ: Members';
include('Header.html');
//the menu button that will be highlighted, showing where the user is
$thispage = 'members';
//the standard bar of menu buttons
include('Menu.php');
echo '<h1>Administration</h1>';
echo '<p><strong>This page should only be accessible to administrators.
If you are not an administrator, please navigate away now.
</strong></p>';
//open the connection to the database
$host="localhost";
$user="root";
$password="";
$dbname="project";
$dbc = mysqli_connect($host,$user,$password,$dbname)OR die('Cannot connect');
//query the database to get the records for all
$query = 'SELECT id, firstname,surname, email, gender, yearofstudy, roles
FROM users';
$result = @mysqli_query($dbc, $query);
$number = mysqli_num_rows($result);
//if we got a non-null result, display the table
if ($result) {
echo '<div><table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th align="left"><strong><h4>UserId</strong></h4></th>
<th align="left"><strong><h4>Full name</strong></h4></th>
<th align="left"><strong><h4>Email</strong></h4></th>
<th align="left"><strong><h4><h4>Gender</strong></h4></th>
<th align="left"><strong><h4><h4>Year of Study</strong></h4></th>
<th align="left"><strong><h4>Roles</strong></h4></th>
<th align="left"><strong><h4>Confirm</strong></h4></th>
</tr>
</thead>';
$confirm = '<a href="confirmusers.php"><button>Confirm Users</button></a>';
while ($row = mysqli_fetch_array($result))
{
echo "<tbody>";
echo "<tr>";
echo "<td >" . $row['id'] . "</td>";
echo "<td >" . $row['firstname'] . ' '. $row['surname'] . "</td>";
echo "<td >" . $row['email'] . "</td>";
echo "<td >" . $row['gender'] . "</td>";
echo "<td >" . $row['yearofstudy'] . "</td>";
echo "<td >" . $row['roles'] . "</td>";
echo "<td ><a href=\"confirmusers.php?id=".$row['id']."\"><button type='submit' class='btn btn-primary btn-large' value='submit' name='submit'>Confirm Users</button></a></td>";
echo "</tr>";
echo "</tbody>";
}
echo '</table></p>';
echo '</div>';
//free up the resource used for the query
mysqli_free_result($result);
}
else
{
//something went wrong
echo '<p class="error">ERROR!</p>';
echo '<p>' . mysqli_error($dbc) . '</p>';
echo '<p>' . 'The query was: ' . $query . '</p>';
}
//close the database
mysqli_close($dbc);
?>
</body>
</html>
Any help would be great!! Thanks!!
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Here's the debug http://debug.datatables.net/unejeg
You are using an old version of DataTables and Responsive. Could you try updating please. If that doesn't work, please link to a page showing the issue so I can debug it.
Thanks,
Allan
Thanks Allan but Ive updated the versions im using but it still wont respond. I can get it to work if i use a static table but it wont interact with the table I have created using PHP and loading the data from MySQL. I am only using a localhost at the moment so I cant give a link to the page sorry. Can you see if there is anything I might be missing? What I do notice when I run the debug is that it only picks up on the first row in my table but there are quite a few row in my database and they are being displayed on the page?
Can you "view source" and save the HTML for the page into pastebin or similar. Also can you show me the Javascript you are using. Unfortunately there isn't much for me to go on at the moment and as you can see from the examples on my site, Responsive should work.
Allan