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.
Related
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.
Currently, I am working on my datatable to display the detail from the database. I am using the php myadmin for the database. But it only manage to display the detail only but not the pagination, sorting and searching is not working. I have followed some other tutorials but it still doesn't work.
<?php
$conn = mysqli_connect("localhost", "root", "", "jiaen");
$sql = "SELECT * FROM stock LEFT OUTER JOIN category ON stock.categoryid=category.categoryid order by stockCode";
//Execute connection
$result = mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Datatables Jquery Plugin with Php MySql and Bootstrap</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://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" />
</script>
</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="stock" class="table table-striped table-bordered" >
<thead>
<tr>
<td>Stock Code</td>
<td>Stock Name</td>
<td>Stock Category</td>
<td>Quantity</td>
<td>Price (RM)</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["stockCode"].'</td>
<td>'.$row["stockName"].'</td>
<td>'.$row["categoryName"].'</td>
<td>'.$row["quantity"].'</td>
<td>'.$row["price"].'</td>
<td>Stock In</td>
<td>R&D</td>
<td>Remark Stock</td>
<td>Modify</td>
<td>Delete</td>
</tr>
';
}
?>
</tbody>
</table>
</div>
</div>
//Javascript part for datatable
<script>
$(document).ready(function() {
$('#stock').DataTable();
} );
</script>
</body>
</html>
Your <thead> contains a <tr> which is full of <td> tags instead of <th> tags.
It has 6 tags, so your table will have 6 columns.
Your <tbody> on the other hand has 10 <td> tags inside each <tr> tag.
10 will not fit into 6.
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.
I'm trying to insert Bootstrap pagination to my dynamic table content which I extract from my database as below, but nothing works:
<?php
$sn = $_POST["SN"];
$Reference = $_POST["Reference"];
$Libelle = $_POST["Libelle"];
$NOMENCLATURE = $_POST["NOMENCLATURE"];
$matricule = $_POST["matricule"];
include "./Connections/localhost.php";
$sqlTous = "
select mat.SN, mat.NOMENCLATURE, mat.ID_materiel, mat.Reference, mat.Date_affectation, mat.libelle, mat.Date_Acquisition, mat.Fournisseur,mat.commentaire, mat.Contrat from materiel mat
left join user usr on usr.ID_User = mat.ID_User ";
?>
<div>
<form method="post" action="./consultation.php" id="formClient">
<h4 class="widgettitle" width="10%" >Résultat</h4>
<br/>
<table class="table table-striped" id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<?php
$reponse3 = mysql_query($sqlTous);
while ($rowMat1 = mysql_fetch_array($reponse3)) { ?>
<tbody class="table table-striped" id="example" class="display">
<tr>
<td><?php echo $rowMat1['SN']; ?></td>
<td><?php echo $rowMat1['NOMENCLATURE']; ?></td>
<td><?php echo $rowMat1['Reference']; ?></td>
<td><?php echo $rowMat1['libelle']; ?> </td>
<td><?php echo $rowMat1['Date_Acquisition']; ?></td>
<td><?php echo $rowMat1['Date_affectation']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</form>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
In addition, i have included the following js and css files:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Recherche matériel</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
There are some problems with your code:
tbody element shouldn't have id and class attributes and should be outside of the while loop.
You're including jquery-1.9.1.min.js twice.
<tbody>
<?php
$reponse3 = mysql_query($sqlTous);
while ($rowMat1 = mysql_fetch_array($reponse3)) { ?>
<tr>
<td><?php echo $rowMat1['SN']; ?></td>
<td><?php echo $rowMat1['NOMENCLATURE']; ?></td>
<td><?php echo $rowMat1['Reference']; ?></td>
<td><?php echo $rowMat1['libelle']; ?> </td>
<td><?php echo $rowMat1['Date_Acquisition']; ?></td>
<td><?php echo $rowMat1['Date_affectation']; ?></td>
</tr>
<?php } ?>
</tbody>