showdata function not working - php

Question

I am new in php and ajax.
When I load data without pagination code it will display properly, but when I merge two data it will not work. As per my understanding my show data function is not working.
This is my code.
index.php
<?php
include 'dbconfig.php';
if(isset($_POST['deletes'])) {
$sql=mysql_query("delete from tbl_employees where emp_id='{$_POST['id']}'");
if($sql)
{
echo 'success delete';
}
}
if(isset($_POST['update'])) {
$sql="update tbl_employees SET emp_name='{$_POST['upfname']}',
emp_lname='{$_POST['uplname']}',
emp_email='{$_POST['upemail']}',
emp_phno= '{$_POST['upphno']}' where emp_id='{$_POST['upid']}'";
$ures= mysql_query($sql);
if($ures)
{
echo "sucessupdate";
}
}
if(isset($_POST['editvalue'])) {
$sql="select * from tbl_employees where emp_id='{$_POST['id']}'";
$eres=mysql_query($sql);
$erow= mysql_fetch_array($eres);
header("content-type:text/x-json");
echo json_encode($erow);
exit();
}
if(isset($_POST['buttonsave'])) {
$query="INSERT INTO tbl_employees( emp_name, emp_lname, emp_email, emp_phno) VALUES ('{$_POST['fname']}','{$_POST['lname']}','{$_POST['email']}','{$_POST['phno']}')";
$res= mysql_query($query);
if($res)
{
echo 'success';
}
exit();
}
if(isset($_POST['showtabledata'])) {
$sql="select * from tbl_employees";
$rsd=mysql_query($sql);
while($row = mysql_fetch_array($rsd)) {
$eid = $row['emp_id'];
$fname = $row['emp_name'];
$lname = $row['emp_lname'];
$email = $row['emp_email'];
$phno=$row['emp_phno'];
?>
<table border="1">
<tr>
<!--<td><?php //echo $eid; ?></td>-->
<td><?php echo $fname; ?></td>
<td><?php echo $lname; ?></td>
<td><?php echo $email; ?></td>
<td><?php echo $phno; ?></td>
<td><a ide=<?php echo $eid; ?> class='edit' href='#?ide=<?php echo $eid; ?>'>EDIT</a></td>
<td> <a idd=<?php echo $eid; ?> class='delete' href='#?idd=<?php echo $eid; ?>'>DELETE</a></td>
</tr>
<?php
}
?>
</table>
<?php
}
?>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript" src="newajax.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<!--<script type="text/javascript" src="pagination.js"></script>-->
<div id="container">
<form method="post" id="reg-form">
<table border="0">
<tr>
<td><input type="hidden" name="id" id="id" /></td>
</tr>
<tr>
<td><input type="text" name="fname" id="fname" placeholder="First Name" value="<?php echo $erow[1] ?>" required/></td>
</tr>
<tr>
<td><input type="text" name="lname" id="lname" placeholder="Last Name" value="<?php echo $erow[2] ?>"required/></td>
</tr>
<tr>
<td><input type="text" name="email" id="email" placeholder="Your Mail" value="<?php echo $erow[3] ?>" /></td>
</tr>
<tr>
<td><input type="text" name="phno" id="phno" placeholder="Contact No" value="<?php echo $erow[4] ?>" /></td>
</tr>
<tr>
<td><hr /></td>
</tr>
<tr>
<td align="center"><button type="submit" id="save" name="save">Register</button></td>
</tr>
<tr>
<td align="center"><button type="submit" id="update" name="update">Update</button></td>
</tr>
</table>
</form>
</div>
<div>
<table border="1">
<thead>
<!--<th>id</th>-->
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phno</th>
<th colspan="2">Action</th>
</thead>
<tbody id="showdata">
</tbody>
</table>
</div>
data.php
<?php
include('dbconfig.php');
$shw=$_POST['showdata'];
$per_page = 3;
if($_GET) {
$page=$_GET['page'];
}
//$page=1;
//getting table contents
if(isset($_POST['showdata'])) {
$start = ($page-1)*$per_page;
$sql = "select * from tbl_employees order by emp_id limit $start,$per_page";
$rsd = mysql_query($sql);
?>
<center>
<table id="tbl" align="center">
<!--<th><b>Id</b></th>-->
<th><b>FirstName</b></th>
<th><b>LastName</b></th>
<th><b>Email</b></th>
<th><b>Phno.</b></th>
<th colspan="2">Action</th>
<?php
while($row = mysql_fetch_array($rsd))
{
$id = $row['emp_id'];
$fname = $row['emp_name'];
$mname = $row['emp_lname'];
$lname = $row['emp_email'];
$phno=$row['emp_phno'];
?>
<tr>
<!--<td><?php// echo $id; ?></td>-->
<td><?php echo $fname; ?></td>
<td><?php echo $mname; ?></td>
<td><?php echo $lname; ?></td>
<td><?php echo $phno; ?></td>
<!--<td><?php //echo $lname; ?></td>-->
<td><a ide=<?php echo $id; ?> class='edit' href='#?ide=<?php echo $id; ?>'>EDIT</a></td>
<td> <a idd=<?php echo $id; ?> class='delete' href='#?idd=<?php echo $id; ?>'>DELETE</a></td>
</tr>
<?php
} //End while
?>
</table>
</center>
<style>
#tbl
{
width:800px;
border:1px solid #98bf21;
margin-top:50px;
}
/*#tbl tr:nth-child(odd) {
background: #00a2d1
}*/
#tbl td{
border:1px solid #00a2d1
}
#tbl th
{
background: #00a2d1;
border:1px solid #00a2d1
}
</style>
<?php
}
ajax.js
$(document).ready(function(){
function Display_Load() {
//$("#loading").fadeIn(100);
//$("#loading").html("<img src='ajax-loader.gif' />");
}
//Hide Loading Image
function Hide_Load() {
//$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084','border' : 'none'});
$("#content").load("data.php?page= 1");
$('#update').hide();
$("#reg-form").validate({
rules: {
fname:{
required:true
},
lname:{
required:true
},
email:{
required:true,
email:true
},
phno:{
required:true,
number:true,
minlength: 10,
maxlength: 10
},
},
messages: {
fname:"please enter first name",
lname:"plese enter your surname",
email:"please enter valid email address",
phno:{
required:"please enter your phno",
minlength:"ph no should be min 10 digit",
maxlength:"ph no should be max 10 digit"
}
},
// //submitHandler: submit
});
// $('#update').click(function(){
$(document).on('click','#update',function(){
$('#save').show();
$('#update').hide();
var eid=$('#id').val();
var ename=$('#fname').val();
var elname=$('#lname').val();
var eemail=$('#email').val();
var ephno=$('#phno').val();
$.ajax({
url:"index.php",
type:"POST",
async:false,
data:{
update:1,
upid:eid,
upfname:ename,
uplname:elname,
upemail:eemail,
upphno:ephno
},
success:function(up){
alert("success");
$('input[type=text]').val('');
//window.location.reload();
//document.getElementById("reg-form").reset();
showtabledata();
}
});
});
$('body').delegate('.delete','click',function(){
var IDdelete=$(this).attr('idd');
var test= window.confirm("are you sure you want to delete")
if(test)
{
{
$.ajax({
url:"index.php",
type:"POST",
async:false,
data:{
deletes:1,
id:IDdelete
},
success:function(){
alert("delete success");
alert(deletes);
//window.location.reload();
showtabledata();
}
});
}
}
});
// $('body').delegate('.edit','click',function(){
$(document).on('click','.edit',function(){
$('#save').hide();
$('#update').show();
var IDedit=$(this).attr('ide');
$.ajax({
url:"index.php",
type:"POST",
datatype:"JSON",
data:{
editvalue:1,
id :IDedit
},
success:function(show)
{
$('#id').val(show.emp_id),
$('#fname').val(show.emp_name);
$('#lname').val(show.emp_lname);
$('#email').val(show.emp_email);
$('#phno').val(show.emp_phno);
}
});
});
// $('#save').click(function(){
$(document).on('submit', '#reg-form', function(){
var firstname=$('#fname').val();
var lastname=$('#lname').val();
var emailadd=$('#email').val();
var phnum=$('#phno').val();
$.ajax({
url:"index.php",
type:"POST",
async:false,
data:{
buttonsave:1,
fname:firstname,
lname:lastname,
email:emailadd,
phno:phnum
},
success:function(result)
{
alert("success");
alert(result);
showtabledata();
}
});
});
$("#pagination li").click(function(){
//Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("data.php?page=" + pageNum);
});
});
function showtabledata()
{
//var showdata=1;
$.ajax({
url:"data.php",
type:"POST",
async:false,
data:{
showdata:1
},
success:function(re)
{
//alert(re);
// $('#showdata').html(re);
}
});
//$("#load").load("/load.php") ;
}
Data doesn't display without load.
Please some give suggestion.