Bootstrap Table show entries Don't show exact number of Cells - javascript

with my small knowledge coding PHP I struggled about 4 days to make DataTable show exact entries what customer chose. Below is my code for getting data from Mysql DataBase
<?php
include("check.php");
include("config.php");
// Create connection
//$conn = new mysqli($servername, $username, $password, $dbname);
$sql = 'SELECT * from transaction';
if (mysqli_query($db, $sql)) {
echo "";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($db);
}
$count=0;
$result = mysqli_query($db, $sql);
?>
And here is my html for displaying Table which one must have pagination and customer could choose how much cells he want to see (ex: 10, 25, 50, 100)
<!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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>მთავარი გვერდი</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap core CSS-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- Custom fonts for this template-->
<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet"><!-- Page level plugin CSS-->
<link href="css/sb-admin.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<?php include("template/navigbar.php"); ?>
<!-- Breadcrumbs-->
<?php include("template/breadc.php"); ?>
<!-- Icon Cards-->
<!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table"></i> Data Table Example</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="myTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>თქვენი ID</th>
<th>თარიღი</th>
<th>ობიექტი</th>
<th>ტერმინალი</th>
<th>თანხა</th>
<th>ჯამი</th>
</tr>
</thead>
<?php
while ($row = mysqli_fetch_assoc($result))
{
$count =$count + $row['amount'];
echo '
<tbody>
<tr>
<td>'.$row["trID"].'</td>
<td>'.$row['userID'].'</td>
<td>'.$row['trDate'].'</td>
<td>'.$row['obName'].'</td>
<td>'.$row['terName'].'</td>
<td>'.$row['amount'].'</td>
<td>'.$count.'</td>
</tr>
</tbody>
';
}
?>
</table>
</div>
</body>
</html>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
});
</script>
But the result is always full Table with Showing 1 to 1 of 1 entries but in the table it shows me more then 25 cell.See Screenshot attached
Please let me know what I m doing wrong?


I posted this as an answer because it solves the issue.
<tbody> must be outside of loop


Put your tbody tags outside of while statement.


I Hope this code will help you
'aLengthMenu': [[50, 100, 150, -1], [50, 100, 150, "All"]],
'iDisplayLength': '50'


You have to add the tbody BEFORE start the loop.
In your code, you are creating a new tbody for each row instead just a row.
Dont forget to close the tbody after the php close tag
tbody must be out site of the loop

Related

Can't overwrite bootstraps column width limit

I am trying to make a table that will display information on a page. I DO NOT want the text to wrap. I've done so much searching and I can't seem to fix it! I'm using bootstrap and I have no idea how to override whatever type of limit is happening here. Please help!
Image of webpage
HTML/PHP for webpage
<?php
function createTable(){
$maxDays=date('t'); //gets the number of days in a month
$currentDayOfMonth=date('j'); //gets the current day
$rows = 14; // define number of rows
$cols = $maxDays;// define number of columns
// loops through and creates the table
for($tr=1;$tr<=$rows;$tr++){
echo "<tr>";
for($td=1;$td<=$cols;$td++){
echo "<td class='tableCells'>654 kwh</td>";
}
echo "</tr>";
}
}
function writeDays(){
$lastDayUTS = mktime (0, 0, 0, date("m"), date('t'), date("Y"));
$lastDay = date("d", $lastDayUTS);
$monthName = date("M", $lastDayUTS);
//writes the days above the table
for($n=1;$n <= $lastDay;$n++){
echo "<th>$monthName $n</th>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-9">
<table class='table table-hover'>
<thead>
<!-- writes the days above the table -->
<?php writeDays(); ?>
</thead>
<tbody>
<?php
// loops through and puts values into the table
createTable();
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
The end goal is to have this embedded in a page and overflow the x axis so you can scroll horizontally. I want the text to all be on one line (not wrapped). Any help is greatly appreciated!!!

PHP redirect buttons in DataTables are not working

I'm generating a table using PHP that will retrieve records from a MySQL database. I'm new to DataTables, and my problem is that the "View Products" button that generates along with the table doesn't work. Clicking the button should redirect to a new page with an entirely different table.
here's a screenshot of what it looks like, just in case I'm not making any sense
Here's the entire code for the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\reset.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\stylesheet.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\og_stylesheet.css">
<style type="text/css">
thead {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<!-- HEADER -->
<?php include "includes/header.php" ?>
<?php session_start();
?>
<!-- END HEADER -->
<table class="table table-striped" id="table_id">
<thead>
<tr>
<th>Supplier ID</th>
<th>Name</th>
<th>Address</th>
<th>Contact Number</th>
<th>Supplier Details</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect("localhost", "root", "", "web_db");
$query = "SELECT * FROM Suppliers";
$search = mysqli_query($conn, $query);
if(mysqli_num_rows($search) > 0 ){
while($row = mysqli_fetch_array($search)){
?>
<form action="supplierdetails.php" method="POST">
<tr>
<td>
<?= $row['supplier_id']?>
</td>
<input type="hidden" value=< ?=$row[ 'supplier_id']?> name = "sup_id">
<input type="hidden" value=< ?=$row[ 'name']?> name = "name">
<td>
<?= $row['name']?>
</td>
<td>
<?= $row['address']?>
</td>
<td>
<?= $row['contactnumber']?>
</td>
<td><input type="submit" name="sub" value="View Products" class="btn btn-info" onclick="sample()"></td>
</tr>
</form>
<?php
}
}
?>
</tbody>
</table>
<script>
$(document).ready(function() {
$(".alert").delay(3000).fadeOut();
});
</script>
<script>
function sample() {
window.alert(document.getElementById("name").getAttribute("value"));
}
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$('#table_id').DataTable();
});
</script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#table_id').DataTable();
/* Add event listeners to the two range filtering inputs */
$('#min, #max').keyup(function() {
table.draw();
});
});
</script>
</body>
</html>
The buttons work perfectly before I added DataTables, by the way. I also found out that a table with hard-coded data (as in without PHP) also have buttons that work fine. I'm pretty much at my wits end here. Any help will be appreciated.

Remove the onclick="sample()"
Add this in a document.ready
$(".btn-info").on("click", function() {
window.alert(document.getElementById("name").getAttribute("value"));
});
Maybe use a window.alert('test');
since I dont see the element with the id name anywhere

Pagination problem makes data table not work

Please help,
I have problem with a data table. The data table does not work when I use this but it's working when it's outside of this. Please help:
<div id="content">
<?php
$pages_dir = 'pages/admin';
if(!empty($_GET['p'])){
$pages = scandir($pages_dir, 0);
unset($pages[0], $pages[1]);
$p = $_GET['p'];
if(in_array($p.'.php', $pages)){
include($pages_dir.'/'.$p.'.php');
}
else {
echo 'Page Not Found :(';
}
}
else {include($pages_dir.'/profile.php');}
?>
</div>
Then the other full script page, in this page data table is not working, but when I try this outside code before, it works.
<?php
$connect = mysqli_connect("localhost", "root", "", "keep");
$query ="SELECT * FROM barang ORDER BY ID DESC";
$result = mysqli_query($connect, $query);
?>
<!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" />
</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>ID</td>
<td>Nama</td>
<td>Kategori</td>
<td>Harga</td>
<td>Jumlah</td>
<td>Supplier</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["nama"].'</td>
<td>'.$row["kategori"].'</td>
<td>'.$row["harga"].'</td>
<td>'.$row["jumlah"].'</td>
<td>'.$row["supplier"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#employee_data').DataTable();
});
</script>
Please help, I'm new to PHP programming. Sorry for the bad English.

Ajax from php DataTables warning:table id=example - Invalid JSON response

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="GBK">
<title></title>
</head>
<body>
{"sEcho":1,"iTotalRecords":1,"iTotalDisplayRecords":1,"aaData":[["086671","NB","MSC-1","09-APR-15"],["086673","DB","MSC-2","09-APR-15"],["086678","DA","MSC-1","10-APR-15"],["086682","DA","MSC-1","10-APR-15"],["086683","NA","MSC-1","10-APR-15"],["086491","NA","MSC-2","25-MAR-15"],["086686","DA","MSC-1","10-APR-15"],["086688","DA","MSC-2","10-APR-15"],["086690","NA","MSC-2","10-APR-15"],["086496","DA","MSC-1","25-MAR-15"],["086685","NB","MSC-1","09-APR-15"],["086848","NA","MSC-2","22-APR-15"],["086516","NA","MSC-1","22-APR-15"],["086523","DA","MSC-1","22-APR-15"],["086839","DA","MSC-2","22-APR-15"],["086849","DA","MSC-1","22-APR-15"],["086528","NB","MSC-1","24-APR-15"],["086526","NB","MSC-1","27-MAR-15"],["086478","DA","MSC-1","25-MAR-15"],["086482","DB","MSC-1","27-MAR-15"],["086832","NB","MSC-1","24-APR-15"],["086840","DB","MSC-2","24-APR-15"],["086842","NB","MSC-2","24-APR-15"],["086828","DB","MSC-1","24-APR-15"],["086987","NB","MSC-1","07-MAY-15"],["086991","DB","MSC-2","07-MAY-15"]]} </body>
</html>
I am a new-comer to php and jQuery, now I have one question; when I use a datatable to query data, error as title, and detail code as follows:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>作业</title>
<link href="http://CEA815099W/test/cim_web/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://Cea815099w/test/cim_web/css/dataTables.bootstrap.css" />
<script src="http://CEA815099W/test/cim_web/js/jquery-1.11.3.min.js"></script>
<script src="http://CEA815099W/test/cim_web/js/jquery.dataTables.min.js"></script>
<script src="http://CEA815099W/test/cim_web/js/dataTables.bootstrap.js"></script>
<script src="http://CEA815099W/test/cim_web/js/echarts.js"></script>
<script src="http://CEA815099W/test/cim_web/js/bootstrap.min.js">
</head>
<body>
<!-- table-->
<div class="container">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>工号</th>
<th>班别</th>
<th>站点</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<!-- js处理数据库内容-->
</tbody>
<tfoot>
<tr>
<th>工号</th>
<th>班别</th>
<th>站点</th>
<th>时间</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Javascript:
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "data.php"
} );
} );
</script>
<script type="text/javascript">
// For demo to fit into DataTables site builder...
$('#example')
.removeClass( 'display' );
.addClass('table table-striped table-bordered');
</script>
PHP:
<?php
$db = new PDO("oci:dbname=mfdm10", "f10mfg",'demon');
$db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_WARNING); // 设置为警告模式
$rs = $db->prepare("select a.empid,a.shift,a.station,a.infab_time from ut_msc_newcoming a where rownum <= :num"); // SQL 需要修改
$rs->bindValue(':num', 26);
$rs->execute();
while($row=$rs->fetch()){
$data[]= array(
$row[0],
$row[1],
$row[2],
$row[3]
);
}
/* $output = array(
"sEcho" => 1,
"iTotalRecords" => count($row),
"iTotalDisplayRecords" => count($row),
"aaData" => $data
); */
$response = array();
$response['success'] = true;
$response['aaData'] = $data;
echo json_encode( $response );
//异常
function fatal($msg)
{
echo json_encode(array(
"error" => $msg
));
exit(0);
}
?>
Add my json returning from network of the console
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="GBK">
<title></title>
</head>
<body>
{"success":true,"aaData":[["086671","NB","MSC-1","09-APR-15"],["086673","DB","MSC-2","09-APR-15"],["086678","DA","MSC-1","10-APR-15"],["086682","DA","MSC-1","10-APR-15"],["086683","NA","MSC-1","10-APR-15"],["086491","NA","MSC-2","25-MAR-15"],["086686","DA","MSC-1","10-APR-15"],["086688","DA","MSC-2","10-APR-15"],["086690","NA","MSC-2","10-APR-15"],["086496","DA","MSC-1","25-MAR-15"],["086685","NB","MSC-1","09-APR-15"],["086848","NA","MSC-2","22-APR-15"],["086516","NA","MSC-1","22-APR-15"],["086523","DA","MSC-1","22-APR-15"],["086839","DA","MSC-2","22-APR-15"],["086849","DA","MSC-1","22-APR-15"],["086528","NB","MSC-1","24-APR-15"],["086526","NB","MSC-1","27-MAR-15"],["086478","DA","MSC-1","25-MAR-15"],["086482","DB","MSC-1","27-MAR-15"],["086832","NB","MSC-1","24-APR-15"],["086840","DB","MSC-2","24-APR-15"],["086842","NB","MSC-2","24-APR-15"],["086828","DB","MSC-1","24-APR-15"],["086987","NB","MSC-1","07-MAY-15"],["086991","DB","MSC-2","07-MAY-15"]]} </body>
</html>
My original json returning, any error?

On this page in the documentation it states the following:
Reply from the server
In reply to each request for information that DataTables makes to the server, it expects to get a well formed JSON object with the following parameters....
It does not appear that your are setting these variables and this may the reason for the error message "warning:table id=example - Invalid JSON response" as your JSON, while valid JSON, is not a valid "JSON response" related to what datatables expects.

How can i call SQL query and load it to DATATABLE plugin using CodeIgniter and jquery?

I hope you can help me. My problem is I want to load a huge amount of data total of 50000 rows in my datatable plugin but I dont know how to incorporate it with CodeIgniter framework.
Here's my sample data.
In my controller i create a function like this, for testing purposes I didn't put it in my model.
public function displayListItem(){
$sqlSelectAll = "select * from items";
$resultSelectAll = $this->db->query($sqlSelectAll);
echo json_encode($resultSelectAll->row_array());
}
Next is my view to call the SQL:
<!-- jquery part -->
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "<?php echo site_url("item_controller/displayListItem"); ?>"
} );
} );
Below is my table that will populate my data from mysql database
<table id="example">
<thead>
<tr>
<th></th>
<th>CODE</th>
<th>NAME</th>
<th>DESCRIPTION</th>
<th>BRAND</th>
<th>UNIT</th>
<th>CATEGORY NAME</th>
<th>ENTRY DATE</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<!-- THIS IS THE PART WHERE I NEED TO PUT THE DATA, BUT I DON'T KNOW HOW -->
</tbody>
</table>
That's all guys I hope you can help me. Thanks

Firstly keep the media folder in the codeigniter project folder. media folder is one which is required by datatables which contains the js,images and css files. set your base_url in codeigniter config.php. setup your database in codeigniter database.php. setup your url helper $autoload['helper'] = array('url'); in autoload.php.
This is my controller.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller
{
public function index()
{
$this->load->model('cmodel');
$data['d']=$this->cmodel->get_result();
$this->load->view('welcome_message.php',$data);//$data is an array which is sent to view
}
}
The $data['d'] contains the array returned from the model which is sent to view
This is my model.
<?php
class Cmodel extends CI_Model
{
function __construct()
{
parent::__construct();
}
function get_result()
{
$query=$this->db->query("your custom query;");
return $query->result_array();//return the result_array to the controller.
}
}
?>
This is the view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CodeIgniter</title>
<style>
*{
font-family: arial;
}
</style>
<style type="text/css">
#import "<?php echo base_url();?>media/css/demo_table_jui.css";
#import "<?php echo base_url();?>media/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>
<script src="<?php echo base_url();?>media/js/jquery.js" type="text/javascript"></script>
<script src="<?php echo base_url();?>media/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#datatables.dataTables_filter input').focus()
$('#datatables').dataTable({
"sPaginationType":"full_numbers",
"aaSorting":[[2, "desc"]],
"bJQueryUI":true
});
})
</script>
</head>
<body>
<div>
<table id="datatables" class="display">
<thead>
<tr>
<th>id</th> <!-- These are the table heading-->
<th>name</th>
<th>order</th>
</tr>
</thead>
<?php foreach($d as $row):?><!--This is how you access the fields -->
<tr>
<td>
<?php echo $row['id'];?>
</td>
<td>
<?php echo $row['name'];?> <!-- here id,name,order are my column names-->
</td>
<td>
<?php echo $row['order'];?>
</td>
</tr>
<?php endforeach?>
</table>
</div>
</body>
</html>
This will work perfectly. please vote

Categories

Resources