Created
July 18, 2013 17:51
-
-
Save phpfiddle/6031406 to your computer and use it in GitHub Desktop.
[ Posted by Rahul ] live edit ajax pagination with sorting
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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