This tutorial is for doing database CRUD operations with search and pagination feature by using jQuery and AJAX. In the 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.
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,
We are having separate add, modify, delete functions using jQuery to access the 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.