how to add individual column search in datatable

how to add individual column search in datatable - javascript

hi this is my server side data table. I want to add individual column search option. when i want to search then the all search needs to filter with my search input.
here is my code.
the php code named with fetch.php connected with the database and its retrive the data from database.
<?php
$connect = new PDO("mysql:host=localhost;dbname=sbcldb_management", "sbcldb_management", "management_server2021");
$column = array('order_customer_name', 'order_item', 'order_date', 'order_value');
$query = '
SELECT * FROM tbl_order
WHERE order_customer_name LIKE "%'.$_POST["search"]["value"].'%"
OR order_item LIKE "%'.$_POST["search"]["value"].'%"
OR order_date LIKE "%'.$_POST["search"]["value"].'%"
OR order_value LIKE "%'.$_POST["search"]["value"].'%"
';
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
$query .= 'ORDER BY order_id DESC ';
}
$query1 = '';
if($_POST["length"] != -1)
{
$query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$statement = $connect->prepare($query);
$statement->execute();
$number_filter_row = $statement->rowCount();
$statement = $connect->prepare($query . $query1);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$total_order = 0;
foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row["order_customer_name"];
$sub_array[] = $row["order_item"];
$sub_array[] = $row["order_date"];
$sub_array[] = $row["order_value"];
$total_order = $total_order + floatval($row["order_value"]);
$data[] = $sub_array;
}
function count_all_data($connect)
{
$query = "SELECT * FROM tbl_order";
$statement = $connect->prepare($query);
$statement->execute();
return $statement->rowCount();
}
$output = array(
'draw' => intval($_POST["draw"]),
'recordsTotal' => count_all_data($connect),
'recordsFiltered' => $number_filter_row,
'data' => $data,
'total' => number_format($total_order, 2)
);
echo json_encode($output);
?>
Here is the javascript code that calculate the subtotal. it shoul work with the individual search option.
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
$('#order_data tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var dataTable = $('#order_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"fetch.php",
type:"POST"
},
drawCallback:function(settings)
{
$('#total_order').html(settings.json.total);
}
});
});
</script>
and this one is just a simple html formate.
<html>
<head>
<title>How to Get SUM with Datatable Server-side-processing in PHP</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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container box">
<h3 align="center">How to Get SUM with Datatable Server-side-processing in PHP</h3>
<br />
<div class="table-responsive">
<table id="order_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Customer Name</th>
<th>Order Item</th>
<th>Order Date</th>
<th>Order Value</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th colspan="3">Total</th>
<th id="total_order"></th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</tfoot>
</table>
<br />
<br />
<br />
</div>
</div>
</body>
</html>
please help me doing this.

Related

Filtering db table by date

My goals is to make filter for loading posts from 1 week ago, 1 month ago and two inputs from date from and date to ( if one of them is empty to be filled with current date( y-m-d h:m:s ) format
This is all i tried and could have made it to work, every answer is much appreciated, thank you
Tl:dr
Select filter for week ago, month ago
From date - to date ( if one of those is empty then use current date )
Index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_order ORDER BY order_id desc";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Ajax PHP MySQL Date Range Search using jQuery DatePicker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center">Ajax PHP MySQL Date Range Search using jQuery DatePicker</h2>
<h3 align="center">Order Data</h3><br />
<div class="col-md-3">
<input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" />
</div>
<div class="col-md-3">
<input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" />
</div>
<div class="col-md-5">
<input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" />
</div>
<div style="clear:both"></div>
<br />
<div id="order_table">
<table class="table table-bordered">
<tr>
<th width="5%">ID</th>
<th width="30%">Customer Name</th>
<th width="43%">Item</th>
<th width="10%">Value</th>
<th width="12%">Order Date</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["order_id"]; ?></td>
<td><?php echo $row["order_customer_name"]; ?></td>
<td><?php echo $row["order_item"]; ?></td>
<td>$ <?php echo $row["order_value"]; ?></td>
<td><?php echo $row["order_date"]; ?></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(function(){
$("#from_date").datepicker();
$("#to_date").datepicker();
});
$('#filter').click(function(){
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
if(from_date != '' && to_date != '')
{
$.ajax({
url:"filter.php",
method:"POST",
data:{from_date:from_date, to_date:to_date},
success:function(data)
{
$('#order_table').html(data);
}
});
}
else
{
alert("Please Select Date");
}
});
});
</script>
And filter.php
<?php
//filter.php
if(isset($_POST["from_date"], $_POST["to_date"]))
{
$connect = mysqli_connect("localhost", "root", "", "testing");
$output = '';
$query = "
SELECT * FROM tbl_order
WHERE order_date BETWEEN '".$_POST["from_date"]."' AND '".$_POST["to_date"]."'
";
$result = mysqli_query($connect, $query);
$output .= '
<table class="table table-bordered">
<tr>
<th width="5%">ID</th>
<th width="30%">Customer Name</th>
<th width="43%">Item</th>
<th width="10%">Value</th>
<th width="12%">Order Date</th>
</tr>
';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'. $row["order_id"] .'</td>
<td>'. $row["order_customer_name"] .'</td>
<td>'. $row["order_item"] .'</td>
<td>$ '. $row["order_value"] .'</td>
<td>'. $row["order_date"] .'</td>
</tr>
';
}
}
else
{
$output .= '
<tr>
<td colspan="5">No Order Found</td>
</tr>
';
}
$output .= '</table>';
echo $output;
}
?>

Use something like this to make sure that you are getting the correct format from your datepicker:
$("#from_date").datepicker({ dateFormat: 'yy-mm-dd' }).val();
Make PHP variables to use in your query for the date:
$fromDate = !empty($_POST['from_date']) ? "'".mysqli_escape_string($_POST["from_date"])."'" : "CURDATE()";
$toDate = !empty($_POST["to_date"]) ? "'".mysqli_escape_string($_POST["to_date"])."'" : "CURDATE()";
$query =
"SELECT *
FROM tbl_order
WHERE order_date
BETWEEN $fromDate
AND $toDate";
NOTE: You should also add some logic in there to make sure that the from_date does not end up being before the to_date.
NOTE 2: This answer is making the assumption that you have not set up PDO. Always make sure to avoid SQL injection attacks in some way. Any values coming from the front end are unsafe and subject to SQL injection. PDO would be preferable, but escaping will work.

You can try casting your $_POST using CAST function to convert values to date.
$query = "SELECT * FROM tbl_order
WHERE order_date
BETWEEN CAST('".$_POST["from_date"]."' AS DATE)
AND CAST('".$_POST["to_date"]."' AS DATE)";
You can read about it on MySQLTutorial .
Also I recommend you to escape variables when working with database :-) Always expect user is up to no good.

create validation for offset in importing csv file in mysql and php

hi guys how can i create a validation so that when i import a csv file it will not give me a error offset(intentionally reduced the csv file column)
i got the code https://www.webslesson.info/2016/10/import-csv-file-data-into-mysql-database-using-php-ajax.html
here is the code in index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "db");
$query = "SELECT * FROM tbl_employee ORDER BY id desc";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Import CSV File Data into MySQL Database using PHP & Ajax</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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center">Import CSV File Data into MySQL Database using PHP & Ajax</h2>
<h3 align="center">Employee Data</h3><br />
<form id="upload_csv" method="post" enctype="multipart/form-data">
<div class="col-md-3">
<br />
<label>Add More Data</label>
</div>
<div class="col-md-4">
<input type="file" name="employee_file" style="margin-top:15px;" accept=".csv"/>
</div>
<div class="col-md-5">
<input type="submit" name="upload" id="upload" value="Upload" style="margin-top:10px;" class="btn btn-info" />
</div>
<div style="clear:both"></div>
</form>
<br /><br /><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="5%">ID</th>
<th width="25%">Name</th>
<th width="35%">Address</th>
<th width="10%">Gender</th>
<th width="20%">Designation</th>
<th width="5%">Age</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["id"]; ?></td>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["address"]; ?></td>
<td><?php echo $row["gender"]; ?></td>
<td><?php echo $row["designation"]; ?></td>
<td><?php echo $row["age"]; ?></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#upload_csv').on("submit", function(e){
e.preventDefault(); //form will not submitted
$.ajax({
url:"import.php",
method:"POST",
data:new FormData(this),
contentType:false, // The content type used when sending data to the server.
cache:false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data){
if(data=='Error1')
{
alert("Invalid File");
}
else if(data == "Error2")
{
alert("Please Select File");
}
else if(data != 'Error1' && data != 'Error2')
{
$('#employee_table').html(data);
alert("Data Import Successfully");
}
}
})
});
});
</script>
and here is for import.php
<?php
if(!empty($_FILES["employee_file"]["name"]))
{
$connect = mysqli_connect("localhost", "root", "", "db");
$output = '';
$allowed_ext = array("csv");
$tmp = explode(".", $_FILES["employee_file"]["name"]);
$extension = end($tmp);
if(in_array($extension, $allowed_ext))
{
$file_data = fopen($_FILES["employee_file"]["tmp_name"], 'r');
fgetcsv($file_data);
while($row = fgetcsv($file_data))
{
$id = mysqli_real_escape_string($connect, $row[0]);
$name = mysqli_real_escape_string($connect, $row[1]);
$address = mysqli_real_escape_string($connect, $row[2]);
$gender = mysqli_real_escape_string($connect, $row[3]);
$designation = mysqli_real_escape_string($connect, $row[4]);
$age = mysqli_real_escape_string($connect, $row[5]);
$query = "
INSERT INTO tbl_employee
(id,name, address, gender, designation, age)
VALUES ('$id','$name', '$address', '$gender', '$designation', '$age')
";
mysqli_query($connect, $query);
}
$select = "SELECT * FROM tbl_employee ORDER BY id DESC";
$result = mysqli_query($connect, $select);
$output .= '
<table class="table table-bordered">
<tr>
<th width="5%">ID</th>
<th width="25%">Name</th>
<th width="35%">Address</th>
<th width="10%">Gender</th>
<th width="20%">Designation</th>
<th width="5%">Age</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["name"].'</td>
<td>'.$row["address"].'</td>
<td>'.$row["gender"].'</td>
<td>'.$row["designation"].'</td>
<td>'.$row["age"].'</td>
</tr>
';
}
$output .= '</table>';
echo $output;
}
else
{
echo 'Error1';
}
}
else
{
echo "Error2";
}
?>
i put all the code so that every one can try it too.
Thanks for answer

How to get value from input without submitting and search it from datalist

> This Is My HTML CODE
<label>Person</label>
<input name="PersonID" type="text" id="PersonID">
<label>Car Plate Number</label>
<input name="PersonsCarPlateNumber" list="PersonsCarPlateNumber" type="text" />
> This is My PHP CODE
<?php
$conn = mysqli_connect("localhost", "root", "", "PersonWithCars");
$result = $conn->query("SELECT CarPlateNumber FROM Persons WHERE ID = '***PERSONID***' ");
?>
> This Is My Data List Where The Search For Persons Car
<datalist id=PersonsCarPlateNumber>
<?php while ($row = $result->fetch_assoc()):?>
<?php unset($CarPlateNumber);
$CarPlateNumber = $row['CarPlateNumber'];?>
<option value="<?php echo $CarPlateNumber?>"></option>
<?php endwhile;?>
</datalist>
need help sorry my code is messed up just a beginner here learning
PersonID,PersonsCarPlateNumber

<!-- date picker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<!-- 2 decimal places -->
<input onchange='fixit(this)'>
<script>
function fixit( obj ) {
obj.value = parseFloat( obj.value ).toFixed( 2 )
}
</script>
<!-- query -->
<?php
$conn = mysqli_connect("localhost","root","","employeesystem");
$checkid = "SELECT * FROM student WHERE studid = '$studid'";
$result = $conn->query($checkid);
/*query with rows*/
$checkid = "SELECT * FROM student WHERE studid = '$studid'";
$result = $conn->query($checkid);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$stud = $row['studname'];
}
}
?>
<!-- for table row display -->
<table style="width:100%">
<tr>
<th>empid</th>
<th>name</th>
<th colspan="3">combine</th>
</tr>
<?php while($row = mysqli_fetch_array($result)):?>
<tr>
<td><center><?php echo $row['studid'];?></center></td>
<td><center>view</center></td>
</tr>
<?php endwhile;?>
</table>

Update Selected Image Based on Checkbox check

I need to upload selected image but I don't have any idea to make it. Anyone could help me on this problem? Included code below. Thank you for helping in advance.
Test.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunction1(isChecked2){
$('.chckbox1').change( function() {
var isChecked2 = this.checked;
if(isChecked2) {
$(this).parents("tr:eq(0)").find(".product_img").prop("disabled",false);
} else {
$(this).parents("tr:eq(0)").find(".product_img").prop("disabled",true);}
})};
</script>
</head>
<body>
<form method="post" action="UPDATE.php">
<div class="row">
<div class="col-xs-4">
<table id="simple-table" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center">Select</th>
<th class="center">Product Image</th>
<th class="center">New Image</th>
</tr>
</thead>
<tbody>
<?php
//connect to database
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
//select table from database
mysql_select_db("MBTR", $con);
$result = mysql_query("SELECT * from maray_product_img WHERE product_id='P100044'");
//query resutl
$countrow = 1;
//read result
while($row = mysql_fetch_array($result))
{
$img_id=$row['img_id'];
$p_id = $row['product_id'];
$product_img_name = $row['product_img_name'];
$product_img = $row['product_img'];
$product_img_path = $row['product_img_path'];
//$product_quantity = $row['product_quantity'];
?>
<tr>
<td class="center" style="vertical-align:middle"> <input name="img_id[]" type="checkbox" id="check[]" class="chckbox1 ace" value="<?php echo $img_id;?>" onclick="myFunction1(this)"/><span class="lbl red"><input type="hidden" name="product_id[<?php echo $img_id;?>]" value="<?php echo $p_id;?>"></span><input type="hidden" name="product_img_name[<?php echo $img_id;?>]" value="<?php echo $product_img_name;?>"></td>
<td class="center"><img src="<?php echo $row['product_img_path'];?>" width="60" height="60"></td>
<td class="center" style="vertical-align:middle"><input type="file" name="product_img[<?php echo $img_id;?>]" id="product_img[]" class="product_img form-control" disabled></td>
</tr>
<?php
$countrow++;
}
?>
</tbody>
</table>
</div><!-- /.span -->
</div><!-- /.row -->
<button type="submit" name="submit">Update</button>
</form>
</body>
</html>
UPDATE.php
<?php
error_reporting(E_ALL & ~E_NOTICE);
include ("dbconfig.php");
require_once('auth.php');
$product_img_name=$_FILES["product_img"]["name"];
if((isset($_POST['img_id'])))
{
$rand = rand(5,987897899);
foreach($_POST["img_id"] as $imgId)
{
//$product_img_name= $_POST['product_img_name'][$imgId];
$tmpName = $_FILES['product_img_name']['tmp_name'][$imgId];
$imagetmp=addslashes (file_get_contents($tmpName));
$name=basename($_FILES['product_img_name']['name'][$imgId]);
$t_name=$_FILES['product_img']['tmp_name'][$imgId];
$dir='upload';
$new_name= date('dmY')."_".$product_code."_".$rand."_".$name;
if(move_uploaded_file($t_name,$dir."/".$new_name))
{
$query = mysql_query("UPDATE maray_product_img set product_img_name='$imagename',
product_img_path='upload/$imagename', product_img='$imagetmp' where img_id='$imgId' LIMIT 1");
echo "<script>alert ('Successfull! Data has been changed.')</script>";
echo "<script>window.location = 'test.php'</script>";
}
else
{
echo "<script>alert ('Failed to update. Please try again')</script>";
}
}
}
?>
Hope experts can help me on this. I'm new to PHP. Some of the code which I got from others. Really need help. Thank you in advance.

How to insert data into an existing html table in php?

I want to insert data which returns from the php code, into an existing html table (name = "userDetails").
Number of rows in the html table would be different according to the results receiving from the mysql database. How can I do that?
Code is as follows,
<?php
$connection = mysqli_connect('localhost', 'root', '', 'users');
$sql = "SELECT id, firstname,email FROM usertable";
$result = mysqli_query($connection, $sql);
$userDetailsArray = array();
if(mysqli_num_rows($result) > 0){
$index = 0;
while ($row = mysqli_fetch_assoc($result)) {
$userDataArray[$index] = $row;
$row = $userDataArray[$index];
$userID = $row['id'];
$firstName = $row['firstname'];
$email = $row['email'];
$index++;
}
}
?>
<html>
<head></head>
<body>
<table name = "userDetails">
<tr>
<th>User ID</th>
<th>First Name</th>
<th>email</th>
</tr>
</table>
</body>
<html/>

Looks like you're looking for something like this:
<html>
<head></head>
<body>
<table name = "userDetails">
<tr>
<th>User ID</th>
<th>First Name</th>
<th>email</th>
</tr>
<?php
$connection = mysqli_connect('localhost', 'root', '', 'users');
$sql = "SELECT id, firstname,email FROM usertable";
$result = mysqli_query($connection, $sql);
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_assoc($result)) {
echo '<tr>';
echo '<td>'. $row['id'] .'</td>';
echo '<td>'. $row['firstname'] .'</td>';
echo '<td>'. $row['email'] .'</td>';
echo '</tr>';
}
}
?>
</table>
</body>
<html/>
You can simply generate HTML in your while loop. Not the best possible strategy, but it certainly gives results.

using same page means it will work. try this
while ($row = mysqli_fetch_assoc($result))
{
$userDataArray[$index] = $row;
$row = $userDataArray[$index];
echo "<tr><td>".$row['id']."</td>";
echo "<td>".$row['firstname']."</td>"";
echo "<td>".$row['email']."</td></tr>"";
$index++;
}

what are the requirements of these lines in your code actualy?
$userDetailsArray = array();
$userDataArray[$index] = $row;
$row = $userDataArray[$index];
??and even what is the requirement of $index variable?
i am adding changes to you program here.
<?php
$connection = mysqli_connect('localhost', 'root', '', 'users');
?>
<html>
<head></head>
<body>
<table name = "userDetails">
<tr>
<th>User ID</th>
<th>First Name</th>
<th>email</th>
</tr>
<?php
$sql = "SELECT id, firstname,email FROM usertable";
$result = mysqli_query($connection, $sql);
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<td>$row['id'];</td>
<td>$row['firstname'];</td>
<td>$row['email'];</td>
</tr>
<?php
}
}
else
{
?>
<tr>
<td colspan=3>Data is not available</td>
</tr>
<?php
}
?>
</table>
</body>
<html/>

Develop Reference

JavaScript is the programming language of the Web.

how to add individual column search in datatable - javascript

Related

Filtering db table by date

create validation for offset in importing csv file in mysql and php

How to get value from input without submitting and search it from datalist

Update Selected Image Based on Checkbox check

How to insert data into an existing html table in php?

Categories

Resources