Help needed!
I have done coding using php mvc technique, using wamp server and tried using datatables(only for search functionality).
I have a table display in my Admin index page which fetches data from mysql database. I also have checkbox included at each row so that it can be selected and deleted.
...
<form action="<?php echo URLROOT; ?>/posts" method="post">
<button type="submit" value="Delete" name="delete_multiple_data">Delete Multiple Items</button>
<table id="mtab" class="display table table-striped table-bordered dt-responsive nowrap" style="width:100%">
<thead class="thead-dark">
<tr class="danger">
<tr class="danger">
<th scope="col">ID</th>
<th scope="col">Pack Name</th>
<th scope="col">Select</th>
</tr>
</thead>
<tbody>
<?php foreach($data['posts'] as $post) : ?>
<tr>
<td><?php echo $post->id; ?></td>
<td><?php echo $post->pckname; ?></td>
<td><input type="checkbox" name="delete[]" value="<?php echo $post->id; ?>"></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</form>
...
my controller,
...
if(isset($_POST['delete_multiple_data'])){
if(isset($_POST['delete'])){
foreach($_POST['delete'] as $deleteid){
$deletepack = $this->postModel->deletePost($deleteid);
}
}
}
$this->view('posts/index', $data);
...
without table id="mtab"(removing table id="mtab") everything is working fine.
but for search to be enabled in my table id="mtab" i used the below script,
...
<script type="text/javascript">
$(document).ready(function(){
$("#mtab").DataTable({
});
});
</script>
...
if i use this script, it hides my checkboxes totally from display, please help
I have identified the error it was <table class="display table table-striped table-bordered dt-responsive nowrap" style="width:100%">
after I removed nowrap it was working fine, both my checkbox as well as search feature was visible.
Thanks all.....
Related
I have a datatable in HTML which i am populating with dynamic data from PHP. each row is expandable but what I want is to have child rows for each parent row. So, for example there is a device type with the number 4 which contains 20 different devices, so I want to display in the parent row Device number 4 and when I expand that row display the 20 devices (with headers such as IMEI, Serial no., etc.)
Here is the table I have right now:
See screenshot of my table
EDIT: Added current table (no child rows)
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<th>Device</th>
<th>Dev.no</th>
<th>Barcode</th>
<th>IMEI</th>
<th>Serial no.</th>
<th>Date added on stock</th>
</thead>
<tbody>
<?php if (!empty($devices)) { ?>
<?php foreach ($devices as $device) : ?>
<tr>
<td>
<?php echo $device["name"] ?>
</td>
<td>
<?php echo $device["device_no"] ?>
</td>
<td>
<?php echo $device["barcode"] ?>
</td>
<td>
<?php echo $device["serial_imei"] ?>
</td>
<td>
<?php echo $device["serial_no"] ?>
</td>
<td>
<?php echo $device["created_date"] ?>
</td>
</tr>
<?php endforeach; ?>
<?php } ?>
</br>
</tbody>
</table>
I think you're looking for something like this https://datatables.net/reference/api/row().child().
Then you can add a table in the child row with more information.
Note: It looks like you have the responsive option enabled (green plus button that hides/shows hidden columns). If you have a child row open and try to show the hidden columns, it might overwrite your child row.
Edit:
You need to specify the HTML you want to put in the child. I would personally use ajax to retrieve the children when I wanted to display them. Otherwise the data needs to be hidden somewhere in the page.
I've created a codepen that puts the HTML in a data attribute on the row. Then you can click a button to view the child rows (devices). Obviously, there are many other ways to store the data on the page.
$(document).on("click", ".viewChildren", rowClickHandler);
$("#example").DataTable();
function rowClickHandler() {
var btn = $(this);
var tr = btn.closest('tr');
var dtRow = $("#example").DataTable().row(tr);
if (dtRow.child.isShown()) {
dtRow.child.hide();
btn.text('Show Children');
} else {
var children = tr.data("children");
dtRow.child(children).show();
btn.text('Hide Children');
}
}
th{
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Device</th>
<th>Dev.no</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr data-children='<table>
<thead>
<tr>
<th>barcode</th>
<th>imei</th>
<th>serial_no</th>
<th>created_date</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>11324</td>
<td>654654</td>
<td>2020-01-17</td>
</tr>
<tr>
<td>1234987</td>
<td>1654</td>
<td>654687</td>
<td>2020-04-30</td>
</tr>
</tbody>
</table>'>
<td>Laptop</td>
<td>2</td>
<td><button class = 'viewChildren'>See Children</button></td>
</tr>
</tbody>
</table>
I have a problem with datatables jquery. My dashboard footer is not fit to datatables when the page first load a lot of data (paggging).
Here's the screenshot:
Click for screenshot
After i try to open inspect element, or try to zoom out/in the page, the footer will automatically fit.
The footer should be like this:
Click for screenshot 2
Video record: https://drive.google.com/file/d/1vSjzqGuknJhl_jPtnZTdf5mNYTNlvBmf/view?usp=drivesdk
Thanks before.
My datatables code:
<table id="datatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Nama Trainset</th>
<th>Status Aktif</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
foreach ($trainset_data as $trainset)
{
?>
<tr>
<td align="center" width="80px"><?php echo ++$start ?></td>
<td align="center" ><?php echo $trainset->nm_trainset ?></td>
<td align="center" ><?php echo $trainset->aktif ?></td>
<td style="text-align:center" width="200px">
<?php
echo anchor(site_url('trainset/update/'.$trainset->id_trainset),'Perbarui');
echo ' | ';
echo anchor(site_url('trainset/delete/'.$trainset->id_trainset),'Hapus','onclick="javasciprt: return confirm(\'Apakah Anda yakin akan menghapus data ini?\')"');
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
Update, seems it is also happening when i go onto the next page (fullscreen this time).
I'm hoping someone could possible help me as this has been driving me crazy. I have a table full off orders which each row has a button. This button when submitted will show an alert.
I am using data-tables (Responsive), and when the table is all on the screen, the button works as intended. However, when the screen is resized and the button goes within the + icon to expand the row. The button is not running the jquery and is submitting the page.
I have no idea how to fix this and was wondering if there is a workaround. Here is a sample of the code if it helps.
<table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order Number</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<?php foreach ($orders as $order): ?>
<tr>
<th scope="row">
<?php echo $order['OrderNumber']; ?>
</th>
<td>
<form id="<?php echo $order['OrderNumber']; ?>">
<input type="submit" value="Submit">
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
At the bottom of the page:
<?php foreach ($orders as $order): ?>
<script>
$('#<?php echo $order['OrderNumber']; ?>').on('submit', function () {
alert('Form submitted!');
return false;
});
</script>
<?php endforeach; ?>
Any help would be appreciated! I have no idea why it isn't working when the table is resized.
Use a delegated event handler instead :
$('#datatable-buttons').on('submit', '#<?php echo $order['OrderNumber'];?>', function() {
alert('Form submitted!');
return false;
});
Your event handler does not work because the form not exists in dom at the time of declaration.
But all those dedicated #id based event handlers is completely unnecessary. A single (delegated) handler is sufficient :
$('#datatable-buttons').on('submit', 'form', function () {
alert('Form ' + $(this).attr('id') + ' submitted!');
return false;
});
Hey mate you could try something like this for the alert
<table id="datatable-buttons" class="table table-striped table- bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order Number</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<?php foreach ($orders as $order): ?>
<tr>
<th scope="row">
<?php echo $order['OrderNumber']; ?>
</th>
<td>
<button type="button" class="btnPress" id="<?php echo $order['OrderNumber']; ?>">Submit</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Bottom
<script>
$('.btnPress').on('click', function () {
alert('Form submitted!');
alert(this.id);
});
</script>
This is my controller, that i use to send the row to the model:
function excluir(){
$codcliente = $this->input->post('codcliente');
$this->load->model("Cliente_class");
$this->Cliente_class->excluirCliente($codcliente);
redirect('cliente/busca');
}
my model:
function excluirCliente($codcliente){
$this->db->delete('cliente', array('codcliente' => $codcliente));
}
my table (view):
<form action="#" method="POST" id="form">
<div style="float: left;">
<input type="button" onclick="cadastro();" value="Novo cliente" name="botao" class="btn btn-primary">
</div>
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Código</th>
<th>Nome</th>
<th>Cidade</th>
<th>Telefone</th>
<th> </th>
</tr>
<tbody>
<?php
foreach ($records as $row){ ?>
<tr>
<td><input name="codcliente" id="codcliente" value="<?php echo $row->codcliente ?>"></td>
<td><?php echo $row->nome ?></td>
<td><?php echo $row->cidade ?></td>
<td><?php echo ($row->telefone == null) ? "-" : $row->telefone ?></td>
<td><center><input type="button" onclick="excluir();" value="Delete"></td>
</tr>
<?php } ?>
</tbody>
</form>
</thead>
</table>
and my JS:
function excluir(){
document.forms['form'].action = "<?php base_url();?>excluir";
document.forms['form'].submit();
}
its working fine, but the code is deleting my last row in relation with the table on html. i used the order by too see whats beeing deleted, and it works the same...
i dont know what's wrong
Your problem is that you are using the same form name name="codcliente" for all your rows and then submitting the whole form when you delete. The server sees the last value for codcliente which will be your last row and hence deletes it.
To fix, I suggest you use unique form names for each row for all your row fields. Eg. Instead of name="codcliente" use name="codcliente_<?php echo $row->id ?>". And then when you post to the server to delete, use a data-name=<?php echo $row->codcliente ?> on the delete button and in the onClick handler use $(this).data('name') to get the unique name of the field and post that to the server. I suggest you use ids instead of names as well.
Below is the source code from my website which shows an empty table produced from a PHP file that had no data to fill it, how can I hide these tables and strip the code from the page if the table is empty.
<form class="cart" method="post" enctype='multipart/form-data'>
<table class="footable" cellspacing="0" class="group_table">
<thead>
<tr id="price-table-custom-header">
<th><center>head1</center></th>
<th><center>Information</center></th>
<th data-sort-initial="true"><center>head3</center></th>
<th><center>Purchase</center></th>
</tr>
</thead>
<tbody> </tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="4">
<div class="pagination pagination-centered">
<ul></ul>
</div>
</td>
</tr>
</tfoot>
</table>
You can verify if the tbody tag is empty and hide the whole table if it is.
$(document).ready(function(){
if ($.trim($(".group_table tbody").text()).length == 0) {
$('.group_table').hide();
}
});
Edit:
Your table has two class attributes, to add two classes, you should do this way:
<table cellspacing="0" class="group_table footable">
Js Fiddle:
https://jsfiddle.net/jsb3z0y4/
Why not check if it has any content and hide it if there isn't any.
var hasContent = $('.group_table tbody').text().trim();
if(!hasContent){
$('.group_table tbody').hide();
}