PHP CRUD with Search and Pagination using jQuery AJAX

This tutorial is for doing database CRUD operations with search and pagination feature by using jQuery and AJAX. In previous tutorial we have seen the CRUD,search and pagination without AJAX.

In this example we are creating jQuery AJAX functions for sending CRUD action request. With this request we are passing the AJAX parameters containing search keyword and current page information.

Download

jQuery AJAX Search and Pagination

We are having this function for handling database search and per-page navigation.

function getresult(url) {    
$.ajax({
	url: url,
	type: "POST",
	data:  {rowcount:$("#rowcount").val(),name:$("#name").val(),code:$("#code").val()},
	success: function(data){ $("#toys-grid").html(data); $('#add-form').hide();}
   });
}

In this function we are sending total rows for creating pagination links. We are also sending the search keywords corresponding to the name and code column of the database.

In PHP page, these jQuery AJAX parameters are used to create HTML for listing database results as,

2014-11-01_23-58-34

jQuery Add Modify Delete Functions

We are having separate add, modify, delete functions using jQuery to access database via AJAX.

function add() {
var valid = validate();
if(valid) {
	$.ajax({
		url: "add.php",
		type: "POST",
		data:  {name:$("#add-name").val(),code:$("#add-code").val(),category:$("#category").val(),price:$("#price").val(),stock_count:$("#stock_count").val()},
		success: function(data){ getresult("getresult.php"); }
	   });
	}
}
function showEdit(id) {
	$.ajax({
		url: "show_edit.php?id="+id,
		type: "POST",
		success: function(data){ $("#toy-"+id).html(data); }
   });
}
function edit(id) {
var valid = validate();
if(valid) {
	$.ajax({
		url: "edit.php?id="+id,
		type: "POST",
		data:  {name:$("#add-name").val(),code:$("#add-code").val(),category:$("#category").val(),price:$("#price").val(),stock_count:$("#stock_count").val()},
		success: function(data){ $("#toy-"+id).html(data); }
	   });
	}
}	
function del(id) {
$.ajax({
	url: "delete.php?id="+id,
	type: "POST",
	success: function(data){ $("#toy-"+id).html(''); }
   });
}

We are getting form inputs for creating data-string to be passed to the PHP file. In add() and edit() functions we are calling jQuery validation before sending form inputs to a PHP file.

Download

This PHP code tutorial was published on November 20, 2014.

↑ Back to Top