hey guys I need some help please guide me where I am doing wrong in coding. This is table of showing record of users
I want pagination operation and search operation on my index.php file. Pagination is working but when I am type a single letter (example: a or Haris) on search bar then show me message that data not found this is message showing when type a username on search bar
This my ajax function that on index.php file I am pagination or search
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"search.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#message').keyup(function(){
var srch = $(this).val();
if(srch != '')
{
load_data(srch);
}
else
{
load_data();
}
});
function load_data(page)
{
$.ajax({
url:"search.php",
method:"GET",
data:{page:page},
success:function(data){
$('#pagination_data').html(data);
}
})
}
$(document).on('click', '.pagination_link', function(){
var page = $(this).attr("id");
load_data(page);
});
});
</script>
This my search.php file
<?php
include("common/config.php");
$output = '';
if(isset($_POST["query"]))
{
$search = $_POST["query"];
$where = "id LIKE '%".$search."%'
OR name LIKE '%".$search."%'
OR email LIKE '%".$search."%'
OR phone LIKE '%".$search."%'";
$query = $db->select(array("*"),"user","$where","","id desc","");
}
else
{
$limit = 5;
$page = '';
if (isset($_GET["page"] ))
{
$page = $_GET["page"];
}
else
{
$page=1;
}
$record_index= ($page-1) * $limit;
$query = $db->select(array("*"),PREFIX."user", "", "", "id desc", "$record_index, $limit");
}
if($query)
{
$output .= '
<div class="table-responsive">
<table class="table table bordered">
<tr>
<th style="text-align: center !important;"><input type="checkbox" name="select_all" id="select_all" value=""/></th>
<th style="text-align: center !important;">ID</th>
<th style="text-align: center !important;">Name</th>
<th style="text-align: center !important;">Email</th>
<th style="text-align: center !important;">Phone</th>
<th colspan="4" style="text-align: center !important;">Action</th>
</tr>
';
foreach($query as $row)
{
$output .= '
<tr align="center">
<td align="center"><input type="checkbox" name="checked_id[]"
class="checkbox" value="'.$row->id.'"/></td>
<td>'.$row->id.'</td>
<td>'.$row->name.'</td>
<td>'.$row->email.'</td>
<td>'.$row->phone.'</td>
<td>Edit</td>
<td><a onclick="return confirm(\'Are you sure to delete?\')"
href="del.php?del='.$row->id.'">Delete</a></td>
</tr>';
}
$output .= '</table><br /><div align="center">';
$total_pages = ceil($db->countfields("*","user") / $limit);
for($i=1; $i<=$total_pages; $i++)
{
$output .= "<span class='pagination_link' style='cursor:pointer; padding:6px; border:1px solid #ccc;' id='".$i."'>".$i."</span>";
}
$output .= '</div><br /><br />';
echo $output;
}
else
{
echo 'Data Not Found';
}
?>
When I am change the name of function,pagination is working but its still search a user record not working.
<script>
$(document).ready(function(){
load_data_1();
load_data_2();
function load_data_1(query)
{
$.ajax({
url:"search.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#message').keyup(function(){
var srch = $(this).val();
if(srch != '')
{
load_data(srch);
}
else
{
load_data_1();
}
});
function load_data_2(page)
{
$.ajax({
url:"search.php",
method:"GET",
data:{page:page},
success:function(data){
$('#pagination_data').html(data);
}
})
}
$(document).on('click', '.pagination_link', function(){
var page = $(this).attr("id");
load_data_2(page);
});
});
</script>
I don't see from your code what "PREFIX" is, but in the search query it is missing while it is present in the pagination query. Hope it helps
Related
Good day! Lately, it's been a problem for me that my HTML inputs/divs are being put to Controller. I'm looking for a solution how can I transfer my fields / inputs to the view so that I'll just call them to the view to controller. and so I can use my code easily. thank you
here is my Controller - As you can see there are still divs there, so I just want to put them to controller.
function fetch()
{
$output = '';
$query = '';
$this->load->model('level_model');
if($this->input->post('query'))
{
$query = $this->input->post('query');
}
$data = $this->level_model->fetch_data($query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered table-striped">
<tr>
<th>Courses Year</th>
</tr>
';
if($data->num_rows() > 0)
{
foreach($data->result() as $row)
{
$output .= '
<tr>
<td>'.$row->course_year.'</td>
</tr>
';
}
}
else
{
$output .= '<tr>
<td colspan="5">No Data Found</td>
</tr>';
}
$output .= '</table>';
echo $output;
}
and my View
<input type="text" name="search_text" id="search_text" class="form-control">
<div id="result"></div>
Ajax:
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"<?php echo base_url(); ?>levels/fetch",
method:"POST",
data:{query:query},
success:function(data){
$('#result').html(data);
}
})
}
$('#search_text').change(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
<script>
Use view files for HTML contents.
Use something like this
$htmlcontent = $this->load->view('viewfile', $data, true);
echo $htmlcontent;
exit();
this code,i have done searching through enroll number. All code are correct and running properly but when match data are not found. No message shown .so, i want to show a message when match data are not found like that "No Such Data Found".
How can i do this? please help to solve that problem,
My code is below.
index.php
<!DOCTYPE html>
<html>
<head>
<title>How to return JSON Data from PHP Script using Ajax Jquery</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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#result {
position: absolute;
width: 100%;
max-width:870px;
cursor: pointer;
overflow-y: auto;
max-height: 400px;
box-sizing: border-box;
z-index: 1001;
}
.link-class:hover{
background-color:#f1f1f1;
}
</style>
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center">How to return JSON Data from PHP Script using Ajax Jquery</h2>
<h3 align="center">Search Employee Data</h3><br />
<div class="row">
<div class="col-md-4">
<input type="text" name="employee_list" id="employee_list" class="form-control">
</div>
<div class="col-md-4">
<button type="button" name="search" id="search" class="btn btn-info">Search</button>
</div>
</div>
<br />
<div class="table-responsive" id="employee_details" style="display:none">
<table class="table table-bordered">
<tr>
<td width="10%" align="right"><b>Name</b></td>
<td width="90%"><span id="name"></span></td>
</tr>
<tr>
<td width="10%" align="right"><b>Address</b></td>
<td width="90%"><span id="address"></span></td>
</tr>
<tr>
<td width="10%" align="right"><b>Gender</b></td>
<td width="90%"><span id="total_marks"></span></td>
</tr>
<tr>
<td width="10%" align="right"><b>Designation</b></td>
<td width="90%"><span id="email"></span></td>
</tr>
<tr>
<td width="10%" align="right"><b>Age</b></td>
<td width="90%"><span id="ph"></span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#search').click(function(){
var enroll= $('#employee_list').val();
if(enroll != '')
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{enroll:enroll},
dataType:"JSON",
success:function(data)
{
if(data.length != 0){
$('#employee_details').css("display", "block");
$('#name').text(data.name);
$('#address').text(data.address);
$('#total_marks').text(data.total_marks);
$('#ph').text(data.ph);
$('#email').text(data.email);
}
else { alert("Please Select Employee"); }
}
})
}
else
{
alert("Please Select Employee");
$('#employee_details').css("display", "none");
}
});
});
</script>
fetch.php
<?php
//fetch.php
if(isset($_POST["enroll"]))
{
$connect = mysqli_connect("localhost", "root", "", "aviation");
$query = "SELECT * FROM student WHERE enroll = '".$_POST["enroll"]."'";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result)>0)
{
while($row = mysqli_fetch_array($result))
{
$data["name"] = $row["name"];
$data["address"] = $row["address"];
$data["total_marks"] = $row["total_marks"];
$data["email"] = $row["email"];
$data["ph"] = $row["ph"];
}
echo json_encode($data);
}
}
?>
In your PHP code, you seam to use a loop to fetch database rows. But your PHP Code acts like you only receive 1 row on data.
Ill consider for the moment that you only will get 1 row of data unless you specify otherwise.
You already check if mysql returns 1 or more results.
So, all we need is a variable that tells you if a results has been found.
Example:
<?php
$output = array(
'result' => 0
);
if (isset($_POST["enroll"])) {
$connect = mysqli_connect("localhost", "root", "", "aviation");
$query = "SELECT name,address,total_marks,email,ph FROM student WHERE enroll = '" . $_POST["enroll"] . "'";
$result = mysqli_query($connect, $query);
if (mysql_num_rows($result) == 1) {
$output['row'] = mysqli_fetch_array($result);
$output['result'] = 1;
}
}
echo json_encode($output);
Then, if your javascript code, you only have to test if the data.result is equal to 1 or 0 and act accordingly. Example:
<script>
$(document).ready(function () {
$('#search').click(function () {
var enroll = $('#employee_list').val();
if (enroll != '')
{
$.ajax({
url: "fetch.php",
method: "POST",
data: {enroll: enroll},
dataType: "JSON",
success: function (data)
{
if(data.result == 1){
$('#employee_details').css("display", "block");
$('#name').text(data.row.name);
$('#address').text(data.row.address);
$('#total_marks').text(data.row.total_marks);
$('#ph').text(data.row.ph);
$('#email').text(data.row.email);
}
else{
alert("No Such Data Found");
}
}
})
} else
{
alert("Please Select Employee");
$('#employee_details').css("display", "none");
}
});
});
</script>
Edit: be carefull, you should also sanitise the POST variable before using it in your mysql query
you could just add
error: function(){
alert('No Such Data Found!');
}
after the success:function(data)
so your ajax call would be like :
$.ajax({
url:"fetch.php",
method:"POST",
data:{enroll:enroll},
dataType:"JSON",
success:function(data)
{
if ($.trim(data)){
$('#employee_details').css("display", "block");
$('#name').text(data.name);
$('#address').text(data.address);
$('#total_marks').text(data.total_marks);
$('#ph').text(data.ph);
$('#email').text(data.email);}
else{alert('No Such Data Found!')}
},
error: function(){
alert('error !');
}
or add an else in your php code that return a false if result is empty :
if(mysql_num_rows($result)>0)
{
while($row = mysqli_fetch_array($result))
{
//code ......
}
echo json_encode($data);
}else {
return false;
}
then your ajax call would be like :
$.ajax({
url:"fetch.php",
method:"POST",
data:{enroll:enroll},
dataType:"JSON",
success:function(data)
{
if(data != false){
$('#employee_details').css("display", "block");
$('#name').text(data.name);
$('#address').text(data.address);
$('#total_marks').text(data.total_marks);
$('#ph').text(data.ph);
$('#email').text(data.email);}else{alert('No Such Data Found!');}
}
I have four different files
index.php
select.php
insert.php
edit.php
delete.php
In my backend I have created a database named 'ecc'
Database 'ecc' has atable named 'task'
The table task has following fields
id, name, category, cost
Datatype for id set to int and index as primary also id field is on auto increment
My Issue:My code is only displaying 'Live Table Data'.
It would be grate if someone rewrite it or suggest some changes.
index.php
<html>
<head>
<title>Live Table Data Edit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<h3 align="center">Live Table Add Edit Delete using Ajax Jquery in PHP Mysql</h3><br />
<div id="live_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '#btn_add', function(){
var name = $('#name').text();
var category = $('#category').text();
var cost = $('#cost').text();
if(name == '')
{
alert("Enter Service Name");
return false;
}
if(category == '')
{
alert("Enter Category of Service");
return false;
}
if(cost == '')
{
alert("Enter cost");
return false;
}
$.ajax({
url:"insert.php",
method:"POST",
data:{name:name, category:category, cost:cost},
dataType:"text",
success:function(data)
{
alert(data);
fetch_data();
}
})
});
function edit_data(id, text, column_name)
{
$.ajax({
url:"edit.php",
method:"POST",
data:{id:id, text:text, column_name:column_name},
dataType:"text",
success:function(data){
alert(data);
}
});
}
$(document).on('blur', '.name', function(){
var id = $(this).data("id1");
var name = $(this).text();
edit_data(id, name, "name");
});
$(document).on('blur', '.category', function(){
var id = $(this).data("id2");
var category = $(this).text();
edit_data(id,category, "category");
$(document).on('blur', '.cost', function(){
var id = $(this).data("id3");
var category = $(this).text();
edit_data(id,cost, "cost");
});
$(document).on('click', '.btn_delete', function(){
var id=$(this).data("id4");
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
url:"delete.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
alert(data);
fetch_data();
}
});
}
});
});
</script>
select.php
<?php
$connect = mysqli_connect("localhost", "root", "", "ecc");
$output = '';
$sql = "SELECT * FROM task ORDER BY id DESC";
$result = mysqli_query($connect, $sql);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="40%">First Name</th>
<th width="40%">Last Name</th>
<th width="10%">Delete</th>
</tr>';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="name" data-id1="'.$row["id"].'" contenteditable>'.$row["name"].'</td>
<td class="category" data-id2="'.$row["id"].'" contenteditable>'.$row["category"].'</td>
<td class="cost" data-id3="'.$row["id"].'" contenteditable>'.$row["cost"].'</td>
<td><button type="button" name="delete_btn" data-id4="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="name" contenteditable></td>
<td id="category" contenteditable></td>
<td id="cost" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>
';
}
else
{
$output .= '<tr>
<td colspan="4">Data not Found</td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>
insert.php
<?php
$connect = mysqli_connect("localhost", "root", "", "test_db");
$sql = "INSERT INTO tbl_sample(name, category, cost) VALUES('".$_POST["name"]."', '".$_POST["category"]."', '".$_POST["cost"]."')";
if(mysqli_query($connect, $sql))
{
echo 'Data Inserted';
}
?>
edit.php
<?php
$connect = mysqli_connect("localhost", "root", "", "ecc");
$id = $_POST["id"];
$text = $_POST["text"];
$column_name = $_POST["column_name"];
$sql = "UPDATE task SET ".$column_name."='".$text."' WHERE id='".$id."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Updated';
}
?>
delete.php
<?php
$connect = mysqli_connect("localhost", "root", "", "ecc");
$sql = "DELETE FROM task WHERE id = '".$_POST["id"]."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Deleted';
}
?>
you can use data tables for this, no need of all this
https://editor.datatables.net/examples/inline-editing/simple
check this, data tables provide libraries for this
I'm trying to make an addition (or subtraction if needed) to a php page with ajax.
What this code is supposed to do is add all the prices up and give me the correct sum with the live-edit-table.
if a user changes the value of price $price_total should change acordingly.
Even if a new row is added it should still give the new sum (displayed in $price_total and $final_price_total) with the new row included.
I have been trying to figure out how to do this but I can't figure out how.
$price_total and $final_price_total do not get saved into a database
this is the code that I have so far:
index.php
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<div id="live_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data(){
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
function formatDecimal(val, n) {
n = n || 2;
var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
while (str.length <= n) {
str = "0" + str;
}
var pt = str.length - n;
return str.slice(0,pt) + "." + str.slice(pt);
}
fetch_data();
function edit_data(id, text, column_name){
$.ajax({
url:"edit.php",
method:"POST",
data:{
id:id,
text:text,
column_name:column_name
},
dataType:"text",
success:function(data){
/*alert(data);*/
}
});
}
$(document).on('click', '#btn_add', function(){
/* this function would also add the prices to the table*/
var price = $('#price').text();
var final_price = $('#final_price').text();
if(price == ''){
alert("Enter Price");
return false;
}
if(final_price == ''){
alert("Enter Final Price");
return false;
}
$.ajax({
url:"insert.php",
method:"POST",
data:{price:price, final_price:final_price},
dataType:"text",
success:function(data){
alert(data);
fetch_data();
}
})
});
$(document).on('blur', '.price', function(){
var id = $(this).data("id1");
var price = $(this).text();
edit_data(id, price, "price");
/*I'm trying so that I can add the new input price with the old total to give the exact value*/
$total = parseFloat( price ) + parseFloat( $('#price_total').value );
$('#price_total').value = formatDecimal(total);
});
$(document).on('blur', '.final_price', function(){
var id = $(this).data("id2");
var final_price = $(this).text();
edit_data(id, final_price, "final_price");
});
});
select.php
<?php
$connect = mysqli_connect("localhost", "root", "", "test_db");
$output = '';
$sql = "SELECT * FROM tbl_sample ORDER BY id DESC";
$result = mysqli_query($connect, $sql);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="40%">Price</th>
<th width="40%">Final Price</th>
<th width="10%">Delete</th>
</tr>';
if(mysqli_num_rows($result) > 0){
$final_price_total = 0;
$price_total = 0;
while($row = mysqli_fetch_array($result)){
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="price" data-id1="'.$row["id"].'" contenteditable>'.$row["price"].'</td>
<td class="final_price" data-id2="'.$row["id"].'" contenteditable>'.$row["final_price"].'</td>
<td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>
';
$final_price_total += $row["final_price"];
$price_total += $row["price"];
}
$output .= '
<tr>
<td></td>
<td class="price_total" id="price_total" name="price_total" value="'.$price_total.'" contenteditable>'.$price_total.'</td>
<td class="final_price_total" id="final_price_total" name="final_price_total" value="'.$final_price_total.'" contenteditable>'.$final_price_total.'</td>
<td></td>
</tr>
';
$output .= '
<tr>
<td></td>
<td id="price" contenteditable></td>
<td id="final_price" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>
';
}
else{
$output .= '<tr>
<td colspan="4">Data not Found</td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>
From the little discussion in the question comments, I've managed to spot this variable typo:
$total = parseFloat( price ) + parseFloat( $('#price_total').value );
$('#price_total').value = formatDecimal(total);
On the second line you are using total instead of $total.
If you check your browser's error console, you will see an error about undeclared variable total.
Edit: after further discussion, you wanted to know how to loop over the table in JavaScript and add up the total. Try this:
var newTotal = 0.0;
$('.price').each(function() {
newTotal += parseFloat($(this).text());
});
If you do this on your edit finding, you can then use the newTotal variable in the final_price field in place of where you are using the $total variable.
I have a basic table (data simplified to attempt to locate problem) which uses jquery .ajax in order to allow data to be inputted, deleted and modified live. This used to work fine however I have recently moved over to PDO instead of mysqli and subsequently converted this code, however it is not working as intended. The fetch_data() function I have created doesn't get the most recent inserted (even after a refresh + it IS in database) meaning the data is incomplete. Wondering if anyone could help.
EDIT 1: Just to be clear, it is only the latest data entry which does not appear, even once the page has been refreshed. That data entry does show however once another new entry has been inputted. (so there is like a buffer of 1 entry before it shows on the table)
index.php
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '#btn_add', function(){
var first_name = $('#first_name').text();
var last_name = $('#last_name').text();
if(first_name == '')
{
alert("Enter First Name");
return false;
}
if(last_name == '')
{
alert("Enter Last Name");
return false;
}
$.ajax({
url:"insert.php",
method:"POST",
data:{first_name:first_name, last_name:last_name},
dataType:"text",
success:function(data)
{
alert(data);
fetch_data();
}
})
});
function edit_data(id, text, column_name)
{
$.ajax({
url:"edit.php",
method:"POST",
data:{id:id, text:text, column_name:column_name},
dataType:"text",
success:function(data){
alert(data);
}
});
}
$(document).on('blur', '.first_name', function(){
var id = $(this).data("id1");
var first_name = $(this).text();
edit_data(id, first_name, "first_name");
});
$(document).on('blur', '.last_name', function(){
var id = $(this).data("id2");
var last_name = $(this).text();
edit_data(id,last_name, "last_name");
});
$(document).on('click', '.btn_delete', function(){
var id=$(this).data("id3");
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
url:"delete.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
alert(data);
fetch_data();
}
});
}
});
});
select.php
$dbc = new PDO("mysql:host=".DBHOST.";port=3306;dbname=".DBNAME, DBUSER, DBPASS);
$dbc->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$output = '';
$dbq = $dbc->prepare('SELECT * FROM tbl_sample ORDER BY id DESC');
$dbq->execute();
$dbq->fetch(PDO::FETCH_ASSOC);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="40%">First Name</th>
<th width="40%">Last Name</th>
<th width="10%">Delete</th>
</tr>';
if($dbq->fetchColumn() > 0)
{
while($row = $dbq->fetch(PDO::FETCH_ASSOC))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="first_name" data-id1="'.$row["id"].'" contenteditable>'.$row["first_name"].'</td>
<td class="last_name" data-id2="'.$row["id"].'" contenteditable>'.$row["last_name"].'</td>
<td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>
';
}
else
{
$output .= '
<tr>
<td colspan="4">Data not Found</td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;