{"id":5267,"date":"2023-02-23T06:49:45","date_gmt":"2023-02-23T06:49:45","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=5267"},"modified":"2025-09-10T04:29:12","modified_gmt":"2025-09-10T04:29:12","slug":"datatables-crud-operations-with-php-mysql","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/","title":{"rendered":"DataTables CRUD Operations with PHP and MySQL"},"content":{"rendered":"<p><b>DataTables<\/b> is a JavaScript library that helps build data tables and instantly add advanced features to HTML tables. In the web application, the DataTables jQuery plugin is the best option for displaying data in a table view with search and pagination features. <a href=\"https:\/\/www.codexworld.com\/datatables-server-side-processing-with-php-mysql\/\">DataTables server-side processing<\/a> allows to fetch data from the database and display live data in tabular format. Advanced features, such as search, filter, sorting, and pagination, can be easily attached to the data table without extra effort.<\/p>\n<p>CRUD operations are the most used functionality in the data table. The DataTables can be enhanced with CRUD feature to display and manage data in HTML tables. In this tutorial, we will show you how to <b>integrate DataTables CRUD operations<\/b> with Ajax using PHP and MySQL. You can manage data in DataTables with live add\/edit\/delete features using jQuery, Ajax, and PHP.<\/p>\n<p>In the example script, we will display dynamic data from the database and add <b>CRUD functionality in DataTables with PHP<\/b>.<\/p>\n<ul>\n<li>Fetch and list data from the MySQL database using DataTables Server-side Processing.<\/li>\n<li>Add a new column (Action) and insert hyperlinks (Edit and Delete) to each row in DataTables.<\/li>\n<li>Add, edit, and delete table data with popup without page refresh\/reload using jQuery and Ajax.<\/li>\n<\/ul>\n<p>Before getting started to integrate the CRUD feature in DataTables with PHP, take a look at the file structure.<\/p>\n<pre class=\"file-struc\">datatables_crud_with_php<span style=\"color:#794938\">\/<\/span>\r\n\u251c\u2500\u2500 config.php\r\n\u251c\u2500\u2500 dbConnect.php\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 fetchData.php\r\n\u251c\u2500\u2500 ssp.class.php\r\n\u251c\u2500\u2500 eventHandler.php\r\n\u251c\u2500\u2500 DataTables<span style=\"color:#794938\">\/<\/span>\r\n\u2502   \u251c\u2500\u2500 datatables.min.css\r\n\u2502   \u2514\u2500\u2500 datatables.min.js\r\n\u251c\u2500\u2500 js<span style=\"color:#794938\">\/<\/span>\r\n\u2502   \u251c\u2500\u2500 jquery.min.js\r\n\u2502   \u251c\u2500\u2500 bootstrap.min.js\r\n\u2502   \u251c\u2500\u2500 sweetalert2.all.min.js\r\n\u2514\u2500\u2500 css<span style=\"color:#794938\">\/<\/span>\r\n    \u251c\u2500\u2500 bootstrap.min.css\r\n    \u2514\u2500\u2500 style.css\r\n<\/pre>\n<h2>Create Database Table<\/h2>\n<p>A table is required in the database in which the data will be managed. The following SQL creates a <code>members<\/code> table with some basic fields in the MySQL database.<\/p>\n<pre style=\"color: rgb(0, 0, 0);\"><span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CREATE<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">TABLE<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`members`<\/span> (\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">int<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">11<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> AUTO_INCREMENT,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`first_name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">25<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`last_name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">25<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`email`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">50<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`gender`<\/span> enum(<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'Male'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'Female'<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`country`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">20<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`created`<\/span> datetime <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">current_timestamp<\/span>(),\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`modified`<\/span> datetime <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">current_timestamp<\/span>(),\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`status`<\/span> tinyint(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">1<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">1<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COMMENT<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'1=Active | 0=Inactive'<\/span>,\r\n  PRIMARY <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">KEY<\/span> (<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span>)\r\n) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">ENGINE<\/span>=<span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">InnoDB<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CHARSET<\/span>=utf8 <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n<h2>Configuration (config.php)<\/h2>\n<p>In the <code>config.php<\/code> file, some configuration variables are defined.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;credentials <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_HOST'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'MySQL_Database_Host'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_USER'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'Database_Username'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_PASS'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'Database_Password'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_NAME'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'Database_Name'<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<h2>Database Connection (dbConnect.php)<\/h2>\n<p>The <code>dbConnect.php<\/code> file is used to connect and select the database.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;config&nbsp;file <br \/><\/span><span style=\"color: #007700\">include_once&nbsp;<\/span><span style=\"color: #DD0000\">'config.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Connect&nbsp;to&nbsp;the&nbsp;database&nbsp; <br \/><\/span><span style=\"color: #0000BB\">$conn&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">mysqli<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">DB_HOST<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">DB_USER<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">DB_PASS<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">DB_NAME<\/span><span style=\"color: #007700\">);&nbsp; <br \/>if(<\/span><span style=\"color: #0000BB\">$conn<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">){&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;die(<\/span><span style=\"color: #DD0000\">\"Failed&nbsp;to&nbsp;connect&nbsp;with&nbsp;MySQL:&nbsp;\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$conn<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">);&nbsp; <br \/>} <br \/> <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<h2>Attach DataTables to HTML Table with CRUD Links (index.html)<\/h2>\n<p>On page load, the DataTables class is initialized, and dynamic data is fetched from the server side and listed in an HTML table with Add\/Edit\/Delete buttons.<\/p>\n<p><b>jQuery Library:<\/b><br \/>\nInclude the jQuery library that is required to initiate Ajax and build modal popup.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>Bootstrap Library:<\/b><br \/>\nInclude the Bootstrap CSS and JS library files, which will be used to integrate the popup dialog.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"css\/bootstrap.min.css\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/bootstrap.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>SweetAlert Plugin:<\/b><br \/>\nWe will use the SweetAlert2 plugin to display alert notification messages on the dialog box.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/sweetalert2.all.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>DataTables Library:<\/b><br \/>\nInclude the DataTables CSS and JS library files.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\/css\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"DataTables\/datatables.min.css\"<\/span>\/&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\/javascript\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"DataTables\/datatables.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>HTML Table with Add\/Edit\/Delete Links:<\/b><br \/>\nCreate an HTML table structure and specify the column names in <span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">thead<\/span>&gt;<\/span> and <span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">tfoot<\/span>&gt;<\/span>.<\/p>\n<ul>\n<li>Define a selector ID (<code>#dataList<\/code>) in <span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">table<\/span>&gt;<\/span> to attach DataTables.<\/li>\n<li>Specify an additional column named &#8220;Action&#8221; where the Edit and Delete links\/buttons will be added.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Add button --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"top-panel\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"javascript:void(0);\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"addData()\"<\/span>&gt;<\/span>Add New User<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Data list table --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">table<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"dataList\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"display\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"width:100%\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">thead<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tr<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>First name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Last name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Email<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Gender<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Country<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Created<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Status<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Action<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tr<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">thead<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tfoot<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tr<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>First name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Last name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Email<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Gender<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Country<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Created<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Status<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Action<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tr<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tfoot<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">table<\/span>&gt;<\/span><\/pre>\n<p><b>Add\/Edit Modal:<\/b><br \/>\nDefine HTML to create a modal popup for add and edit operations.<\/p>\n<ul>\n<li>For this example, we will create a form to input members&#8217; data (First Name, Last Name, Email, Gender, Country, and Status).<\/li>\n<li>On clicking the Add\/Edit button, this modal will appear with the form fields.<\/li>\n<li>The user can add, edit, and update data through the modal popup form.<\/li>\n<li>We will use this same modal form for add and edit operations.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal fade\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userDataModal\"<\/span> <span class=\"hljs-attr\">tabindex<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"-1\"<\/span> <span class=\"hljs-attr\">aria-labelledby<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userAddEditModalLabel\"<\/span> <span class=\"hljs-attr\">aria-hidden<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-dialog\"<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-content\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-header\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h1<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-title fs-5\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userModalLabel\"<\/span>&gt;<\/span>Add New User<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h1<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"button\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn-close\"<\/span> <span class=\"hljs-attr\">data-bs-dismiss<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Close\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userDataFrm\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userDataFrm\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-body\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"frm-status\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mb-3\"<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userFirstName\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-label\"<\/span>&gt;<\/span>First Name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userFirstName\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Enter firstname\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mb-3\"<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userLastName\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-label\"<\/span>&gt;<\/span>Last Name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userLastName\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Enter lastname\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mb-3\"<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userEmail\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-label\"<\/span>&gt;<\/span>Email address<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userEmail\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Enter email\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-radio\"<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>Gender:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"radio\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userGender\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userGender_1\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Male\"<\/span> <span class=\"hljs-attr\">checked<\/span>&gt;<\/span> Male \r\n                    &amp;nbsp;&amp;nbsp; \r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"radio\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userGender\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userGender_2\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Female\"<\/span>&gt;<\/span> Female\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mb-3\"<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userCountry\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-label\"<\/span>&gt;<\/span>Country<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userCountry\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Enter country\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-radio\"<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>Status:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"radio\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userStatus\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userStatus_1\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"1\"<\/span> <span class=\"hljs-attr\">checked<\/span>&gt;<\/span> Active &amp;nbsp;&amp;nbsp;\r\n                    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"radio\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userStatus\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userStatus_2\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"0\"<\/span>&gt;<\/span> Inactive\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal-footer\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"hidden\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userID\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"0\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"button\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-secondary\"<\/span> <span class=\"hljs-attr\">data-bs-dismiss<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"modal\"<\/span>&gt;<\/span>Close<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"button\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submitUserData()\"<\/span>&gt;<\/span>Submit<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<p><b>JavaScript: Attach DataTables Plugin to HTML Table<\/b><br \/>\nInitialize the DataTables API class using the <code>DataTable()<\/code> method and configure the table object.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>To enable server-side processing,\n<ul>\n<li>Set the <code>processing<\/code> option to true.<\/li>\n<li>Set the <code>serverSide<\/code> option to true.<\/li>\n<\/ul>\n<\/li>\n<li>Specify the server-side script URL (<code>fetchData.php<\/code>) in the <code>ajax<\/code> option.<\/li>\n<li>Since the custom links are placed in the &#8220;Action&#8221; column, disable sorting for this column (index count is 7).\n<ul>\n<li>Use <code>columnDefs<\/code> option to disable sorting of a specific column.<\/li>\n<li>Set <code>orderable<\/code> to false.<\/li>\n<li>Specify column index count from left in targets.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Hold the DataTables object in a variable (<code>table<\/code>) and use the <code>draw()<\/code> method to render the table data.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Initialize DataTables API object and configure table<\/span>\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> table = $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#dataList'<\/span>).DataTable({\r\n    <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"processing\"<\/span>: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n    <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"serverSide\"<\/span>: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n    <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"ajax\"<\/span>: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fetchData.php\"<\/span>,\r\n    <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"columnDefs\"<\/span>: [\r\n        { <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"orderable\"<\/span>: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"targets\"<\/span>: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">7<\/span> }\r\n    ]\r\n});\r\n\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Draw the table<\/span>\r\n    table.draw();\r\n});<\/pre>\n<p><b>JavaScript: DataTables Add Request<\/b><br \/>\nThe <code>addData()<\/code> function displays a modal popup with form fields.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">addData<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.frm-status'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userModalLabel'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Add New User'<\/span>);\r\n\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userGender_1'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userGender_2'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userStatus_1'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userStatus_2'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userFirstName'<\/span>).val(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userLastName'<\/span>).val(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userEmail'<\/span>).val(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userCountry'<\/span>).val(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userID'<\/span>).val(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userDataModal'<\/span>).modal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'show'<\/span>);\r\n}<\/pre>\n<p><b>JavaScript: DataTables Edit Request<\/b><br \/>\nThe <code>editData()<\/code> function displays a modal popup with prefilled form.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">editData<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">user_data<\/span>)<\/span>{\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.frm-status'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userModalLabel'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Edit User #'<\/span>+user_data.id);\r\n\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(user_data.gender == <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Female'<\/span>){\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userGender_1'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>);\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userGender_2'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>);\r\n    }<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span>{\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userGender_2'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>);\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userGender_1'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>);\r\n    }\r\n\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(user_data.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>){ \r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userStatus_2'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>);\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userStatus_1'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>);\r\n    }<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span>{\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userStatus_1'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>);\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userStatus_2'<\/span>).prop(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'checked'<\/span>, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>);\r\n    }\r\n\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userFirstName'<\/span>).val(user_data.first_name);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userLastName'<\/span>).val(user_data.last_name);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userEmail'<\/span>).val(user_data.email);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userCountry'<\/span>).val(user_data.country);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userID'<\/span>).val(user_data.id);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userDataModal'<\/span>).modal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'show'<\/span>);\r\n}<\/pre>\n<p><b>JavaScript: Submit Add\/Edit Form Data via Ajax Request<\/b><br \/>\nThe <code>submitUserData()<\/code> function is used to submit input data of the modal form.<\/p>\n<ul>\n<li>The form data is submitted to the server-side script (<code>eventHandler.php<\/code>) via Ajax request.<\/li>\n<li>Based on the response, the DataTables is reloaded with the updated data.\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">submitUserData<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.frm-status'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>);\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> input_data_arr = [\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'userFirstName'<\/span>).value,\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'userLastName'<\/span>).value,\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'userEmail'<\/span>).value,\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'input[name=\"userGender\"]:checked'<\/span>).value,\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'userCountry'<\/span>).value,\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'input[name=\"userStatus\"]:checked'<\/span>).value,\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'userID'<\/span>).value,\r\n    ];\r\n\r\n    fetch(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"eventHandler.php\"<\/span>, {\r\n        method: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"POST\"<\/span>,\r\n        headers: { <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Content-Type\"<\/span>: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"application\/json\"<\/span> },\r\n        body: <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">JSON<\/span>.stringify({ request_type:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'addEditUser'<\/span>, user_data: input_data_arr}),\r\n    })\r\n    .then(response =&gt; response.json())\r\n    .then(data =&gt; {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (data.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>) {\r\n            Swal.fire({\r\n                title: data.msg,\r\n                icon: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'success'<\/span>,\r\n            }).then((result) =&gt; {\r\n                <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Redraw the table<\/span>\r\n\t        table.draw();\r\n\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userDataModal'<\/span>).modal(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'hide'<\/span>);\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#userDataFrm\"<\/span>)[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>].reset();\r\n            });\r\n        } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.frm-status'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;div class=\"alert alert-danger\" role=\"alert\"&gt;'<\/span>+data.error+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/div&gt;'<\/span>);\r\n        }\r\n    })\r\n    .catch(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">console<\/span>.error);\r\n}<\/pre>\n<p><b>JavaScript: DataTables Delete Request<\/b><br \/>\nThe <code>deleteData()<\/code> function is used to POST delete request to the server-side script (<code>eventHandler.php<\/code>) via Ajax.<\/p>\n<ul>\n<li>The SweetAlert plugin is used to display the confirmation dialog.<\/li>\n<li>Based on the response, the DataTables is reloaded with the updated data.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">deleteData<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">user_id<\/span>)<\/span>{\r\n    Swal.fire({\r\n        title: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Are you sure to Delete?'<\/span>,\r\n        text:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'You won\\'t be able to revert this!'<\/span>,\r\n        icon: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'warning'<\/span>,\r\n        showCancelButton: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n        confirmButtonColor: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#3085d6'<\/span>,\r\n        cancelButtonColor: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#d33'<\/span>,\r\n        confirmButtonText: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Yes, delete it!'<\/span>\r\n      }).then((result) =&gt; {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (result.isConfirmed) {\r\n          <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Delete event<\/span>\r\n          fetch(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"eventHandler.php\"<\/span>, {\r\n            method: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"POST\"<\/span>,\r\n            headers: { <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"Content-Type\"<\/span>: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"application\/json\"<\/span> },\r\n            body: <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">JSON<\/span>.stringify({ request_type:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'deleteUser'<\/span>, user_id: user_id}),\r\n          })\r\n          .then(response =&gt; response.json())\r\n          .then(data =&gt; {\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (data.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>) {\r\n                Swal.fire({\r\n                    title: data.msg,\r\n                    icon: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'success'<\/span>,\r\n                }).then((result) =&gt; {\r\n                    table.draw();\r\n                });\r\n            } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n              Swal.fire(data.error, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'error'<\/span>);\r\n            }\r\n          })\r\n          .catch(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">console<\/span>.error);\r\n        } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n          Swal.close();\r\n        }\r\n    });\r\n}<\/pre>\n<h2>Server-side Script to Fetch DataTables Data (fetchData.php)<\/h2>\n<p>The <code>fetchData.php<\/code> file performs server-side processing with custom links (edit and delete).<\/p>\n<ul>\n<li>To make the SQL query-building process more accessible, we will use the SSP class (<code>ssp.class.php<\/code>).<\/li>\n<li>The <code>simple()<\/code> function of the SSP class helps to fetch the member&#8217;s data from the database based on the mentioned columns using PHP and MySQL.<\/li>\n<li>The <code>formatter<\/code> parameter is used to modify the default format of the data returns for the column.<\/li>\n<li>We will define anchor tags (<span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span>) to add hyperlinks to the column of each row with dynamic ID (primary key ID of the DB data).\n<ul>\n<li>The <code>editData()<\/code> functionality is added to the onclick attribute of the Edit anchor. It will trigger the JavaScript method for the edit form popup.<\/li>\n<li>The <code>deleteData()<\/code> functionality is added to the onclick attribute of the Delete anchor. It will trigger the JavaScript method for the delete confirmation dialog.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;config&nbsp;file <br \/><\/span><span style=\"color: #007700\">include_once&nbsp;<\/span><span style=\"color: #DD0000\">'config.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;connection&nbsp;info <br \/><\/span><span style=\"color: #0000BB\">$dbDetails&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'host'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">DB_HOST<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'user'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">DB_USER<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'pass'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">DB_PASS<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">DB_NAME <br \/><\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;DB&nbsp;table&nbsp;to&nbsp;use <br \/><\/span><span style=\"color: #0000BB\">$table&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'members'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Table's&nbsp;primary&nbsp;key <br \/><\/span><span style=\"color: #0000BB\">$primaryKey&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Array&nbsp;of&nbsp;database&nbsp;columns&nbsp;which&nbsp;should&nbsp;be&nbsp;read&nbsp;and&nbsp;sent&nbsp;back&nbsp;to&nbsp;DataTables. <br \/>\/\/&nbsp;The&nbsp;`db`&nbsp;parameter&nbsp;represents&nbsp;the&nbsp;column&nbsp;name&nbsp;in&nbsp;the&nbsp;database.&nbsp; <br \/>\/\/&nbsp;The&nbsp;`dt`&nbsp;parameter&nbsp;represents&nbsp;the&nbsp;DataTables&nbsp;column&nbsp;identifier. <br \/><\/span><span style=\"color: #0000BB\">$columns&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array(&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'first_name'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array(&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'last_name'<\/span><span style=\"color: #007700\">,&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array(&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">2&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array(&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'gender'<\/span><span style=\"color: #007700\">,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">3&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array(&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'country'<\/span><span style=\"color: #007700\">,&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">4&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'created'<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">5<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'formatter'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;function(&nbsp;<\/span><span style=\"color: #0000BB\">$d<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$row&nbsp;<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<\/span><span style=\"color: #0000BB\">date<\/span><span style=\"color: #007700\">(&nbsp;<\/span><span style=\"color: #DD0000\">'jS&nbsp;M&nbsp;Y'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">strtotime<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$d<\/span><span style=\"color: #007700\">)); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'status'<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">6<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'formatter'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;function(&nbsp;<\/span><span style=\"color: #0000BB\">$d<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$row&nbsp;<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(<\/span><span style=\"color: #0000BB\">$d&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #DD0000\">'Active'<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">'Inactive'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">7<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'formatter'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;function(&nbsp;<\/span><span style=\"color: #0000BB\">$d<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$row&nbsp;<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<\/span><span style=\"color: #DD0000\">' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href=\"javascript:void(0);\"&nbsp;class=\"btn&nbsp;btn-warning\"&nbsp;onclick=\"editData('<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">htmlspecialchars<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">),&nbsp;<\/span><span style=\"color: #0000BB\">ENT_QUOTES<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'UTF-8'<\/span><span style=\"color: #007700\">).<\/span><span style=\"color: #DD0000\">')\"&gt;Edit&lt;\/a&gt;&amp;nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href=\"javascript:void(0);\"&nbsp;class=\"btn&nbsp;btn-danger\"&nbsp;onclick=\"deleteData('<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$d<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">')\"&gt;Delete&lt;\/a&gt; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;) <br \/>); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;SQL&nbsp;query&nbsp;processing&nbsp;class <br \/><\/span><span style=\"color: #007700\">require&nbsp;<\/span><span style=\"color: #DD0000\">'ssp.class.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Output&nbsp;data&nbsp;as&nbsp;json&nbsp;format <br \/><\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">SSP<\/span><span style=\"color: #007700\">::<\/span><span style=\"color: #0000BB\">simple<\/span><span style=\"color: #007700\">(&nbsp;<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbDetails<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$table<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$primaryKey<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$columns&nbsp;<\/span><span style=\"color: #007700\">) <br \/>);<\/span><\/pre>\n<h2>SSP Library<\/h2>\n<p>The SSP class handles the database-related operations. It contains some helper functions to build SQL queries for DataTables server-side processing with custom links or buttons. You can see the code of the SSP library <a href=\"https:\/\/github.com\/codexworld\/Datatables-Server-side-Processing\/blob\/master\/ssp.class.php\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p><span class=\"note\">Note that:<\/span> This library and all the required files are included in the source code, you don&#8217;t need to download them separately.<\/p>\n<h2>CRUD Operations with PHP (eventHandler.php)<\/h2>\n<p>The <code>eventHandler.php<\/code> script handles the add, edit, and delete operations with PHP and MySQL.<\/p>\n<p><b>addEditUser Request:<\/b><br \/>\nValidate the input field&#8217;s value before data processing.<\/p>\n<ul>\n<li>Check whether the index ID is available in the POST data.<\/li>\n<li>If an ID exists, update the record based on the index ID in the database.<\/li>\n<li>Otherwise, insert data in the database.<\/li>\n<\/ul>\n<p><b>deleteUser:<\/b><br \/>\nDelete data from the database based on the ID.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;database&nbsp;configuration&nbsp;file&nbsp; <br \/><\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConnect.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Retrieve&nbsp;JSON&nbsp;from&nbsp;POST&nbsp;body <br \/><\/span><span style=\"color: #0000BB\">$jsonStr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">file_get_contents<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'php:\/\/input'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">$jsonObj&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">json_decode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$jsonStr<\/span><span style=\"color: #007700\">); <br \/> <br \/>if(<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">request_type&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #DD0000\">'addEditUser'<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$user_data&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">user_data<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$first_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$last_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$email&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">2<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">2<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$gender&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">3<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">3<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$country&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">4<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">4<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$status&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">5<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">5<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$id&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">6<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">6<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$err&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(empty(<\/span><span style=\"color: #0000BB\">$first_name<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$err&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;enter&nbsp;your&nbsp;First&nbsp;Name.&lt;br\/&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(empty(<\/span><span style=\"color: #0000BB\">$last_name<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$err&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;enter&nbsp;your&nbsp;Last&nbsp;Name.&lt;br\/&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(empty(<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">)&nbsp;||&nbsp;!<\/span><span style=\"color: #0000BB\">filter_var<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">FILTER_VALIDATE_EMAIL<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$err&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;enter&nbsp;a&nbsp;valid&nbsp;Email&nbsp;Address.&lt;br\/&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(!empty(<\/span><span style=\"color: #0000BB\">$user_data<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;empty(<\/span><span style=\"color: #0000BB\">$err<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(!empty(<\/span><span style=\"color: #0000BB\">$id<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Update&nbsp;user&nbsp;data&nbsp;into&nbsp;the&nbsp;database <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sqlQ&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"UPDATE&nbsp;members&nbsp;SET&nbsp;first_name=?,last_name=?,email=?,gender=?,country=?,status=?,modified=NOW()&nbsp;WHERE&nbsp;id=?\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$conn<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">prepare<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sqlQ<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">bind_param<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"sssssii\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$first_name<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$last_name<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$gender<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$country<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$status<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$id<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$update&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">execute<\/span><span style=\"color: #007700\">(); <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$update<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$output&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'msg'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Member&nbsp;updated&nbsp;successfully!' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$output<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">([<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Member&nbsp;Update&nbsp;request&nbsp;failed!'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Insert&nbsp;event&nbsp;data&nbsp;into&nbsp;the&nbsp;database <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sqlQ&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"INSERT&nbsp;INTO&nbsp;members&nbsp;(first_name,last_name,email,gender,country,status)&nbsp;VALUES&nbsp;(?,?,?,?,?,?)\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$conn<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">prepare<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sqlQ<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">bind_param<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"sssssi\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$first_name<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$last_name<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$gender<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$country<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$status<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$insert&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">execute<\/span><span style=\"color: #007700\">(); <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$insert<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$output&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'msg'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Member&nbsp;added&nbsp;successfully!' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$output<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">([<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Member&nbsp;Add&nbsp;request&nbsp;failed!'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">([<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">trim<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$err<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;br\/&gt;'<\/span><span style=\"color: #007700\">)]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>}elseif(<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">request_type&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #DD0000\">'deleteUser'<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$id&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$jsonObj<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">user_id<\/span><span style=\"color: #007700\">; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"DELETE&nbsp;FROM&nbsp;members&nbsp;WHERE&nbsp;id=<\/span><span style=\"color: #0000BB\">$id<\/span><span style=\"color: #DD0000\">\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$delete&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$conn<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sql<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$delete<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$output&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'msg'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Member&nbsp;deleted&nbsp;successfully!' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$output<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">([<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Member&nbsp;Delete&nbsp;request&nbsp;failed!'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>}<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/inline-table-edit-delete-jquery-ajax-php-mysql\/\">Data Table Inline Editing using jQuery, Ajax, PHP and MySQL<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>DataTables is a very useful plugin to build a data list in tabular format and add advanced features to make it user-friendly. You can use this example script to integrate CRUD functionality with DataTables using PHP and MySQL. Here, we have used a modal pop-up to integrate the add\/edit form UI and the delete confirmation window. Since Ajax is used to handle the add, edit, and delete requests, the user can do CRUD operations on a single page without page refresh\/reload.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>DataTables is a JavaScript library that helps build data tables and instantly add advanced features to HTML tables. In the web application, the DataTables jQuery plugin is the best option for displaying data in a <\/p>\n","protected":false},"author":1,"featured_media":5271,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[200,320,19,14],"class_list":["post-5267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-crud","tag-datatables","tag-mysql","tag-php","cat-4-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>DataTables CRUD Operations with PHP and MySQL - CodexWorld<\/title>\n<meta name=\"description\" content=\"Datatables server-side processing with CRUD operations - Integrate CRUD functionality in DataTables with PHP and MySQL. Add, Edit, and Delete data in DataTables with Ajax using PHP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DataTables CRUD Operations with PHP and MySQL - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Datatables server-side processing with CRUD operations - Integrate CRUD functionality in DataTables with PHP and MySQL. Add, Edit, and Delete data in DataTables with Ajax using PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-23T06:49:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-10T04:29:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/02\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"DataTables CRUD Operations with PHP and MySQL\",\"datePublished\":\"2023-02-23T06:49:45+00:00\",\"dateModified\":\"2025-09-10T04:29:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/\"},\"wordCount\":1095,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png\",\"keywords\":[\"CRUD\",\"DataTables\",\"MySQL\",\"PHP\"],\"articleSection\":[\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/\",\"name\":\"DataTables CRUD Operations with PHP and MySQL - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png\",\"datePublished\":\"2023-02-23T06:49:45+00:00\",\"dateModified\":\"2025-09-10T04:29:12+00:00\",\"description\":\"Datatables server-side processing with CRUD operations - Integrate CRUD functionality in DataTables with PHP and MySQL. Add, Edit, and Delete data in DataTables with Ajax using PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-crud-operations-with-php-mysql\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DataTables CRUD Operations with PHP and MySQL\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DataTables CRUD Operations with PHP and MySQL - CodexWorld","description":"Datatables server-side processing with CRUD operations - Integrate CRUD functionality in DataTables with PHP and MySQL. Add, Edit, and Delete data in DataTables with Ajax using PHP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/","og_locale":"en_US","og_type":"article","og_title":"DataTables CRUD Operations with PHP and MySQL - CodexWorld","og_description":"Datatables server-side processing with CRUD operations - Integrate CRUD functionality in DataTables with PHP and MySQL. Add, Edit, and Delete data in DataTables with Ajax using PHP.","og_url":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2023-02-23T06:49:45+00:00","article_modified_time":"2025-09-10T04:29:12+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/02\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"DataTables CRUD Operations with PHP and MySQL","datePublished":"2023-02-23T06:49:45+00:00","dateModified":"2025-09-10T04:29:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/"},"wordCount":1095,"commentCount":1,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/02\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png","keywords":["CRUD","DataTables","MySQL","PHP"],"articleSection":["PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/","url":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/","name":"DataTables CRUD Operations with PHP and MySQL - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/02\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png","datePublished":"2023-02-23T06:49:45+00:00","dateModified":"2025-09-10T04:29:12+00:00","description":"Datatables server-side processing with CRUD operations - Integrate CRUD functionality in DataTables with PHP and MySQL. Add, Edit, and Delete data in DataTables with Ajax using PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/02\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/02\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png","width":1920,"height":1080,"caption":"datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/datatables-crud-operations-with-php-mysql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"DataTables CRUD Operations with PHP and MySQL"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/02\/datatables-crud-operations-with-modal-popup-using-ajax-php-mysql-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-1mX","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=5267"}],"version-history":[{"count":6,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5267\/revisions"}],"predecessor-version":[{"id":5888,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5267\/revisions\/5888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5271"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=5267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=5267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=5267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}