I am trying to implement multiple select checkboxes in datatable. But when I submit the form, I got this error
TypeError: table.column is not a function[Learn More]
I am using the following code:
pageSetUp();
var pagefunction = function() {
var table = $('#pendingInvoice').dataTable({
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f>
<'col-sm-6 col-xs-6 hidden-xs'T>r>"+"t"+
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12
hidden-xs'i><'col-sm-6 col-xs-12'p>>",
"oLanguage": {
"sSearch": '<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i></span>'
},
"oTableTools": {
"aButtons": [
"copy",
"xls",
{
"sExtends": "pdf",
"sTitle": "Techmj_PDF",
"sPdfMessage": "Techmj PDF Export",
"sPdfSize": "A4"
},
{
"sExtends": "print",
"sMessage": "Generated <i>(press Esc to close)</i>"
}
],
"sSwfPath": "js/plugin/datatables/swf/copy_csv_xls_pdf.swf"
},
"columnDefs": [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
order: [[ 0, 'desc' ]],
'select': {
'style': 'multi'
}
});
$('#frm-example').on('submit', function(e){
e.preventDefault();
var rows_selected = table.column(0).checkboxes.selected();
$.each(rows_selected, function(index, rowId){
$(form).append($('<input>')
.attr('type', 'hidden')
.attr('name', 'id[]')
.val(rowId));
});
});
};
loadScript("js/plugin/datatables/jquery.dataTables.min.js", function(){
loadScript("js/plugin/datatables/dataTables.colVis.min.js", function(){
loadScript("js/plugin/datatables/dataTables.tableTools.min.js", function(){
loadScript("js/plugin/datatables/dataTables.bootstrap.min.js", function(){
loadScript("js/plugin/datatables/dataTables.checkboxes.min.js", function(){
loadScript("js/plugin/datatable-responsive/datatables.responsive.min.js", pagefunction);
});
});
});
});
});
Here is my html table:
<form id="frm-example" action="model/unapprove.php" method="POST">
<table id="pendingInvoice" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">ID</th>
<th data-class="expand">Customer Name</th>
<th data-hide="phone,tablet">Group Name</th>
<th data-hide="phone,tablet">Pay Amount</th>
<th data-hide="phone,tablet">Pay Date</th>
<th data-hide="phone,tablet">Action</th>
</tr>
</thead>
<tbody>
<?php while($row = $app->fetch(PDO::FETCH_OBJ)): ?>
<tr>
<td><?php echo $row->id; ?></td>
<td><?php echo $row->hming; ?></td>
<td><?php echo $row->groupname; ?></td>
<td><?php echo $row->payamount; ?></td>
<td><?php echo $row->paydate; ?></td>
<td><?php if($row->status=='Approved'){
echo 'Approved';
}else if($row->status=='Pending'){
echo 'Pending';
}else{
echo 'Rejected';
} ?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<p><button type="submit" class="btn btn-success">Approve</button></p>
</form>
Where could the code go wrong? When I hit the submit button the it could not get the table variable. I could not figure it out where the code goes wrong. Please help.
Use DataTable() instead of dataTable() to initialize your table. For example:
var table = $('#pendingInvoice').DataTable({
// ... skipped ...
});
See jQuery DataTables Checkboxes for more examples and details.
Related
I have had toggle button name is Enable, Disable in my table and in which if
I change the value of a button Enable to Disable then it prints Disable value two times.
My code:
<table id="prodcutTable" class="table table-bordered table-striped" style="width: 100%;" >
<thead>
<tr style="font-size: 12px; line-height: 0px; ">
<th>SR No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email ID</th>
<th>Phone Number</th>
<th>Status</th>
<th></th>
</tr>
<?php $counter=1?>
<?php foreach($result as $result):?>
<tr>
<input type="hidden" name="txt_user_id" value="<?php echo $result['id']?>">
<td><?php echo $counter?></td>
<td><?php echo $result['username']?></td>
<td><?php echo $result['lastname']?></td>
<td><?php echo $result['email']?></td>
<td><?php echo $result['phonenumber']?></td>
<td>
<?php
if ($result['status']=="active"){
?>
<span class="badge badge-boxed badge-soft-success">Active</span>
<?php
}else if($result['status']=="inactive"){
?>
<span class="badge badge-boxed badge-soft-warning">InActive</span>
<?php
}
?>
</td>
<td>
<input type="checkbox" class="btn-toggle" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" <?php
if($result['status']=="active") echo "checked"; ?> >
</td>
</tr>
<?php $counter++?>
<?php endforeach;?>
</thead>
</table>
<script>
function disableUser(id) {
$.ajax({
url: "<?php echo base_url(); ?>admin_controller/AdminController/disableUser",
method: "post",
data: {id:id},
dataType:'json',
})
.done(function( data ) {
if(data.status=="true"){
alert('Enabled');
setTimeout(function(){location.reload();},100);
}else{
alert("Try Again");
}
});
}
function enableUser(id) {
$.ajax({
url: "<?php echo base_url(); ?>admin_controller/AdminController/enableUser",
method: "post",
data: {id:id},
dataType:'json',
})
.done(function( data ) {
if(data.status=="true"){
alert('Disabled');
setTimeout(function(){location.reload();},100);
}else{
alert("Try Again");
}
});
}
$('.btn-toggle').change(function(){
var tr = $(this).parents('tr');
//console.log(tr);
var txt_user_id = tr.find($('input[name="txt_user_id"]')).val();
//console.log(txt_user_id);
var mode= $(this).prop('checked');
console.log(mode);
if($(this).prop('checked'))
{
enableUser(txt_user_id);
}
else
{
disableUser(txt_user_id);
}
});
</script>
I do not know where I wrote the wrong code in my code.
Following is the image of my table on how to look like a toggle bar.
And the color also changes to blue to white.
put this code in your ready function :
$('.btn-toggle').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
I have a bootstrap table that displays data loaded from MySQL DB. I want to add a column with buttons so that it would look similar to this image.
However, I don't know how to add buttons into my script. When I "manually" create a table, I can easily do this:
<td>
<i class="fa fa-pencil"></i> Edit
<i class="fa fa-trash-o"></i> Delete
</td>
But when I populate table with the data from DB, the logic of creating table changes. This is my code:
<table id="table"
data-show-columns="true"
data-height="460">
</table>
Script for loading data (I do not provide list.php because it just contains PHP script for connecting to DB and submitting SELECT queries):
<script type="text/javascript">
var $table = $('#table');
$table.bootstrapTable({
url: 'include/list.php',
search: true,
pagination: true,
buttonsClass: 'primary',
showFooter: true,
minimumCountColumns: 2,
columns: [{
field: 'id',
title: 'ID',
sortable: true,
},{
field: 'creation_date',
title: 'Date',
sortable: true,
},{
field: 'latitude',
title: 'Latitude',
sortable: true,
}, ],
});
</script>
It is all you need
$('#table tbody tr').append('<td><i class="fa fa-pencil"></i> Edit <i class="fa fa-trash-o"></i> Delete </td>');
I solved this problem myself using the following approach:
<?php
include_once 'include/connect_db.php';
$query = "SELECT * FROM base;";
$result = execute_query($query);
$list = array();
while ($b = mysqli_fetch_array($result)) {
$list[] = $b;
}
?>
<table id="table-b" class="table table-striped projects">
<thead>
<tr>
<th style="width: 1%">#</th>
<th style="width: 10%">ID de base/th>
<th>Fecha de registro</th>
<th>Latitud</th>
<th>Longitud</th>
<th style="width: 20%"></th>
</tr>
</thead>
<tbody>
<?php foreach ($list as $row):?>
<tr>
<td><?php echo $row['ID'];?></td>
<td><?php echo $row['creation_date'];?></td>
<td><?php echo $row['latitude'];?></td>
<td><?php echo $row['longitude'];?></td>
<td>
<i class="fa fa-pencil"></i> Edit
<i class="fa fa-trash-o"></i> Delete
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#table-b').dataTable({
"sPaginationType":"full_numbers",
"aaSorting":[[0, "asc"]],
"bJQueryUI":true
});
hideLoading();
});
</script>
var ownDataTable = $(".own_cases_table").dataTable();
$.ajax({
url : "api/v1/cases/"+encodeURIComponent(uid)+"/active",
type : "get",
headers : { "Authorization" : api_key },
dataType : "json",
success : function(response) {
if (response.error) {
} else {
var cases = response.cases;
ownDataTable.fnClearTable();
for (var i = 0; i < cases.length; i++) {
console.log(cases[i].case_name);
ownDataTable.fnAddData([ cases[i].case_name, cases[i].slide_img, 'Daha Fazla', 'action' ]);
}
}
}
});
HTML :
<!-- TABLE FOR MOBILE START -->
<table class="table mb30 own_cases_table">
<thead>
<tr>
<th><?php echo _("Olgu"); ?></th>
<th><?php echo _("Dijital Slide"); ?></th>
<th><?php echo _("Daha Fazla"); ?></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- TABLE FOR MOBILE END -->
<div class="table-responsive hidden-xs hidden-sm">
<table class="table own_cases_table">
<thead>
<tr>
<th><?php echo _("Olgu"); ?></th>
<th><?php echo _("Dijital Slide"); ?></th>
<th><?php echo _("Daha Fazla"); ?></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
i am using datatables but no data is added in datatables. Always writes "No data avaliable in table"
i checked cases has data and i $(".own_cases_table").DataTable(); but nothing changed.
How i can add data into my tables ?
I tried with ownDataTable.row.add() but same result occured
You can use this to initalize datatable.
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "../server_side/scripts/server_processing.php"
} );
from https://datatables.net/examples/data_sources/server_side.html
I have 2 data tables:
Table 1
<table id="properties_list" class="table">
<thead>
<tr class="backend_tab_header">
<th>Status</th>
<th>Photo</th>
<th>Property ID</th>
<th>Address</th>
<th>Date Created</th>
<th>Owner</th>
</tr>
</thead>
<tbody>
<?php
foreach ($properties as $property)
{
?>
<tr>
<td><?php print $property["status"]; ?></td>
<td class="pic_prop_table"><img class="img-responsive" src="<?php print $property["url"]; ?>" ></td>
<td><?php print $property["prop_id"]; ?></td>
<td><?php print $property["address"]; ?></td>
<td><?php print $property["date_created"]; ?></td>
<td><?php print $property["first_name"]; ?> <?php print $property["last_name"]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Table 2
<table id="messages_list" class="table">
<thead>
<tr class="backend_tab_header">
<th>Property ID</th>
<th>Subject</th>
<th>Message</th>
<th>Received</th>
</tr>
</thead>
<tbody>
<?php
foreach ($properties as $property)
{
?>
<tr>
<td><?php print $messages["from_user"]; ?></td>
<td><?php print $messages["subject"]; ?></td>
<td><?php print $messages["message"]; ?></td>
<td><?php print $messages["date_sent"]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
and to fill the arrays call my php functions on top of the page:
$properties = $auth_user->getPropertiesByUser($_SESSION['user_session']);
$messages = $auth_user->getMessages($_SESSION['user_session']);
The data tables are create with JS
jQuery(document).ready(function() {
jQuery('table#properties_list').DataTable( {
//ajax: '../ajax/data/arrays.txt',
scrollY: 200,
scrollCollapse: true,
paging: false
} );
jQuery('table#messages_list').DataTable( {
//ajax: '../ajax/data/arrays.txt',
scrollY: 200,
scrollCollapse: true,
paging: false
} );
});
My problem is that when the first array($properties) return empty the first table show the message "No data available in table" and also when both arrays($properties and $messages) return empty both tables show the message "No data available in table", but when $properties array return with info and $messages array return empty the 2nd table(messages)don't show the "No data available in table" and also creates as much <td> elements as <td> elements in the firs table(properties). Can anyone tell me what could be the cause of this behaviour?
Thanks in advance
probably it's because both of the for each in pop use the $properties. On second loop, it gets the $prperties of the first.
Try to set $properties = array() before getting the values or use another variable name.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I am using datatables. I have action column in the table in which one delete button and i am using ajax post function to delete any row. But Delete button is only working on the first page. It is not working on other pages.
Here is my delete button.
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th class="col-md-5">Resource Person</th>
<th class="col-md-4">Title/Topic</th>
<th> Date </th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM seminar";
$result = $con->query($sql);
if ($result->num_rows > 0) {
// output data of each row
$count = 1;
while($row = $result->fetch_assoc()) { ?>
<tr>
<td><?= $count ?></td>
<td><?= $row['person'] ?></td>
<td><?= $row['topic'] ?></td>
<td><?= $row['date'] ?></td>
<td>
<button class="btn btn-danger delete_seminar" value="<?php echo $row['id'] ?>"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
<button class="btn btn-info" onclick="location.href = 'addRecord.php?id=<?php echo $row['id'] ?>';"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>
</td>
</tr>
<?php $count++; }
}else{
echo "<tr><td colspan='5'><center>No Record Found</center></td></tr>";
}
?>
</tbody>
And my jquery function.
$('#example').DataTable();
$(function() {
$(".delete_seminar").on('click', function(event) {
if (confirm("Are you sure?")) {
var data = $(this).val();
$.post('requests/seminars.php', {delete_sem: data}, function(data) {
if (data == "delete") {
location.reload();
}else{
alert(data);
};
});
}
});
})
I don't know how to resolve this problem. Please help me to come out from this problem.
You must edit your javascript like below
$(document).on('click', '.delete_seminar', function(e){..});