{"id":4165,"date":"2019-09-17T19:16:03","date_gmt":"2019-09-17T19:16:03","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=4165"},"modified":"2019-09-17T19:18:32","modified_gmt":"2019-09-17T19:18:32","slug":"build-crud-datagrid-with-jquery-easyui-using-php-mysql","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/","title":{"rendered":"Build CRUD DataGrid with jQuery EasyUI using PHP and MySQL"},"content":{"rendered":"<p>DataGrid with CRUD operations is the most used functionality for the data management section. Generally, the web page is reloaded when the CRUD operation occurs. To make the web application user-friendly, you can integrate the <a href=\"https:\/\/www.codexworld.com\/php-crud-operations-with-mysqli-extension\/\">CRUD functionality<\/a> without page refresh. The EasyUI framework provides an easy way to integrate DataGrid with CRUD feature in the web application.<\/p>\n<p><b>EasyUI<\/b> is a jQuery framework that helps to build modern and interactive <b>DataGrid CRUD<\/b> application quickly. The DataGrid functionality can be integrated into the web page in less time by writing less code. The jQuery EasyUI allows interacting with the server-side script to make the DataGrid more powerful. In this tutorial, we will show you how to build <b>CRUD with search and pagination<\/b> using EasyUI, PHP, and MySQL.<\/p>\n<p>In the EasyUI integration example code, the following functionality will be implemented.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Fetch data from the database and list them in a tabular format.<\/li>\n<li>Add\/Edit data in dialog window without page refresh.<\/li>\n<li>Delete data from the database without page refresh.<\/li>\n<li>Add the search and pagination feature to the list.<\/li>\n<\/ul>\n<h2>jQuery EasyUI Integration<\/h2>\n<p>The following code shows how to integrate jQuery EasyUI plugin in the web page to <b>build a CRUD application<\/b> and create or edit user information using dialog component.<\/p>\n<p><b>1.<\/b> Include the CSS and JavaScript files of the <b>EasyUI plugin<\/b> on the web page.<\/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);\">\"easyui\/themes\/default\/easyui.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);\">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);\">\"easyui\/themes\/icon.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);\">\"easyui\/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>\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);\">\"easyui\/jquery.easyui.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>2.<\/b> Add HTML code for data list table and toolbar. <\/p>\n<ul class=\"bullet_disk_list\">\n<li>Specify the URL of the server-side script (<code>getData.php<\/code>) in <code>url<\/code> attribute of the <span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">table<\/span>&gt;<\/span> tag.<\/li>\n<li>Use pagination attribute and set it TURE (<code>pagination=\"true\"<\/code>) to add pagination links to the data list.<\/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);\">table<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"dg\"<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Users Management\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"easyui-datagrid\"<\/span> <span class=\"hljs-attr\">url<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"getData.php\"<\/span> <span class=\"hljs-attr\">toolbar<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"#toolbar\"<\/span> <span class=\"hljs-attr\">pagination<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">rownumbers<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">fitColumns<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">singleSelect<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"width:100%;height:350px;\"<\/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> <span class=\"hljs-attr\">field<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"first_name\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"50\"<\/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> <span class=\"hljs-attr\">field<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"last_name\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"50\"<\/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> <span class=\"hljs-attr\">field<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"50\"<\/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> <span class=\"hljs-attr\">field<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"phone\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"50\"<\/span>&gt;<\/span>Phone<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);\">table<\/span>&gt;<\/span><\/pre>\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\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"toolbar\"<\/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\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"tb\"<\/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\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"term\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Type keywords...\"<\/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);\">\"easyui-linkbutton\"<\/span> <span class=\"hljs-attr\">plain<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"doSearch()\"<\/span>&gt;<\/span>Search<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    <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\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"tb2\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"\"<\/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);\">\"easyui-linkbutton\"<\/span> <span class=\"hljs-attr\">iconCls<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"icon-add\"<\/span> <span class=\"hljs-attr\">plain<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"newUser()\"<\/span>&gt;<\/span>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);\">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);\">\"easyui-linkbutton\"<\/span> <span class=\"hljs-attr\">iconCls<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"icon-edit\"<\/span> <span class=\"hljs-attr\">plain<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"editUser()\"<\/span>&gt;<\/span>Edit 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);\">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);\">\"easyui-linkbutton\"<\/span> <span class=\"hljs-attr\">iconCls<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"icon-remove\"<\/span> <span class=\"hljs-attr\">plain<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"destroyUser()\"<\/span>&gt;<\/span>Remove 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<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>3.<\/b> Add HTML code for add\/edit form 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);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"dlg\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"easyui-dialog\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"width:450px\"<\/span> <span class=\"hljs-attr\">data-options<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'\"<\/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\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"fm\"<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"post\"<\/span> <span class=\"hljs-attr\">novalidate<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"margin:0;padding:20px 50px\"<\/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);\">h3<\/span>&gt;<\/span>User Information<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h3<\/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\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"margin-bottom:10px\"<\/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\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"first_name\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"easyui-textbox\"<\/span> <span class=\"hljs-attr\">required<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"First Name:\"<\/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);\">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\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"margin-bottom:10px\"<\/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\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"last_name\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"easyui-textbox\"<\/span> <span class=\"hljs-attr\">required<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Last Name:\"<\/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);\">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\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"margin-bottom:10px\"<\/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\">name<\/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);\">\"easyui-textbox\"<\/span> <span class=\"hljs-attr\">required<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">validType<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Email:\"<\/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);\">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\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"margin-bottom:10px\"<\/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\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"phone\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"easyui-textbox\"<\/span> <span class=\"hljs-attr\">required<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"true\"<\/span> <span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Phone:\"<\/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);\">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> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"dlg-buttons\"<\/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);\">\"easyui-linkbutton c6\"<\/span> <span class=\"hljs-attr\">iconCls<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"icon-ok\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"saveUser()\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"width:90px;\"<\/span>&gt;<\/span>Save<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);\">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);\">\"easyui-linkbutton\"<\/span> <span class=\"hljs-attr\">iconCls<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"icon-cancel\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"javascript:$('#dlg').dialog('close');\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"width:90px;\"<\/span>&gt;<\/span>Cancel<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><\/pre>\n<p><b>4.<\/b> Add the JavaScript code for server-side interaction.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><b>doSearch()<\/b> &#8211; Send terms to the server-side script (<code>getData.php<\/code>) and load the filtered data.<\/li>\n<li><b>newUser()<\/b> &#8211; Open popup dialog with the HTML form to add data.<\/li>\n<li><b>editUser()<\/b> &#8211; Open popup dialog with the HTML form to edit data.<\/li>\n<li><b>saveUser()<\/b> &#8211; Send data to the server-side script (<code>addData.php<\/code> or <code>editData.php<\/code>) for saving in the database.<\/li>\n<li><b>destroyUser()<\/b> &#8211; Send request to the server-side script (<code>deleteData.php<\/code>) for remove data.<\/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);\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\/javascript\"<\/span>&gt;<\/span>\r\n<span 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);\">doSearch<\/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);\">'#dg'<\/span>).datagrid(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'load'<\/span>, {\r\n        term: $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#term'<\/span>).val()\r\n    });\r\n}\r\n\t\t\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> url;\r\n<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);\">newUser<\/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);\">'#dlg'<\/span>).dialog(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'open'<\/span>).dialog(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'center'<\/span>).dialog(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'setTitle'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'New User'<\/span>);\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#fm'<\/span>).form(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'clear'<\/span>);\r\n    url = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'addData.php'<\/span>;\r\n}\r\n<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);\">editUser<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> row = $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#dg'<\/span>).datagrid(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'getSelected'<\/span>);\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (row){\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#dlg'<\/span>).dialog(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'open'<\/span>).dialog(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'center'<\/span>).dialog(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'setTitle'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Edit User'<\/span>);\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#fm'<\/span>).form(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'load'<\/span>,row);\r\n        url = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'editData.php?id='<\/span>+row.id;\r\n    }\r\n}\r\n<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);\">saveUser<\/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);\">'#fm'<\/span>).form(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'submit'<\/span>,{\r\n        url: url,\r\n        onSubmit: <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-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> $(<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>).form(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'validate'<\/span>);\r\n        },\r\n        success: <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);\">response<\/span>)<\/span>{\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> respData = $.parseJSON(response);\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(respData.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>){\r\n                $.messager.show({\r\n                    title: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Error'<\/span>,\r\n                    msg: respData.msg\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);\">'#dlg'<\/span>).dialog(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'close'<\/span>);\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#dg'<\/span>).datagrid(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'reload'<\/span>);\r\n            }\r\n        }\r\n    });\r\n}\r\n<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);\">destroyUser<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> row = $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#dg'<\/span>).datagrid(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'getSelected'<\/span>);\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (row){\r\n        $.messager.confirm(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Confirm'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Are you sure you want to delete this user?'<\/span>,<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);\">r<\/span>)<\/span>{\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (r){\r\n                $.post(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'deleteData.php'<\/span>, {id:row.id}, <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);\">response<\/span>)<\/span>{\r\n                    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(response.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);\">'#dg'<\/span>).datagrid(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'reload'<\/span>);\r\n                    }<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span>{\r\n                        $.messager.show({\r\n                            title: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Error'<\/span>,\r\n                            msg: respData.msg\r\n                        });\r\n                    }\r\n                },<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'json'<\/span>);\r\n            }\r\n        });\r\n    }\r\n}<\/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>&gt;<\/span><\/pre>\n<h2>Server-side Processing<\/h2>\n<p><b>Create Database Table:<\/b><br \/>\nTo store the data a table is required in the database. The following SQL creates an <code>users<\/code> table in the MySQL database with some basic fields.<\/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);\">`users`<\/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);\">`phone`<\/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 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<p><b>Database Configuration (dbConnect.php):<\/b><br \/>\nThe <code>dbConnect.php<\/code> file is used to connect with the database. Specify the database host (<code>$dbHost<\/code>), username (<code>$dbUsername<\/code>), password (<code>$dbPassword<\/code>), and name (<code>$dbName<\/code>) as per your MySQL database credentials.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;configuration&nbsp; <br \/><\/span><span style=\"color: #0000BB\">$dbHost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"localhost\"<\/span><span style=\"color: #007700\">;&nbsp; <br \/><\/span><span style=\"color: #0000BB\">$dbUsername&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">;&nbsp; <br \/><\/span><span style=\"color: #0000BB\">$dbPassword&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">;&nbsp; <br \/><\/span><span style=\"color: #0000BB\">$dbName&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"codexworld\"<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Create&nbsp;database&nbsp;connection <br \/><\/span><span style=\"color: #0000BB\">$db&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\">$dbHost<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbUsername<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbPassword<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbName<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;connection <br \/><\/span><span style=\"color: #007700\">if&nbsp;(<\/span><span style=\"color: #0000BB\">$db<\/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\">\"Connection&nbsp;failed:&nbsp;\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">); <br \/>}<\/span><\/pre>\n<p><b>Fetch Data (getData.php):<\/b><br \/>\nThis <code>getData.php<\/code> file is used to fetch data from the database using PHP and MySQL.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Based on the search terms and page number, the records are returned in JSON format.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;the&nbsp;database&nbsp;config&nbsp;file <br \/><\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConnect.php'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/><\/span><span style=\"color: #0000BB\">$page&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'page'<\/span><span style=\"color: #007700\">])&nbsp;?&nbsp;<\/span><span style=\"color: #0000BB\">intval<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'page'<\/span><span style=\"color: #007700\">])&nbsp;:&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$rows&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'rows'<\/span><span style=\"color: #007700\">])&nbsp;?&nbsp;<\/span><span style=\"color: #0000BB\">intval<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'rows'<\/span><span style=\"color: #007700\">])&nbsp;:&nbsp;<\/span><span style=\"color: #0000BB\">10<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #0000BB\">$searchTerm&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'term'<\/span><span style=\"color: #007700\">])&nbsp;?&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">real_escape_string<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'term'<\/span><span style=\"color: #007700\">])&nbsp;:&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #0000BB\">$offset&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;(<\/span><span style=\"color: #0000BB\">$page<\/span><span style=\"color: #007700\">-<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">)*<\/span><span style=\"color: #0000BB\">$rows<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #0000BB\">$result&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(); <br \/> <br \/><\/span><span style=\"color: #0000BB\">$whereSQL&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"first_name&nbsp;LIKE&nbsp;'<\/span><span style=\"color: #0000BB\">$searchTerm<\/span><span style=\"color: #DD0000\">%'&nbsp;OR&nbsp;last_name&nbsp;LIKE&nbsp;'<\/span><span style=\"color: #0000BB\">$searchTerm<\/span><span style=\"color: #DD0000\">%'&nbsp;OR&nbsp;email&nbsp;LIKE&nbsp;'<\/span><span style=\"color: #0000BB\">$searchTerm<\/span><span style=\"color: #DD0000\">%'&nbsp;OR&nbsp;phone&nbsp;LIKE&nbsp;'<\/span><span style=\"color: #0000BB\">$searchTerm<\/span><span style=\"color: #DD0000\">%'\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$result&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"SELECT&nbsp;COUNT(*)&nbsp;FROM&nbsp;users&nbsp;WHERE&nbsp;<\/span><span style=\"color: #0000BB\">$whereSQL<\/span><span style=\"color: #DD0000\">\"<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">$row&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$result<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">fetch_row<\/span><span style=\"color: #007700\">(); <br \/><\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"total\"<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">]; <br \/> <br \/><\/span><span style=\"color: #0000BB\">$result&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(&nbsp;<\/span><span style=\"color: #DD0000\">\"SELECT&nbsp;*&nbsp;FROM&nbsp;users&nbsp;WHERE&nbsp;<\/span><span style=\"color: #0000BB\">$whereSQL<\/span><span style=\"color: #DD0000\">&nbsp;ORDER&nbsp;BY&nbsp;id&nbsp;DESC&nbsp;LIMIT&nbsp;<\/span><span style=\"color: #0000BB\">$offset<\/span><span style=\"color: #DD0000\">,<\/span><span style=\"color: #0000BB\">$rows<\/span><span style=\"color: #DD0000\">\"<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #0000BB\">$users&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(); <br \/>while(<\/span><span style=\"color: #0000BB\">$row&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$result<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">fetch_assoc<\/span><span style=\"color: #007700\">()){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">array_push<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$users<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">); <br \/>} <br \/><\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"rows\"<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$users<\/span><span style=\"color: #007700\">; <br \/> <br \/>echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">);<\/span><\/pre>\n<p><b>Add Data (addData.php):<\/b><br \/>\nThe <code>addData.php<\/code> file is used to insert data in the database using PHP and MySQL.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/>$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'msg'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Some&nbsp;problems&nbsp;occurred,&nbsp;please&nbsp;try&nbsp;again.' <br \/><\/span><span style=\"color: #007700\">); <br \/>if(!empty(<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'first_name'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'last_name'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;!empty(&nbsp;<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'phone'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$first_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'first_name'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$last_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'last_name'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$email&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$phone&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'phone'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;the&nbsp;database&nbsp;config&nbsp;file <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConnect.php'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"INSERT&nbsp;INTO&nbsp;users(first_name,last_name,email,phone)&nbsp;VALUES&nbsp;('<\/span><span style=\"color: #0000BB\">$first_name<\/span><span style=\"color: #DD0000\">','<\/span><span style=\"color: #0000BB\">$last_name<\/span><span style=\"color: #DD0000\">','<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #DD0000\">','<\/span><span style=\"color: #0000BB\">$phone<\/span><span style=\"color: #DD0000\">')\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$insert&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/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; <br \/>&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;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'status'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'msg'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'User&nbsp;data&nbsp;has&nbsp;been&nbsp;added&nbsp;successfully!'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'msg'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;fill&nbsp;all&nbsp;the&nbsp;mandatory&nbsp;fields.'<\/span><span style=\"color: #007700\">; <br \/>} <br \/> <br \/>echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">); <br \/><\/span><\/pre>\n<p><b>Update Data (editData.php):<\/b><br \/>\nThe <code>editData.php<\/code> file is used to update data based on the row ID using PHP and MySQL.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/>$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'msg'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Some&nbsp;problems&nbsp;occurred,&nbsp;please&nbsp;try&nbsp;again.' <br \/><\/span><span style=\"color: #007700\">); <br \/>if(!empty(<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'first_name'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'last_name'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;!empty(&nbsp;<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'phone'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$first_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'first_name'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$last_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'last_name'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$email&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$phone&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'phone'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(!empty(<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$id&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">intval<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;the&nbsp;database&nbsp;config&nbsp;file <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConnect.php'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"UPDATE&nbsp;users&nbsp;SET&nbsp;first_name='<\/span><span style=\"color: #0000BB\">$first_name<\/span><span style=\"color: #DD0000\">',&nbsp;last_name='<\/span><span style=\"color: #0000BB\">$last_name<\/span><span style=\"color: #DD0000\">',&nbsp;email='<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #DD0000\">',&nbsp;phone='<\/span><span style=\"color: #0000BB\">$phone<\/span><span style=\"color: #DD0000\">'&nbsp;WHERE&nbsp;id&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$id<\/span><span style=\"color: #DD0000\">\"<\/span><span style=\"color: #007700\">; <br \/>&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\">$db<\/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;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&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;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'status'<\/span><span style=\"color: #007700\">]&nbsp;=&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: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'msg'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'User&nbsp;data&nbsp;has&nbsp;been&nbsp;updated&nbsp;successfully!'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'msg'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;fill&nbsp;all&nbsp;the&nbsp;mandatory&nbsp;fields.'<\/span><span style=\"color: #007700\">; <br \/>} <br \/> <br \/>echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">);<\/span><\/pre>\n<p><b>Delete Data (deleteData.php):<\/b><br \/>\nThe <code>deleteData.php<\/code> file is used to delete data from the database based on the row ID.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/>$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'msg'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Some&nbsp;problems&nbsp;occurred,&nbsp;please&nbsp;try&nbsp;again.' <br \/><\/span><span style=\"color: #007700\">); <br \/>if(!empty(<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'id'<\/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\">intval<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_REQUEST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;the&nbsp;database&nbsp;config&nbsp;file <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConnect.php'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <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;users&nbsp;WHERE&nbsp;id&nbsp;=&nbsp;<\/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\">$db<\/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; <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\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'status'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'msg'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'User&nbsp;data&nbsp;has&nbsp;been&nbsp;deleted&nbsp;successfully!'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/> <br \/>echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">);<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/php-crud-operations-jquery-ajax-mysql\/\">PHP CRUD Operations without Page Refresh using jQuery, Ajax, and MySQL<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>EasyUI is very useful when you want to integrate CRUD functionality instantly without writing much code. It helps to build a CRUD application with server-side processing using PHP and MySQL. There are various plugins available in EasyUI which allow you to enhance the DataGrid functionality.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>DataGrid with CRUD operations is the most used functionality for the data management section. Generally, the web page is reloaded when the CRUD operation occurs. To make the web application user-friendly, you can integrate the <\/p>\n","protected":false},"author":1,"featured_media":4168,"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":[6],"tags":[200,332,213,14,126],"class_list":["post-4165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-crud","tag-datagrid","tag-jquery-plugin","tag-php","tag-popup","cat-6-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>Build CRUD DataGrid with jQuery EasyUI using PHP and MySQL - CodexWorld<\/title>\n<meta name=\"description\" content=\"jQuery EasyUI DataGrid server-side process - Integrate EasyUI CRUD with search and pagination in the web application. Build a CRUD application with EasyUI framework using PHP and MySQL.\" \/>\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\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build CRUD DataGrid with jQuery EasyUI using PHP and MySQL - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"jQuery EasyUI DataGrid server-side process - Integrate EasyUI CRUD with search and pagination in the web application. Build a CRUD application with EasyUI framework using PHP and MySQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-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=\"2019-09-17T19:16:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-17T19:18:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/09\/build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\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=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Build CRUD DataGrid with jQuery EasyUI using PHP and MySQL\",\"datePublished\":\"2019-09-17T19:16:03+00:00\",\"dateModified\":\"2019-09-17T19:18:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/\"},\"wordCount\":550,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld.png\",\"keywords\":[\"CRUD\",\"DataGrid\",\"jQuery Plugin\",\"PHP\",\"Popup\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/\",\"name\":\"Build CRUD DataGrid with jQuery EasyUI using PHP and MySQL - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld.png\",\"datePublished\":\"2019-09-17T19:16:03+00:00\",\"dateModified\":\"2019-09-17T19:18:32+00:00\",\"description\":\"jQuery EasyUI DataGrid server-side process - Integrate EasyUI CRUD with search and pagination in the web application. Build a CRUD application with EasyUI framework using PHP and MySQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build CRUD DataGrid with jQuery EasyUI using 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":"Build CRUD DataGrid with jQuery EasyUI using PHP and MySQL - CodexWorld","description":"jQuery EasyUI DataGrid server-side process - Integrate EasyUI CRUD with search and pagination in the web application. Build a CRUD application with EasyUI framework using PHP and MySQL.","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\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/","og_locale":"en_US","og_type":"article","og_title":"Build CRUD DataGrid with jQuery EasyUI using PHP and MySQL - CodexWorld","og_description":"jQuery EasyUI DataGrid server-side process - Integrate EasyUI CRUD with search and pagination in the web application. Build a CRUD application with EasyUI framework using PHP and MySQL.","og_url":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2019-09-17T19:16:03+00:00","article_modified_time":"2019-09-17T19:18:32+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/09\/build-crud-datagrid-with-jquery-easyui-using-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":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Build CRUD DataGrid with jQuery EasyUI using PHP and MySQL","datePublished":"2019-09-17T19:16:03+00:00","dateModified":"2019-09-17T19:18:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/"},"wordCount":550,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/09\/build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld.png","keywords":["CRUD","DataGrid","jQuery Plugin","PHP","Popup"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/","url":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/","name":"Build CRUD DataGrid with jQuery EasyUI using PHP and MySQL - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/09\/build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld.png","datePublished":"2019-09-17T19:16:03+00:00","dateModified":"2019-09-17T19:18:32+00:00","description":"jQuery EasyUI DataGrid server-side process - Integrate EasyUI CRUD with search and pagination in the web application. Build a CRUD application with EasyUI framework using PHP and MySQL.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/09\/build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/09\/build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld.png","width":1366,"height":768,"caption":"build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/build-crud-datagrid-with-jquery-easyui-using-php-mysql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Build CRUD DataGrid with jQuery EasyUI using 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\/2019\/09\/build-crud-datagrid-with-jquery-easyui-using-php-mysql-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-15b","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4165","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=4165"}],"version-history":[{"count":2,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4165\/revisions"}],"predecessor-version":[{"id":4167,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4165\/revisions\/4167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/4168"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=4165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=4165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=4165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}