Make datatable fixed size and how to change the amount of entrys shown
Make datatable fixed size and how to change the amount of entrys shown
PalmoSweet
Posts: 13Questions: 0Answers: 0
Hi, I want to make my datatable a fixed size inside of my panel. Also i now show all my entrys (1090) without pages. Can i only show like 100 but still make the 1090 searchable? I dont want pages.
<?php
session_start();
if(!isset($_SESSION["fname"])) {
header("location: ../index.php");
}
require "./Includes/dbh.includes.php";
require "./Includes/functions.includes.php";
<?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">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<link rel="stylesheet" href="../CSS/userlobby.courses.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.1/b-2.3.3/sc-2.0.7/sl-1.5.0/datatables.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.1/b-2.3.3/sc-2.0.7/sl-1.5.0/datatables.min.js"></script>
<title>Userlobby</title>
<script>
//
//
//
//DU HAR GJORT FEL, DU SKALL HÄMTA FRÅN POCT TYVÄRR.....
//
//
//
//
$(document).ready( function () {
$('#all_courses').DataTable({
pageLength: 4,
scrollY: "250px",
scrollX: true,
paging: false,
columnDefs: [
{ width: 100, targets: 0 }
],
fixedColumns: true
});
$('#all_courses tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
});
$('#button').click(function () {
//Andvändbara variabler som ger info kring tabellen
var d = (table.rows('.selected').data());
var length = (table.rows('.selected').data().length);
var value = $('select', this).val();
const info = [];
var myArray = [];
table.rows('.selected').every( function ( rowIdx, tableLoop, rowLoop ) {
var data = this.data();
data[3] = $('select', this.node()).val();
myArray.push(data);
});
//console.log(myArray);
$.ajax({
url: "../PHP/Includes/addcourses.includes.php",
method: "post",
data: { myArray : JSON.stringify( myArray ) },
success: function(res) {
console.log(res);
}
})
//document.location.href = "userlobby.php";
});
} );
$(document).ready( function () {
$('#user_courses').DataTable({
select: true
});
} );
</script>
</head>
<body>
<nav>
<div class="logo-name">
<div class="logo-image">
<img src="../Resources/img/img1.png" alt="">
</div>
<span class="logo_name">Gymnasiemerit.se</span>
</div>
<div class="menu-items">
<ul class="nav-links">
<li><a href="../PHP/userlobby.php">
<i class="uil uil-estate"></i>
<span class="link-name">Översikt</span>
</a></li>
<li><a href="">
<i class="uil uil-notebooks"></i>
<span class="link-name">Kurser</span>
</a></li>
<li><a href="../PHP/userlobby.options.php">
<i class="uil uil-user"></i>
<span class="link-name">Personuppgifter</span>
</a></li>
</ul>
<ul class="logout-mode">
<li><a href="../PHP/Includes/logout.includes.php">
<i class="uil uil-signout"></i>
<span class="link-name">Logga ut</span>
</a></li>
</ul>
</div>
</nav>
<section class="dashboard">
<div class="top">
<i class="uil uil-bars sidebar-toggle"></i></i>
<?php
echo "<p>Hej " . $_SESSION["fname"] . " " . $_SESSION["lname"] . "!</p>"
?>
<img src="../Resources/img/blankprofile.png" alt="">
</div>
<div class="dash-content">
<div class="overview">
<div class="title">
<i class="uil uil-books"></i>
<span class="text">Personuppgifter</span>
</div>
<div class="boxes">
<div class="box box1">
<i class="uil uil-user"></i>
<span class="text">Alla valbara kurser</span>
<span class="number">----------</span>
<table id="all_courses" class="display" style="width: 100%">
<thead>
<tr>
<th>Namn</th>
<th>Kod</th>
<th>Poäng</th>
<th>Typ</th>
<th>Betyg</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM `course`;";
$all_courses = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($all_courses)) {
if($_SESSION["programid"] === null){
echo '<script>alert("Du behöver ange program och inriktning först!")</script>';
break;
}
echo
"<tr>
<td>" . $row['name'] . "</td>
<td>" . $row['code'] . "</td>
<td>" . $row['points'] . "</td>
<td>" . $row['points'] . "</td>
<td>
<select id='selection1'>
<option value=''></option>
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
<option value='D'>D</option>
<option value='E'>E</option>
<option value='F'>F</option>
</select>
</td>
</tr>";
}
?>
</tbody>
</table>
<button id="button" type="submit" name="submit" class="submit newcourses">Lägg till</button>
</div>
<div class="box box2">
<i class="uil uil-backpack"></i>
<span class="text">Dina inlagda kurser</span>
<span class="number">----------</span>
<table id="user_courses" 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>
</div>
</div>
</div>
</div>
</section>
<script src="../Javascript/userlobby.js"></script>
</body>
</html>
Replies
The easiest way would be to leave paging enabled, set
pageLengthto be 100, but hide all the paging controls withSomething like this: http://live.datatables.net/jayetimi/1/edit
Colin
Hi Colin!
Your code really made this work! Still need to fix the heigth of the table...
Thank you!
(just for info, your link doesn't work)
You mean the pixel height? Perhaps try enabling scrolling.
Allan
Hi Allan
Sorry I mean the width, The table is not responsive atm. How can I fix that?
Perhaps enable the Responsive extension?
Allan
Yes I have tried, but nope still stays the same
Did you add the responsive library (JS/CSS)? Use the Download Builder.
Possibly the container the table is in is wider than you expect. To help debug we will need to see the problem. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin