Skip to content

Instantly share code, notes, and snippets.

@phpfiddle
Created July 18, 2013 17:51
Show Gist options
  • Save phpfiddle/6031406 to your computer and use it in GitHub Desktop.
Save phpfiddle/6031406 to your computer and use it in GitHub Desktop.
[ Posted by Rahul ] live edit ajax pagination with sorting
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- This is a pagination script using Jquery, Ajax and PHP
The enhancements done in this script pagination with first,last, previous, next buttons -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Live Edit, Pagination and Delete Records with Jquery</title>
<link href="css_pagination.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a.sort_col
{
text-decoration:none;
}
a.sort_col_desc
{
background: url("images/arrow_down.png") no-repeat scroll right center transparent;
text-decoration:none;
}
a.sort_col_asc
{
background: url("images/arrow_up.png") no-repeat scroll right center transparent;
text-decoration:none;
}
a.sort_col_none
{
background: url("images/arrow_up_down.png") no-repeat scroll right center transparent;
text-decoration:none;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function()
{
$(".delete").live('click',function()
{
var id = $(this).attr('id');
var b=$(this).parent().parent();
var dataString = 'id='+ id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "delete_ajax.php",
data: dataString,
cache: false,
success: function(e)
{
b.hide();
e.stopImmediatePropagation();
}
});
return false;
}
});
$(".edit_td").live('dblclick',function()
{
var elem_td = $(this);
var myspan = $(elem_td).find('span.myspan_for_edit');
//alert('myspan = '+myspan);
//alert('myspan_id = '+myspan.attr('id'));
var mytext = $(elem_td).find('input.mytext_for_edit');
//show textbox and hide span
mytext.show();
myspan.hide();
var mytext_id = mytext.attr('id');
//alert('mytext_id = '+mytext_id);
/*mytext_id.live('change',function(e)
{
alert('chenged');
});
var ID=$(this).attr('id');
$("#one_"+ID).hide();
$("#two_"+ID).hide();
$("#three_"+ID).hide();
$("#four_"+ID).hide();
$("#one_input_"+ID).show();
$("#two_input_"+ID).show();
$("#three_input_"+ID).show();
$("#four_input_"+ID).show();*/
}).live('change',function(e)
{
//alert('changed12');
var elem_td = $(this);
var myspan = $(elem_td).find('span.myspan_for_edit');
//alert('myspan = '+myspan);
//alert('myspan_id = '+myspan.attr('id'));
var mytext = $(elem_td).find('input.mytext_for_edit');
//After changing the value hide textbox and show the span
var mytext_id = mytext.attr('id');
//alert('mytext_id = '+mytext_id);
var arr = mytext_id.split('_seprtr_');
var fst_prt = arr[0];
var scnd_prt = arr[1];
//alert('fst_prt = '+fst_prt+' and scnd_prt = '+scnd_prt);
//alert('scnd_prt = '+scnd_prt);
var tmp_arr1 = fst_prt.split('_UniqueIdValIs_');
var unique_col_name = tmp_arr1[0];
var unique_col_value = tmp_arr1[1];
var tmp_arr2 = scnd_prt.split('ColNameIs_');
//alert('tmp_arr2 = '+tmp_arr2);
var changed_col_name = tmp_arr2[1];
var changed_col_new_val = mytext.val();
//alert('update set '+changed_col_name+' = '+changed_col_new_val+' where '+unique_col_name+' = '+unique_col_value);
//alert('new value = '+new_value);
//var dataString = 'id='+ ID +'&name='+one_val+'&category='+two_val+'&price='+three_val+'&discount='+four_val;
if(changed_col_new_val == "" || changed_col_new_val.length <= 0)
{
alert('Please enter something');
mytext.show();
myspan.hide();
}
else if(changed_col_new_val.length > 0)
{
$.ajax({
type: "POST",
url: "load_data_new.php",
data: "updateData=updateData&unique_col_name="+unique_col_name+"&unique_col_value="+unique_col_value+"&changed_col_name="+changed_col_name+"&changed_col_new_val="+changed_col_new_val,
cache: false,
success: function(e)
{
mytext.hide();
myspan.show();
$(myspan).html(changed_col_new_val);
$(mytext).val(changed_col_new_val);
e.stopImmediatePropagation();
}
});
}
});
// Edit input box click action
$(".mytext_for_edit").live("mouseup",function(e)
{
e.stopImmediatePropagation();
});
// Outside click action
$(document).mouseup(function()
{
//on clicking on the other part of the document after editing the textbox content : hide the textbox and show the span
$(".mytext_for_edit").hide();
$(".myspan_for_edit").show();
});
function hideElements()
{
//alert('called');
$(".mytext_for_edit").hide();
$(".myspan_for_edit").show();
}
//Pagination
function loading_show()
{
$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide()
{
$('#loading').fadeOut('fast');
}
///For sorting data column-wise
$(".sort_col_none").live('click',function()
{
var sort_col_name = $(this).attr('id');
//alert(".sort_col_none .click ="+sort_col_name);
$('#sort_col_name').val(sort_col_name);
$(this).addClass('sort_col_asc');
$(this).removeClass('sort_col_none');
$('#sort_col_order').val('asc');
loadData(1);
});
$(".sort_col_asc").live('click',function()
{
var sort_col_name = $(this).attr('id');
$('#sort_col_name').val(sort_col_name);
$(this).removeClass('sort_col_asc');
$(this).addClass('sort_col_desc');
$('#sort_col_order').val('desc');
loadData(1);
});
$(".sort_col_desc").live('click',function()
{
var sort_col_name = $(this).attr('id');
$('#sort_col_name').val(sort_col_name);
$(this).addClass('MyClass');
$('#sort_col_order').val('asc');
loadData(1);
});
function loadData(page)
{
var sort_col_name = $('#sort_col_name').val();
var sort_col_order = $('#sort_col_order').val();
if(sort_col_name == "")
{
var dataString = "page="+page;
}
else
{
var dataString = "page="+page+"&sortColumn=sortColumn&sort_col_name="+sort_col_name+"&sort_col_order="+sort_col_order;
}
loading_show();
$.ajax
({
type: "POST",
url: "load_data_new.php",
data: dataString,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
hideElements();
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function()
{
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function()
{
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
});
</script>
</head>
<body>
<h1>Double-click on a cell value to edit</h1>
<input type="hidden" id="sort_col_name" name="sort_col_name" />
<input type="hidden" id="sort_col_order" name="sort_col_order" />
<div id="loading"></div>
<div id="container"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment