Server Side Ajax JQuery CRUD Data Table - Step by Step - PHP, MySql, Bootstrap Modal, Javascripts | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you are going to learn how to create a Server-Side Ajax JQuey CRUD Data Table step by step easily using PHP, MySql, Bootstrap, Javascript. And you can learn how to insert, edit and delete data using ajax DataTables as you can see in the video. First, you need to Install a localhost server(eg:- XAMPP, WampServer) to your pc. Then go to the htdocs file in the localhost server. Then create a new folder inside the htdocs name datatable (you can use any name for this folder). Then you need to create "index.php", "database connection.php", "delete.php", "fetch.php", "fetch_single.php", "function.php" and "insert.php" files inside that datatable folder. Then your files are ready.

First, start the localhost server and start the apache module and MySQL module then go to phpMyAdmin by clicking the admin button of the MySQL module. Then create a new database name "course_db". Then create a table inside that database name "course". Then you need to add suitable columns like in the video to the table with a column name, type, and length. After creating the table your database and the table are ready to use.

After creating the database and the table you can start coding. Start to code by following the video tutorial. this datatable will much helpful for you to insert, edit and delete data from a MySQL database table. it is more effective and efficient for storing data. It will be useful when you crating an admin panel or other serverside development.

Source Codes For Server Side Ajax JQuery CRUD Data Table

All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you t o understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.

index.php/h2> <!DOCTYPE html> <html> <head> <title>Server Side Ajax CURD data table with Bootstrap</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> .content{ max-width: 800px; margin: auto; } h1{ text-align: center; padding-bottom: 60px; } </style> </head> <body> <div class="content"> <h1>Server Side Ajax CURD data table with Bootstrap</h1> <table id="course_table" class="table table-striped"> <thead bgcolor="#6cd8dc"> <tr class="table-primary"> <th width="30%">ID</th> <th width="50%">Course Name</th> <th width="30%">Number of Students</th> <th scope="col" width="5%">Edit</th> <th scope="col" width="5%">Delete</th> </tr> </thead> </table> <br> <div align="right"> <button type="button" id="add_button" data-toggle="modal" data-target="#userModal" class="btn btn-success">Add Course</button> </div> </div> </body> </html> <div id="userModal" class="modal fade"> <div class="modal-dialog"> <form method="post" id="course_form" enctype="multipart/form-data"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Add Course</h4> </div> <div class="modal-body"> <label>Enter Course Name</label> <input type="text" name="course" id="course" class="form-control"/><br> <label>Enter Number of Students</label> <input type="text" name="students" id="students" class="form-control"/><br> </div> <div class="modal-footer"> <input type="hidden" name="course_id" id="course_id"/> <input type="hidden" name="operation" id="operation"/> <input type="submit" name="action" id="action" class="btn btn-primary" value="Add" /> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </form> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('#add_button').click(function(){ $('#course_form')[0].reset(); $('.modal-title').text("Add Course Details"); $('#action').val("Add"); $('#operation').val("Add") }); var dataTable = $('#course_table').DataTable({ "paging":true, "processing":true, "serverSide":true, "order": [], "info":true, "ajax":{ url:"fetch.php", type:"POST" }, "columnDefs":[ { "target":[0,3,4], "orderable":false, }, ], }); $(document).on('submit', '#course_form', function(event){ event.preventDefault(); var id = $('#id').val(); var course = $('#course').val(); var students = $('#students').val(); if(course != '' && students != '') { $.ajax({ url:"insert.php", method:'POST', data:new FormData(this), contentType:false, processData:false, success:function(data) { $('#course_form')[0].reset(); $('#userModal').modal('hide'); dataTable.ajax.reload(); } }); } else { alert("Course Name, Number of students Fields are Required"); } }); $(document).on('click', '.update', function(){ var course_id = $(this).attr("id"); $.ajax({ url:"fetch_single.php", method:"POST", data:{course_id:course_id}, dataType:"json", success:function(data) { $('#userModal').modal('show'); $('#id').val(data.id); $('#course').val(data.course); $('#students').val(data.students); $('.modal-title').text("Edit Course Details"); $('#course_id').val(course_id); $('#action').val("Save"); $('#operation').val("Edit"); } }); }); $(document).on('click','.delete', function(){ var course_id = $(this).attr("id"); if(confirm("Are you sure want to delete this user?")) { $.ajax({ url:"delete.php", method:"POST", data:{course_id:course_id}, success:function(data) { dataTable.ajax.reload(); } }); } else { return false; } }); }); </script>

fetch.php

<?php
include('database connection.php');
include('function.php');
$query = '';
$output = array();
$query .= "SELECT * FROM course ";
if(isset($_POST["search"]["value"]))
{
    $query .= 'WHERE course LIKE "%'.$_POST["search"]["value"].'%" ';
    $query .= 'OR students LIKE "%'.$_POST["search"]["value"].'%" ';
}

if(isset($_POST["order"]))
{
    $query .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' ';
}
else
{
    $query .= 'ORDER BY id ASC ';
}

if($_POST["length"] != -1)
{
    $query .= 'LIMIT ' .$_POST['start']. ', ' .$_POST['length'];
}
$statement = $connection->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach($result as $row)
{
    $sub_array = array();

$sub_array[] = $row["id"];
    $sub_array[] = $row["course"];
    $sub_array[] = $row["students"];
    $sub_array[] = '<button type="button" name="update" id="'.$row["id"].'" class="btn btn-primary btn-sm update">Edit</button>';
    $sub_array[] = '<button type="button" name="delete" id="'.$row["id"].'" class="btn btn-danger btn-sm delete">Delete</button>';
    $data[] = $sub_array;
}
$output = array(
    "draw"              =>  intval($_POST["draw"]),
    "recordsTotal"      =>  $filtered_rows,
    "recordsFiltered"   =>  get_total_all_records(),
    "data"              =>  $data
);
echo json_encode($output);
?>

insert.php

fetch_single.php

database connection.php

function.php

delete.php

Download Source Files

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

HishamFebruary 3, 2021 at 8:17 PM
Thank you so much great video
Greetings from Saudi Arabia
AnonymousFebruary 22, 2021 at 8:02 AM
Thank you video for good teaching.
AndrewApril 20, 2021 at 1:13 PM
To further my education on this, please tell me how it works
SrivatsanJuly 18, 2021 at 10:17 PM
When searching is done,total records
value at the bottom is not dynamically changing why? Please tell how to do that....
AnonymousJuly 18, 2021 at 10:18 PM
When searching is done, the total records value at bottom is not dynamically Changing... Why? Please tell how to do that ...
AnonymousJuly 19, 2021 at 3:11 PM
Hi there, thank you for this project. It has helped me learn so much. I have a question though. I modified the fields, one of the columns contains a URL. But its not clickable. How can I make it clickable. I tried $sub_array[] = $row['' + Open + '']; . Thanks for your help!
AnonymousJuly 20, 2021 at 12:43 AM
Hi there, this tutorial really helped me learn PHP. Thank you. I have made some changes to the columns, including adding a new column that contains URL's. I made the links clickable by using the code: [$sub_array[] = 'Open';] in the fetch.php file. But now the word "Open" appears for all rows, even if there is no data found in the row. How can I only show a hyperlink "open" if there is a link stored in that row? Thanks
AnonymousDecember 22, 2021 at 8:30 PM
i want learn coding from you
can you teach me you are very intelligent and osm in php.
AnonymousMay 31, 2022 at 5:40 PM
this was amazing. you're literally a genius! i learned so much about CRUD!

Wednesday, January 13, 2021

Server Side Ajax JQuery CRUD Data Table - Step by Step - PHP, MySql, Bootstrap Modal, Javascripts

Description

Source Codes For Server Side Ajax JQuery CRUD Data Table

fetch.php

insert.php

fetch_single.php

database connection.php

function.php

delete.php

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

Server Side Ajax JQuery CRUD Data Table - Step by Step - PHP, MySql, Bootstrap Modal, Javascripts

Description

Source Codes For Server Side Ajax JQuery CRUD Data Table

fetch.php

insert.php

fetch_single.php

database connection.php

function.php

delete.php

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form