PHP CRUD with Search and Pagination using jQuery AJAX
by Vincy. Last modified on July 13th, 2022.
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.
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,
jQuery Add Modify Delete Functions
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.
Hi, I’m Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I’m currently available for freelance work.