I would like to ask why is the DataTable can't read more than 1 data in my Database? I would appreciate any help since I'm relatively new with the Data Table, thank you.
As you can see it's only showing 1 to 1 of 1 entries. But as seen in the table I have 5 retrieved data.
and when I am trying to search in the search bar this shows up.
Here's the code for the table.
<table class="table table-striped table-hover table-condense" id="tbl_research">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Resarch Title</th>
<th scope="col">Research Type</th>
<th scope="col">Research Author</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<?php
include 'includes/connection_operation.php';
$sql = "SELECT * FROM tbl_repository";
$query = mysqli_query($conn,$sql);
if($query)
{
while($row = mysqli_fetch_assoc($query))
{
?>
<th><?php echo $row['ID']; ?></th>
<td><?php echo $row['research_title']; ?></td>
<td><?php echo $row['research_type']; ?></td>
<td><?php echo $row['research_author']; ?></td>
<td>
<input type="submit" name="submit" id="submit" value="View" class="btn btn-info"
data-toggle="modal" data-target="#viewResearchModal<?php echo $row["ID"];?>">
</td>
</tr>
</tbody>
<?php
include './helper/modal_viewresearch.php';
}
}
?>
</table>
Here's my code for my plugins/cdn
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CRR | View Research</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
<script>
$(document).ready(function() {
$(function () {
$('[data-toggle="popover"]').popover()
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
});
</script>
<script>
$(document).ready(function() {
$('#tbl_research').DataTable( {
} );
} );
</script>
</body>
</html>
I had to re-read my whole code for 3 times and the reason it only shows 1 is that the tbody was inside the loop, so it only sees 1. I had to move it outside the while loop so the data should be in one tbody thank you.
Related
How to make jQuery datatables collapse/expand option with mysql php
I don't want to go for ajax option because in view source fetch.php page can see data
I dont have idea to secure that. when someone that php page open can read all data. so go other method.
But somebody help me to make collapse/expand
$(document).ready(function(){
$('#employee_data').DataTable();
});
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query ="SELECT * FROM tbl_employee ORDER BY ID DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<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://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Datatables Jquery Plugin with Php MySql and Bootstrap</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>Gender</td>
<td>Designation</td>
<td>Age</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["name"].'</td>
<td>'.$row["address"].'</td>
<td>'.$row["gender"].'</td>
<td>'.$row["designation"].'</td>
<td>'.$row["age"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
I have created a dynamic list with a bootstrap filter, but there is a problem displaying all the links.
I do not know why the HTML code is displayed
Please help me please.
cordially.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js" type="text/javascript"></script>
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" />
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css" />
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css" />
<table id="table"
data-toggle="table"
data-search="true"
data-filter-control="true"
data-show-export="true"
data-click-to-select="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="article" data-filter-control="input" data-sortable="true">Article</th>
<th data-field="composant" data-filter-control="select" data-sortable="true">Composant</th>
<th data-field="fournisseur" data-filter-control="input" data-sortable="true">Fournisseur</th>
</tr>
</thead>
<tbody>
<? while($row = $req->fetch(PDO::FETCH_ASSOC)){ ?>
<tr>
<td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>
<td><?php echo $row['code_article'] ?></td>
<td><?php echo $row['comp'] ?></td>
<td><?php echo $row['fournisseur'] ?></td>
</tr>
<? } ?>
</tbody>
</table>
Add data-escape="false" to your table tag - then the "plain" HTML will be rendered
<table id="table"
...
data-escape="false"
>
see https://bootstrap-table.com/docs/api/table-options/#escape
Thank you very much
with attribute data-escape="false" it works perfectly.
I am using datatable to display data. I have large database nearly 15k rows and it takes times to load data so I am displaying only 200 rows in datatable. But search filter in the datatable are most important thing needed here. Therefore I need to search data directly from database by php through ajax call on keyup event. So how can i do that ?
This is what I have done till here.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Trail 2</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="datatable/css/jquery.dataTables.min.css" rel="stylesheet">
<!--<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet">-->
<style>
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
</head>
<body>
<br><br>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>City</th>
<th>Mobile No</th>
</tr>
</thead>
<tfoot>
<tr>
<th><input type="text" name="name" id="name" placeholder="Search by NAME"></th>
<th>Surname</th>
<th>City</th>
<th>Mobile No</th>
</tr>
</tfoot>
<tbody>
<?php
require('connectivity2.php');
$query1 = "SELECT * FROM member LIMIT 200;";
$result1 = mysqli_query($con, $query1);
while($row = mysqli_fetch_assoc($result1)){
$name = $row['m_name'];
$surname = $row['m_sec_surname'];
$city = $row['m_city'];
$no = $row['m_mobile'];
?>
<tr>
<td><?php echo $name; ?></td>
<td><?php echo $surname; ?></td>
<td><?php echo $city; ?></td>
<td><?php echo $no; ?></td>
</tr>
<?php } //End of while loop
?>
</tbody>
</table>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="datatable/js/jquery.dataTables.min.js"></script>
<!--<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
// DataTable
var table = $('#example').DataTable();
// Search
$("#name").keyup(function(){
var m_name = $("input[name='name']").val();
//window.alert(m_name);
$.ajax({
type: 'POST',
url: 'trial2php.php',
data: {member name:m_name},
cache: true,
datatype: 'html',
success: function(){
$('#example').DataTable();
}
});
});
} );
</script>
</body>
</html>
Here I have taken just one input text in footer of the table for testing search.
Something is wrong in ajax function. Please help me out here.
Select only needed columns:
SELECT ItemCode, ItemName, RackNo, ItemSrNo
Create indexes for columns:
ItemCode, ItemName, RackNo, ItemSrNo
See:
https://dev.mysql.com/doc/refman/5.7/en/create-index.html
You should use Server Side processing with Pipeline feature of DataTables. This way fetching, rendering and filtering data in DataTables will be smooth.
Follow the link below to know more about the process with example -
DataTables Server Side Processing with Pipeline
I recently got this to work on another application I am working on and thought I'd apply it to an existing project, but it's not working for the second thing. I feel like I'm missing some js file or something but I've tried everything I can find. I tried to get it to work on a simple page test and it seems to show the CSS, but not the search or filtering.
Here is my page:
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js"></script>
<script type="text/javascript" language="javascript" src='https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
<script>
$(document).ready(function(){
$('#myTable').DataTable( {
} );
});
</script>
<table id="myTable" class="display table" width="80%">
<tr>
<th>stuff</th><th>things</th><th>hi</th>
</tr>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
</table>
Any ideas?
Datatables website states in the usage page you need thead and tbody tags for it to initialize
<table id="myTable" class="display table" width="80%">
<thead> <tr>
<th>stuff</th><th>things</th><th>hi</th>
</tr>
</thead>
<tbody>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
<tr>
<td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
</tr>
</tbody>
</table>
I've found this awesome plugin that sorts and filters and shows pagination etc. and I've tried it on a test empty page and it works. But when I put the same code on my project it doesn't. What is going on? The only difference I can see is that my app has PHP/Mysql data, but this plugin is supposed to work fine with both. :/
Links
<!-- BOOTSTRAP-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- DATATABLES-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/af-2.1.3/b-1.2.4/b-colvis-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.2.0/r-2.1.1/rr-1.2.0/sc-1.4.2/se-1.2.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/af-2.1.3/b-1.2.4/b-colvis-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.2.0/r-2.1.1/rr-1.2.0/sc-1.4.2/se-1.2.0/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
Table
<div class="row">
<?php
$prepIexec = $conn->prepare('SELECT id, nom, zona, tlf, email, gats, coordinador FROM TaulaCasesAcollida ORDER BY nom ASC');
$prepIexec->execute();
if($prepIexec->rowCount() > 0){ ?>
<div class="table-responsive">
<table id="taula_acollida" class='table taulaAco display' cellspacing="0" width="100%">
<thead>
<tr>
<th class="taulaAco_fila1 uppercase">Nom</th>
<th class="taulaAco_fila1 uppercase">Zona</th>
<th class="taulaAco_fila1 uppercase">Telèfon</th>
<th class="taulaAco_fila1 uppercase">Email</th>
<th class="taulaAco_fila1 uppercase">Gats</th>
<th class="taulaAco_fila1 uppercase">Coordinador</th>
</tr>
</thead>
<?php
while($row = $prepIexec->fetch(PDO::FETCH_ASSOC)){
extract($row);
?>
<tbody>
<tr>
<td class="taulaAco_fila2 capitalize"><?php echo $nom; ?></td>
<td class="taulaAco_fila2"><?php echo $zona; ?></td>
<td class="taulaAco_fila2"><?php echo $tlf; ?></td>
<td class="taulaAco_fila2"><?php echo $email; ?></td>
<td class="taulaAco_fila2 capitalize"><?php echo $gats; ?></td>
<td class="taulaAco_fila2 capitalize"><?php echo $coordinador; ?></td>
<td class="taulaAco_fila2 E">
<a title="editar" href="editar_casaAcollida.php?edit_id=<?php echo $row['id']; ?>" title="editar"><i class="material-icons iconoEditar">mode_edit</i></a>
<a class="X" title="eliminar" href="?eliminar_id=<?php echo $row['id']; ?>" onclick="return confirm('Estàs segur que vols el·liminar aquesta casa d'acollida?')"><i class="material-icons iconoEliminar">cancel</i></a>
</td>
</tr>
<?php
}
}
else{
?>
<div class="col-xs-12">
<div class="alert alert-warning">No hi ha cases d'acollida.</div>
</div>
<?php
}
?>
</tbody>
</table>
</div>
</div>
Script
<script>
$(document).ready(function() {
$('#taula_acollida').dataTable();
});
</script>
Put <tbody> outside the while loop
You have 6 columns in <thead> and 7 columns in <tbody>. This causes mData error.