Jquery Data table Error when i add a search function

Jquery Data table Error when i add a search function - javascript

I am having a problem with my jQuery DataTable, my data table is working when I only have four columns for my search function. I have 7 columns on my table but when I try to add another column to my search function, I have this message:
DataTables warning: table id=example - Invalid JSON response. For more
information about this error, please see http://datatables.net/tn/1
This is the code for my table
<div class="container" id=subwrapper>
<h1>Employee's Data Table</h1>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Employee ID</th>
<th>First name</th>
<th>Last name</th>
<th>Birthday</th>
<th>Age</th>
<th>Job Position</th>
<th>Contact number</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Employee ID</th>
<th>First name</th>
<th>Last name</th>
<th>Birthday</th>
<th>Age</th>
<th>Job Position</th>
<th>Contact number</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function(){
var dataTable=$('#example').DataTable({
"processing": true,
"serverSide":true,
"ajax":{
url:"fetchemployee.php",
type:"post"
}
});
});
</script>
My PHP code:
<?php
$con=mysqli_connect('localhost','root','','projectmanagementdb')
or die("connection failed".mysqli_errno());
$request=$_REQUEST;
$col =array(
0 => 'employeeID',
1 => 'employeeFirstname',
2 => 'employeeLastname',
3 => 'employeeBirthday',
4 => 'employeeAge',
5 => 'employeePosition',
6 => 'employeeContactnumber'
); //create column like table database
$sql ="SELECT * FROM employeeinfo";
$query=mysqli_query($con,$sql);
$totalData=mysqli_num_rows($query);
$totalFilter=$totalData;
//Search function of Jquery Data table
$sql ="SELECT * FROM employeeinfo WHERE 1=1";
if(!empty($request['search']['value'])){
$sql.=" AND (employeeID Like '".$request['search']['value']."%' ";
$sql.=" OR employeeFirstname Like '".$request['search']['value']."%' ";
$sql.=" OR employeeLastname Like '".$request['search']['value']."%' ";
$sql.=" OR employeeBirthday Like '".$request['search']['value']."%' )";
$sql.=" OR employeeAge Like '".$request['search']['value']."%' )";
$sql.=" OR employeePosition Like '".$request['search']['value']."%' )";
$sql.=" OR employeeContactnumber Like '".$request['search']['value']."%'
)";
}
$query=mysqli_query($con,$sql);
$totalData=mysqli_num_rows($query);
$data=array();
while($row=mysqli_fetch_array($query)){
$subdata=array();
$subdata[]=$row[0]; //employeeID
$subdata[]=$row[1]; //employeeFirstname
$subdata[]=$row[2]; //employeeLastname
$subdata[]=$row[3]; //employeeBirthday
$subdata[]=$row[4]; //employeeAge
$subdata[]=$row[5]; //employeePosition
$subdata[]=$row[6]; //employeeContactnumber
$data[]=$subdata;
}
$json_data=array(
"draw" => intval($request['draw']),
"recordsTotal" => intval($totalData),
"recordsFiltered" => intval($totalFilter),
"data" => $data
);
echo json_encode($json_data);
?>

Related

Passing of data from main page to php query inside a modal

I have a dataTable that passes it's row to a modal. Will it be possible to pass it directly to the php page using the same modal script?
This is my main_page.php
<table id="example1" class="table table-bordered">
<thead>
<th>Reference No</th>
<th>Finger Scan No</th>
<th>Date From</th>
<th>Date To </th>
<th>Tools </th>
</thead>
<tbody>
<?php
$user = $user['fingerscanno'];
$sql = "
SELECT
payroll.payrollno AS payrollno,
payroll.referenceno AS referenceno,
payroll.fingerscanno AS fingerscanno,
payroll.datefrom AS datefrom,
payroll.dateto AS dateto,
USERINFO.USERID,
USERINFO.BADGENUMBER
FROM
payroll,
USERINFO
WHERE
USERINFO.BADGENUMBER = payroll.fingerscanno AND
payroll.fingerscanno='$user'
";
$query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
echo "
<tr>
<td>".$row['referenceno']."</td>
<td>".$row['fingerscanno']."</td>
<td>".$row['datefrom']."</td>
<td>".$row['dateto']."</td>
<td>
<button class='btn btn-success btn-sm edit btn-flat' data-id='".$row['referenceno']."'><i class='fa fa-edit'></i> Proof of Attendance</button>
<button class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['referenceno']."'><i class='fa fa-edit'></i> Payslip Summary</button>
</td>
</tr>
";
}
?>
</tbody>
</table>
<?php include 'includes/mymodal.php'; ?>
This is the modal function
$(function(){
$("body").on('click', '.edit', function (e){
e.preventDefault();
$('#edit').modal('show');
var id = $(this).data('id');
getRow(id);
});
This is the modal page
mymodal.php
<div class="modal fade" id="edit">
<input type="hidden" class="decid" id="id" name="id">
<table id="example2" class="table table-bordered">
<thead>
<th>Schedule Date</th>
<th>Schedule Name</th>
<th>Recorded In</th>
<th>Recorded Out</th>
<th>Day Count</th>
<th>Day Value</th>
<th>N.D. Value</th>
<th>Leave Count</th>
<th>R.H. Count</th>
<th>R.H. Value</th>
</thead>
<tbody>
<?php
$sql = "SELECT fingerscanno, scheduledate, schedulename, recordin, recordout, noofdays, rate, nightdifferential, leaveday, regularholiday, specialholiday, referenceno
FROM payrollrecords WHERE fingerscanno='$user' and referenceno='$id'";
$query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
echo "
<tr>
<td>".$row['scheduledate']."</td>
<td>".$row['schedulename']."</td>
<td>".$row['recordin']."</td>
<td>".$row['recordout']."</td>
<td>".$row['noofdays']."</td>
<td>".$row['rate']."</td>
<td>".$row['nightdifferential']."</td>
<td>".$row['leaveday']."</td>
<td>".$row['regularholiday']."</td>
<td>".$row['specialholiday']."</td>
</tr>
";
}
?>
</tbody>
</table>
</div>
My question is, how will I pass this into the table? So that the variable referenceno='$id' will receive the value from the main page.

You need to use AJAX.
Ajax is a javascript methodology that allows you to exchange information with a back-end PHP file, just as you are attempting to do.
The AJAX code block will send data to the mymodal.php file, the mymodal.php file will do the MySQL lookup and create the HTML, then echo a string variable (which could be a json object or it could be the HTML that you built in your while loop) back to the main page. The AJAX code block will receive the data echo'd out from the PHP file inside the .done() function and, also in that function, you can modify the DOM to inject the new data. To the user, it will look like they clicked on an element with class edit and the data just appeared in the modal.
Note that you do not include the mymodal.php file in your main_file.php page, because the AJAX code block knows how to communicate with that file.
You will need to add the HTML structure for the modal to the bottom of your main page (note that it is initially set to display:none):
<style>
#lamodal{display:none;position:fixed;width:100vw;height:100vh;background:black;opacity:0.8;}
#mdl_inner{width:60%;height:40%;}
.myflex{display:flex;align-items:center;justify-content:center;}
</style>
<div id="lamodal" class="myflex">
<div id="mdl_inner"></div>
</div><!-- #lamodal -->
Your javascript (AJAX) will look something like this:
$(function(){
$("body").on('click', '.edit', function (e){
e.preventDefault();
var id = $(this).data('id');
$.ajax({
type: 'post',
url: 'mymodal.php',
data: 'userid=id'
}).done(function(d){
//console.log('d: '+d);
$('#mdl_inner').html(d);
$('#lamodal').show();
});
});
});
Your mymodal.php file would be changed to look like this:
<?php
$sql = "SELECT fingerscanno, scheduledate, schedulename, recordin, recordout, noofdays, rate, nightdifferential, leaveday, regularholiday, specialholiday, referenceno
FROM payrollrecords WHERE fingerscanno='$user' and referenceno='$id'";
$query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
$out = '
<table id="example2" class="table table-bordered">
<thead>
<th>Schedule Date</th>
<th>Schedule Name</th>
<th>Recorded In</th>
<th>Recorded Out</th>
<th>Day Count</th>
<th>Day Value</th>
<th>N.D. Value</th>
<th>Leave Count</th>
<th>R.H. Count</th>
<th>R.H. Value</th>
</thead>
<tbody>
';
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
$out .= '
<tr>
<td>".$row['scheduledate']."</td>
<td>".$row['schedulename']."</td>
<td>".$row['recordin']."</td>
<td>".$row['recordout']."</td>
<td>".$row['noofdays']."</td>
<td>".$row['rate']."</td>
<td>".$row['nightdifferential']."</td>
<td>".$row['leaveday']."</td>
<td>".$row['regularholiday']."</td>
<td>".$row['specialholiday']."</td>
</tr>
';
}
$out .= '
</tbody>
</table>
';
echo $out;
?>
Note how we are constructing a string variable and building it through concatination. When done, just echo $out and the newly-constructed HTML will appear in the .done() function of your AJAX code block.
See these additional AJAX examples and explanations:
http://www.jayblanchard.net/basics_of_jquery_ajax.html
Simple Like/Unlike text button - adding ajax etc
pass var to bootstrap modal where php will use this value

datatable with child rows using mysql

In MySQL Database, I have two tables Abc and Pqr. In Abc table there's a unique ID, that ID is used in Pqr table as foreign key.
I want to show the parent element as Abc table data and child rows as Pqr table data with respect to Abc unique ID.
Here is my code:
$sqlGetParents="SELECT * from projectrera order by project_id";
$resultGetParents = $conn->query($sqlGetParents);
?>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Project Name</th>
<th>Builder Id</th>
<th>Location Id</th>
<th>Phase</th>
<th>Status</th>
</tr>
</thead>
<?php
while ($row = mysqli_fetch_array($resultGetParents)) {
echo " <tr>
<td class='details-control'></td>
<td>".$row[1]."</td>
<td>".$row[2]."</td>
<td>".$row[3]."</td>
<td>".$row[8]."</td>
<td>".$row[15]."</td>
</tr>";
} ?>
</table>
<div id="test">
<table id='example1'>
<?php
$sqlGetCatWithParent1="SELECT * from info";
$resultGetCatWithParent1 = $conn->query($sqlGetCatWithParent1);
while ($row3 = mysqli_fetch_array($resultGetCatWithParent1)) {
echo " <tr>
<td></td>
<td>".$row3[1]."</td>
<td>".$row3[2]."</td>
<td>".$row3[3]."</td>
</tr>";
}
?>

Why don't you use the JOIN or Subquery on your select statement? I think that would help you since you're using a relational schema on your tables.
Example:
$sqlGetParents =
SELECT abc.*, pqr.* from projectrera abc
LEFT JOIN info pqr on pqr.project_id = abc.project_id
order by project_id
In your HTML table, I suggest to use FOREACH instead of WHILE.
<?php foreach ($row->result() in $resultGetParents) {
echo "<tr>
<td class='details-control'></td>
<td>".<?php echo $row[1]."</td>
<td>".$row[1]."</td>
<td>".$row[3]."</td>
<td>".$row[8]."</td>
<td>".$row[15]."</td>
</tr>";
echo "<tr>
<td></td>
<td>".$row[1]."</td>
<td>".$row[2]."</td>
<td>".$row[3]."</td>
</tr>";
} ?>
You can change the $row number based on the results or use text to easily know which columns should be displayed on your table. (i.e $row['project_id'])

Getting error "property 'style' of undefined" when delete a full column of datatable dynamically using javascript

This is my html code for table.
<table class="table table-striped table-bordered dt-responsive nowrap" id="log-details">
<thead>
<tr>
<th>User Name</th>
<th>Status</th>
<th>Date</th>
<th>time</th>
<th>TaskName</th>
<th>Location</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This my javascript Code:
function dataTableManipulate(mainArray){
table = $("#log-details").DataTable({
data: mainArray,
"searching": true,
"info": false,
"lengthChange":false,
"columnDefs": [{
"targets": [5],
render : function (data, type, row) {
return '<button class="btn btn-primary btn-xs " id = "btnShow">Show Map</button>';
}
}]
});
$('#tbl_details_length').after($('.datepic-top'));
}
$("#activitylog").click(function(){
tableData = generalMainArray
$('#log-details').dataTable().fnDestroy();
$('table tr').find('td:eq(4),th:eq(4)').remove();
dataTableManipulate(tableData);
});
Note: activitylog is a button.
I want to remove TaskName column from Datatable on activitylog button click.Any one help me for delete that column from datatable

How to add extra field in datatable which is not database

I am trying to add edit and delete button in data table.
I have html
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Theater name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Theater name</th>
<th>Action</th>
</tr>
</tfoot>
</table>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres' ); ?>"
});
});
I tried adding column in thead and tbody but it is giving me alert saying
DataTables warning: table id=example - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4
Server returning data
{"draw":0,"recordsTotal":57,"recordsFiltered":57,"data":[["Tiger","Nixon"],["Garrett","Winters"],["Ashton","Cox"],["Cedric","Kelly"],["Airi","Satou"],["Brielle","Williamson"],["Herrod","Chandler"],["Rhona","Davidson"],["Colleen","Hurst"],["Sonya","Frost"],["Jena","Gaines"],["Quinn","Flynn"],["Charde","Marshall"],["Haley","Kennedy"],["Tatyana","Fitzpatrick"],["Michael","Silva"],["Paul","Byrd"],["Gloria","Little"],["Bradley","Greer"],["Dai","Rios"],["Jenette","Caldwell"],["Yuri","Berry"],["Caesar","Vance"],["Doris","Wilder"],["Angelica","Ramos"],["Gavin","Joyce"],["Jennifer","Chang"],["Brenden","Wagner"],["Fiona","Green"],["Shou","Itou"],["Michelle","House"],["Suki","Burks"],["Prescott","Bartlett"],["Gavin","Cortez"],["Martena","Mccray"],["Unity","Butler"],["Howard","Hatfield"],["Hope","Fuentes"],["Vivian","Harrell"],["Timothy","Mooney"],["Jackson","Bradshaw"],["Olivia","Liang"],["Bruno","Nash"],["Sakura","Yamamoto"],["Thor","Walton"],["Finn","Camacho"],["Serge","Baldwin"],["Zenaida","Frank"],["Zorita","Serrano"],["Jennifer","Acosta"],["Cara","Stevens"],["Hermione","Butler"],["Lael","Greer"],["Jonas","Alexander"],["Shad","Decker"],["Michael","Bruce"],["Donna","Snider"]]}
Can anyone help me solve this issue

You just need to add its HTML in your DataTable definition
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres' ); ?>",
"columns": [
{
"targets": -1,
"data": null,
"orderable": false,
"defaultContent": [
"<i class='glyphicon glyphicon-edit'></i>"+
"<i class='glyphicon glyphicon-trash'></i>"]
}
]
} );
DEMO : https://jsfiddle.net/Prakash_Thete/evfchh7q/
Change your table definition as below(Added one more header as you are sending data for two columns + edit button column).
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Theater name</th>
<th>One more header</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Theater name</th>
<th>One more header</th>
<th>Action</th>
</tr>
</tfoot>
</table>

Fetch table row data as per the selected checkbox

I am using Material Design Lite to create a table and I am inserting rows dynamically using php.
The material design lite has provided checkboxes for each row. Now, I want to use the selected row's data on a button click. Does anyone have any idea how to do that?
Here is the code :
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" id="sanctionedTable">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Registration No.</th>
<th class="mdl-data-table__cell--non-numeric">Amount</th>
</tr>
</thead>
<tbody>
<?php
$temp = "";
while($row = mysqli_fetch_assoc($result))
{
$temp="<tr><td>".$row["name"]."</td><td>".$row["regno"]."</td><td>".$row["amount"]."</td></tr>";
echo $temp;
}
?>
</tbody>
</table>

You can use something like this using jquery:
$('tr').click(function(){
alert("Name:"+$(this).children('td:nth-child(1)').html()+",Registration nio:"+$(this).children('td:nth-child(2)').html()+",Amount:"+$(this).children('td:nth-child(3)').html());
});
This fetches the information in each row.

We Keep Coding

JavaScript is the programming language of the Web.

Jquery Data table Error when i add a search function - javascript

Related

Passing of data from main page to php query inside a modal

datatable with child rows using mysql

Getting error "property 'style' of undefined" when delete a full column of datatable dynamically using javascript

How to add extra field in datatable which is not database

Fetch table row data as per the selected checkbox

Categories

Resources