{"id":90,"date":"2018-03-20T18:09:07","date_gmt":"2018-03-20T18:09:07","guid":{"rendered":"https:\/\/shanecunningham.me\/blog\/?p=90"},"modified":"2020-11-14T14:30:07","modified_gmt":"2020-11-14T14:30:07","slug":"datatables-with-pagination-using-ajax-php-mysql-calling-a-php-functions","status":"publish","type":"post","link":"https:\/\/cun.ie\/blog\/2018\/03\/20\/datatables-with-pagination-using-ajax-php-mysql-calling-a-php-functions\/","title":{"rendered":"Datatables with Pagination using Ajax, PHP, MySql calling a php functions"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;3.22&#8243; custom_padding=&#8221;54px|||||&#8221;][et_pb_row _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<p>This PHP tutorial will help you create jquery Datatable 1.10.16 using a Bootstrap 3.3.7. with pagination. The tutorial is broken into 8 steps.<\/p>\n<p>We will use the following structure for the datatable:<\/p>\n<ul>\n<li>index.php<\/li>\n<li>configDB.php<\/li>\n<li>response.php<\/li>\n<\/ul>\n<p><strong>Step 1:<\/strong> Create a Bootstrap Html page called <strong>index.php<\/strong> and include the scripts and CSS below<\/p>\n<p>[\/et_pb_text][et_pb_code _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_code][et_pb_dmb_code_snippet title=&#8221;CSS&#8221; code=&#8221;PGxpbmsgaHJlZj0iaHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIiByZWw9InN0eWxlc2hlZXQiLz4KPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uZGF0YXRhYmxlcy5uZXQvMS4xMC4xNi9jc3MvZGF0YVRhYmxlcy5ib290c3RyYXAubWluLmNzcyIgcmVsPSJzdHlsZXNoZWV0Ii8+CgogPHNjcmlwdCBzcmM9Imh0dHBzOi8vY29kZS5qcXVlcnkuY29tL2pxdWVyeS0zLjMuMS5taW4uanMiCiAgaW50ZWdyaXR5PSJzaGEyNTYtRmdwQ2IvS0pRbExOZk91OTF0YTMyby9OTVp4bHR3Um84UXRta01SZEF1OD0iCiAgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvanMvYm9vdHN0cmFwLm1pbi5qcyI+PC9zY3JpcHQ+IAogICAgPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiIHNyYz0iaHR0cHM6Ly9jZG4uZGF0YXRhYmxlcy5uZXQvci9kdC9kdC0xLjEwLjkvZGF0YXRhYmxlcy5taW4uanMiPjwvc2NyaXB0PiAKICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBzcmM9Imh0dHBzOi8vY2RuLmRhdGF0YWJsZXMubmV0LzEuMTAuMTYvanMvanF1ZXJ5LmRhdGFUYWJsZXMubWluLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBzcmM9Imh0dHBzOi8vY2RuLmRhdGF0YWJsZXMubmV0LzEuMTAuMTYvanMvZGF0YVRhYmxlcy5ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4=&#8221; admin_label=&#8221;Code Snippet&#8221; language=&#8221;html&#8221; style=&#8221;github-gist&#8221; linenums=&#8221;on&#8221; _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]PGxpbmsgaHJlZj0iaHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIiByZWw9InN0eWxlc2hlZXQiLz4KPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uZGF0YXRhYmxlcy5uZXQvMS4xMC4xNi9jc3MvZGF0YVRhYmxlcy5ib290c3RyYXAubWluLmNzcyIgcmVsPSJzdHlsZXNoZWV0Ii8+CgogPHNjcmlwdCBzcmM9Imh0dHBzOi8vY29kZS5qcXVlcnkuY29tL2pxdWVyeS0zLjMuMS5taW4uanMiCiAgaW50ZWdyaXR5PSJzaGEyNTYtRmdwQ2IvS0pRbExOZk91OTF0YTMyby9OTVp4bHR3Um84UXRta01SZEF1OD0iCiAgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvanMvYm9vdHN0cmFwLm1pbi5qcyI+PC9zY3JpcHQ+IAogICAgPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiIHNyYz0iaHR0cHM6Ly9jZG4uZGF0YXRhYmxlcy5uZXQvci9kdC9kdC0xLjEwLjkvZGF0YXRhYmxlcy5taW4uanMiPjwvc2NyaXB0PiAKICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBzcmM9Imh0dHBzOi8vY2RuLmRhdGF0YWJsZXMubmV0LzEuMTAuMTYvanMvanF1ZXJ5LmRhdGFUYWJsZXMubWluLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBzcmM9Imh0dHBzOi8vY2RuLmRhdGF0YWJsZXMubmV0LzEuMTAuMTYvanMvZGF0YVRhYmxlcy5ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4=[\/et_pb_dmb_code_snippet][et_pb_text _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<p><strong>Step 2:<\/strong> Add the Html below to inside the body tags<\/p>\n<p>[\/et_pb_text][et_pb_dmb_code_snippet code=&#8221;PGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgIDxkaXYgY2xhc3MKICAgIDxkaXYgY2xhc3M9ImhlYWRlciI+PGgxPlNlcnZlciBzaWRlIERhdGFUYWJsZSBkZW1vIGluIFBocCxNeXNxbCBhbmQgQWpheCA8L2gxPjwvZGl2PgogICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgICA8dGFibGUgaWQ9ImVtcGxveWVlLWdyaWQiIGNsYXNzPSJ0YWJsZSB0YWJsZS1zdHJpcGVkIHRhYmxlLWJvcmRlcmVkIiBzdHlsZT0id2lkdGg6MTAwJSI+CiAgICAgICAgICAgIDx0aGVhZD4KICAgICAgICAgICAgPHRyPgogICAgICAgICAgICAgICAgPHRoPkVtcGxveWVlIG5hbWU8L3RoPgogICAgICAgICAgICAgICAgPHRoPlNhbGFyeTwvdGg+CiAgICAgICAgICAgICAgICA8dGg+QWdlPC90aD4KICAgICAgICAgICAgPC90cj4KICAgICAgICAgICAgPC90aGVhZD4KICAgICAgICA8L3RhYmxlPgogICAgPC9kaXY+CjwvZGl2Pg==&#8221; admin_label=&#8221;Code Snippet&#8221; language=&#8221;html&#8221; style=&#8221;github-gist&#8221; linenums=&#8221;on&#8221; _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]PGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgIDxkaXYgY2xhc3MKICAgIDxkaXYgY2xhc3M9ImhlYWRlciI+PGgxPlNlcnZlciBzaWRlIERhdGFUYWJsZSBkZW1vIGluIFBocCxNeXNxbCBhbmQgQWpheCA8L2gxPjwvZGl2PgogICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgICA8dGFibGUgaWQ9ImVtcGxveWVlLWdyaWQiIGNsYXNzPSJ0YWJsZSB0YWJsZS1zdHJpcGVkIHRhYmxlLWJvcmRlcmVkIiBzdHlsZT0id2lkdGg6MTAwJSI+CiAgICAgICAgICAgIDx0aGVhZD4KICAgICAgICAgICAgPHRyPgogICAgICAgICAgICAgICAgPHRoPkVtcGxveWVlIG5hbWU8L3RoPgogICAgICAgICAgICAgICAgPHRoPlNhbGFyeTwvdGg+CiAgICAgICAgICAgICAgICA8dGg+QWdlPC90aD4KICAgICAgICAgICAgPC90cj4KICAgICAgICAgICAgPC90aGVhZD4KICAgICAgICA8L3RhYmxlPgogICAgPC9kaXY+CjwvZGl2Pg==[\/et_pb_dmb_code_snippet][et_pb_text _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<p><strong>Step 3:<\/strong> Instantiate the datatable object in<strong> index.php<\/strong><\/p>\n<p>[\/et_pb_text][et_pb_dmb_code_snippet code=&#8221;JChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24gKCkgewogICAgICAgICAgdmFyIGRhdGFUYWJsZSA9ICQoJyNlbXBsb3llZS1ncmlkJykuRGF0YVRhYmxlKHsKICAgICAgICAgICAgICAicmVzcG9uc2l2ZSI6IHRydWUsCiAgICAgICAgICAgICAgInByb2Nlc3NpbmciOiB0cnVlLAogICAgICAgICAgICAgICJzZXJ2ZXJTaWRlIjogdHJ1ZSwKICAgICAgICAgICAgICAiYWpheCI6IHsKICAgICAgICAgICAgICAgICAgdXJsOiAiYWpheC9yZXNwb25zZS5waHAiLCAvLyBqc29uIGRhdGFzb3VyY2UKICAgICAgICAgICAgICAgICAgZGF0YToge2FjdGlvbjogJ2dldEVNUCd9LCAvLyBTZXQgdGhlIFBPU1QgdmFyaWFibGUgIGFycmF5IGFuZCBhZGRzIGFjdGlvbjogZ2V0RU1QCiAgICAgICAgICAgICAgICAgIHR5cGU6ICdwb3N0JywgIC8vIG1ldGhvZCAgLCBieSBkZWZhdWx0IGdldAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgZXJyb3I6IGZ1bmN0aW9uICgpIHsgIC8vIGVycm9yIGhhbmRsaW5nCiAgICAgICAgICAgICAgICAgICQoIi5lbXBsb3llZS1ncmlkLWVycm9yIikuaHRtbCgiIik7CiAgICAgICAgICAgICAgICAgICQoIiNlbXBsb3llZS1ncmlkIikuYXBwZW5kKCc8dGJvZHkgY2xhc3M9ImVtcGxveWVlLWdyaWQtZXJyb3IiPjx0cj48dGggY29sc3Bhbj0iMyI+Tm8gZGF0YSBmb3VuZCBpbiB0aGUgc2VydmVyPC90aD48L3RyPjwvdGJvZHk+Jyk7CiAgICAgICAgICAgICAgICAgICQoIiNlbXBsb3llZS1ncmlkX3Byb2Nlc3NpbmciKS5jc3MoImRpc3BsYXkiLCAibm9uZSIpOwogICAgICAgICAgICAgIH0KICAgICAgICAgIH0pOwogICAgICB9KTs=&#8221; admin_label=&#8221;Code Snippet&#8221; language=&#8221;javascript&#8221; style=&#8221;github-gist&#8221; linenums=&#8221;on&#8221; _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]JChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24gKCkgewogICAgICAgICAgdmFyIGRhdGFUYWJsZSA9ICQoJyNlbXBsb3llZS1ncmlkJykuRGF0YVRhYmxlKHsKICAgICAgICAgICAgICAicmVzcG9uc2l2ZSI6IHRydWUsCiAgICAgICAgICAgICAgInByb2Nlc3NpbmciOiB0cnVlLAogICAgICAgICAgICAgICJzZXJ2ZXJTaWRlIjogdHJ1ZSwKICAgICAgICAgICAgICAiYWpheCI6IHsKICAgICAgICAgICAgICAgICAgdXJsOiAiYWpheC9yZXNwb25zZS5waHAiLCAvLyBqc29uIGRhdGFzb3VyY2UKICAgICAgICAgICAgICAgICAgZGF0YToge2FjdGlvbjogJ2dldEVNUCd9LCAvLyBTZXQgdGhlIFBPU1QgdmFyaWFibGUgIGFycmF5IGFuZCBhZGRzIGFjdGlvbjogZ2V0RU1QCiAgICAgICAgICAgICAgICAgIHR5cGU6ICdwb3N0JywgIC8vIG1ldGhvZCAgLCBieSBkZWZhdWx0IGdldAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgZXJyb3I6IGZ1bmN0aW9uICgpIHsgIC8vIGVycm9yIGhhbmRsaW5nCiAgICAgICAgICAgICAgICAgICQoIi5lbXBsb3llZS1ncmlkLWVycm9yIikuaHRtbCgiIik7CiAgICAgICAgICAgICAgICAgICQoIiNlbXBsb3llZS1ncmlkIikuYXBwZW5kKCc8dGJvZHkgY2xhc3M9ImVtcGxveWVlLWdyaWQtZXJyb3IiPjx0cj48dGggY29sc3Bhbj0iMyI+Tm8gZGF0YSBmb3VuZCBpbiB0aGUgc2VydmVyPC90aD48L3RyPjwvdGJvZHk+Jyk7CiAgICAgICAgICAgICAgICAgICQoIiNlbXBsb3llZS1ncmlkX3Byb2Nlc3NpbmciKS5jc3MoImRpc3BsYXkiLCAibm9uZSIpOwogICAgICAgICAgICAgIH0KICAgICAgICAgIH0pOwogICAgICB9KTs=[\/et_pb_dmb_code_snippet][et_pb_text _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<p><strong>Step 4:<\/strong> Create a database connection file called <strong>config.php<\/strong><\/p>\n<p>[\/et_pb_text][et_pb_dmb_code_snippet code=&#8221;PD9waHAKZGVmaW5lKCdEQl9TRVJWRVInLCAnbG9jYWxob3N0Jyk7CmRlZmluZSgnREJfVVNFUk5BTUUnLCAndXNlcm5hbWUnKTsKZGVmaW5lKCdEQl9QQVNTV09SRCcsICdwYXNzd29yZEZvckRCJyk7CmRlZmluZSgnREJfTkFNRScsICdEYXRhYmFzZU5hbWUnKTsKJERCY29ubmVjdCA9IG15c3FsaV9jb25uZWN0KERCX1NFUlZFUiwgREJfVVNFUk5BTUUsIERCX1BBU1NXT1JELCBEQl9OQU1FKTsKLy9lY2hvICJDb25uZWN0IFN1Y2Nlc3NmdWxseS4gSG9zdCBpbmZvOiAiIC4gbXlzcWxpX2dldF9ob3N0X2luZm8oJERCY29ubmVjdCk7CmlmICghJERCY29ubmVjdCkgewogICAgZGllKCJDb25uZWN0aW9uIGZhaWxlZDogIiAuIG15c3FsaV9jb25uZWN0X2Vycm9yKCkpOwp9&#8243; admin_label=&#8221;Code Snippet&#8221; style=&#8221;github-gist&#8221; linenums=&#8221;on&#8221; _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]PD9waHAKZGVmaW5lKCdEQl9TRVJWRVInLCAnbG9jYWxob3N0Jyk7CmRlZmluZSgnREJfVVNFUk5BTUUnLCAndXNlcm5hbWUnKTsKZGVmaW5lKCdEQl9QQVNTV09SRCcsICdwYXNzd29yZEZvckRCJyk7CmRlZmluZSgnREJfTkFNRScsICdEYXRhYmFzZU5hbWUnKTsKJERCY29ubmVjdCA9IG15c3FsaV9jb25uZWN0KERCX1NFUlZFUiwgREJfVVNFUk5BTUUsIERCX1BBU1NXT1JELCBEQl9OQU1FKTsKLy9lY2hvICJDb25uZWN0IFN1Y2Nlc3NmdWxseS4gSG9zdCBpbmZvOiAiIC4gbXlzcWxpX2dldF9ob3N0X2luZm8oJERCY29ubmVjdCk7CmlmICghJERCY29ubmVjdCkgewogICAgZGllKCJDb25uZWN0aW9uIGZhaWxlZDogIiAuIG15c3FsaV9jb25uZWN0X2Vycm9yKCkpOwp9[\/et_pb_dmb_code_snippet][et_pb_text _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<p><strong>Step 5<\/strong>: For this example, you will need to load data from the MySQL database, so we need to create a database table to store and retrieve data.<\/p>\n<p>[\/et_pb_text][et_pb_dmb_code_snippet code=&#8221;LS0KLS0gVGFibGUgc3RydWN0dXJlIGZvciB0YWJsZSBgZW1wbG95ZWVgCi0tCgpDUkVBVEUgVEFCTEUgSUYgTk9UIEVYSVNUUyBgZW1wbG95ZWVgICgKICBgaWRgIGludCgxMSkgTk9UIE5VTEwgQVVUT19JTkNSRU1FTlQgQ09NTUVOVCAncHJpbWFyeSBrZXknLAogIGBlbXBsb3llZV9uYW1lYCB2YXJjaGFyKDI1NSkgTk9UIE5VTEwgQ09NTUVOVCAnZW1wbG95ZWUgbmFtZScsCiAgYGVtcGxveWVlX3NhbGFyeWAgZG91YmxlIE5PVCBOVUxMIENPTU1FTlQgJ2VtcGxveWVlIHNhbGFyeScsCiAgYGVtcGxveWVlX2FnZWAgaW50KDExKSBOT1QgTlVMTCBDT01NRU5UICdlbXBsb3llZSBhZ2UnLAogIFBSSU1BUlkgS0VZIChgaWRgKQopIEVOR0lORT1Jbm5vREIgIERFRkFVTFQgQ0hBUlNFVD1sYXRpbjEgQ09NTUVOVD0nZGF0YXRhYmxlIGRlbW8gdGFibGUnIEFVVE9fSU5DUkVNRU5UPTY0IDsKCi0tCi0tIER1bXBpbmcgZGF0YSBmb3IgdGFibGUgYGVtcGxveWVlYAotLQoKSU5TRVJUIElOVE8gYGVtcGxveWVlYCAoYGlkYCwgYGVtcGxveWVlX25hbWVgLCBgZW1wbG95ZWVfc2FsYXJ5YCwgYGVtcGxveWVlX2FnZWApIFZBTFVFUwooMSwgJ1RpZ2VyIE5peG9uJywgMzIwODAwLCA2MSksCigyLCAnR2FycmV0dCBXaW50ZXJzJywgMTcwNzUwLCA2MyksCigzLCAnQXNodG9uIENveCcsIDg2MDAwLCA2NiksCig0LCAnQ2VkcmljIEtlbGx5JywgNDMzMDYwLCAyMiksCig1LCAnQWlyaSBTYXRvdScsIDE2MjcwMCwgMzMpLAooNiwgJ0JyaWVsbGUgV2lsbGlhbXNvbicsIDM3MjAwMCwgNjEpLAooNywgJ0hlcnJvZCBDaGFuZGxlcicsIDEzNzUwMCwgNTkpLAooOCwgJ1Job25hIERhdmlkc29uJywgMzI3OTAwLCA1NSksCig5LCAnQ29sbGVlbiBIdXJzdCcsIDIwNTUwMCwgMzkpLAooMTAsICdTb255YSBGcm9zdCcsIDEwMzYwMCwgMjMpLAooMTEsICdKZW5hIEdhaW5lcycsIDkwNTYwLCAzMCksCigxMiwgJ1F1aW5uIEZseW5uJywgMzQyMDAwLCAyMiksCigxMywgJ0NoYXJkZSBNYXJzaGFsbCcsIDQ3MDYwMCwgMzYpLAooMTQsICdIYWxleSBLZW5uZWR5JywgMzEzNTAwLCA0MyksCigxNSwgJ1RhdHlhbmEgRml0enBhdHJpY2snLCAzODU3NTAsIDE5KSwKKDE2LCAnTWljaGFlbCBTaWx2YScsIDE5ODUwMCwgNjYpLAooMTcsICdQYXVsIEJ5cmQnLCA3MjUwMDAsIDY0KSwKKDE4LCAnR2xvcmlhIExpdHRsZScsIDIzNzUwMCwgNTkpLAooMTksICdCcmFkbGV5IEdyZWVyJywgMTMyMDAwLCA0MSksCigyMCwgJ0RhaSBSaW9zJywgMjE3NTAwLCAzNSksCigyMSwgJ0plbmV0dGUgQ2FsZHdlbGwnLCAzNDUwMDAsIDMwKSwKKDIyLCAnWXVyaSBCZXJyeScsIDY3NTAwMCwgNDApLAooMjMsICdDYWVzYXIgVmFuY2UnLCAxMDY0NTAsIDIxKSwKKDI0LCAnRG9yaXMgV2lsZGVyJywgODU2MDAsIDIzKSwKKDI1LCAnQW5nZWxpY2EgUmFtb3MnLCAxMjAwMDAwLCA0NyksCigyNiwgJ0dhdmluIEpveWNlJywgOTI1NzUsIDQyKSwKKDI3LCAnSmVubmlmZXIgQ2hhbmcnLCAzNTc2NTAsIDI4KSwKKDI4LCAnQnJlbmRlbiBXYWduZXInLCAyMDY4NTAsIDI4KSwKKDI5LCAnRmlvbmEgR3JlZW4nLCA4NTAwMDAsIDQ4KSwKKDMwLCAnU2hvdSBJdG91JywgMTYzMDAwLCAyMCksCigzMSwgJ01pY2hlbGxlIEhvdXNlJywgOTU0MDAsIDM3KSwKKDMyLCAnU3VraSBCdXJrcycsIDExNDUwMCwgNTMpLAooMzMsICdQcmVzY290dCBCYXJ0bGV0dCcsIDE0NTAwMCwgMjcpLAooMzQsICdHYXZpbiBDb3J0ZXonLCAyMzU1MDAsIDIyKSwKKDM1LCAnTWFydGVuYSBNY2NyYXknLCAzMjQwNTAsIDQ2KSwKKDM2LCAnVW5pdHkgQnV0bGVyJywgODU2NzUsIDQ3KSwKKDM3LCAnSG93YXJkIEhhdGZpZWxkJywgMTY0NTAwLCA1MSksCigzOCwgJ0hvcGUgRnVlbnRlcycsIDEwOTg1MCwgNDEpLAooMzksICdWaXZpYW4gSGFycmVsbCcsIDQ1MjUwMCwgNjIpLAooNDAsICdUaW1vdGh5IE1vb25leScsIDEzNjIwMCwgMzcpLAooNDEsICdKYWNrc29uIEJyYWRzaGF3JywgNjQ1NzUwLCA2NSksCig0MiwgJ09saXZpYSBMaWFuZycsIDIzNDUwMCwgNjQpLAooNDMsICdCcnVubyBOYXNoJywgMTYzNTAwLCAzOCksCig0NCwgJ1Nha3VyYSBZYW1hbW90bycsIDEzOTU3NSwgMzcpLAooNDUsICdUaG9yIFdhbHRvbicsIDk4NTQwLCA2MSksCig0NiwgJ0Zpbm4gQ2FtYWNobycsIDg3NTAwLCA0NyksCig0NywgJ1NlcmdlIEJhbGR3aW4nLCAxMzg1NzUsIDY0KSwKKDQ4LCAnWmVuYWlkYSBGcmFuaycsIDEyNTI1MCwgNjMpLAooNDksICdab3JpdGEgU2VycmFubycsIDExNTAwMCwgNTYpLAooNTAsICdKZW5uaWZlciBBY29zdGEnLCA3NTY1MCwgNDMpLAooNTEsICdDYXJhIFN0ZXZlbnMnLCAxNDU2MDAsIDQ2KSwKKDUyLCAnSGVybWlvbmUgQnV0bGVyJywgMzU2MjUwLCA0NyksCig1MywgJ0xhZWwgR3JlZXInLCAxMDM1MDAsIDIxKSwKKDU0LCAnSm9uYXMgQWxleGFuZGVyJywgODY1MDAsIDMwKSwKKDU1LCAnU2hhZCBEZWNrZXInLCAxODMwMDAsIDUxKSwKKDU2LCAnTWljaGFlbCBCcnVjZScsIDE4MzAwMCwgMjkpLAooNTcsICdEb25uYSBTbmlkZXInLCAxMTIwMDAsIDI3KTs=&#8221; admin_label=&#8221;Code Snippet&#8221; language=&#8221;sql&#8221; style=&#8221;github-gist&#8221; linenums=&#8221;on&#8221; _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]LS0KLS0gVGFibGUgc3RydWN0dXJlIGZvciB0YWJsZSBgZW1wbG95ZWVgCi0tCgpDUkVBVEUgVEFCTEUgSUYgTk9UIEVYSVNUUyBgZW1wbG95ZWVgICgKICBgaWRgIGludCgxMSkgTk9UIE5VTEwgQVVUT19JTkNSRU1FTlQgQ09NTUVOVCAncHJpbWFyeSBrZXknLAogIGBlbXBsb3llZV9uYW1lYCB2YXJjaGFyKDI1NSkgTk9UIE5VTEwgQ09NTUVOVCAnZW1wbG95ZWUgbmFtZScsCiAgYGVtcGxveWVlX3NhbGFyeWAgZG91YmxlIE5PVCBOVUxMIENPTU1FTlQgJ2VtcGxveWVlIHNhbGFyeScsCiAgYGVtcGxveWVlX2FnZWAgaW50KDExKSBOT1QgTlVMTCBDT01NRU5UICdlbXBsb3llZSBhZ2UnLAogIFBSSU1BUlkgS0VZIChgaWRgKQopIEVOR0lORT1Jbm5vREIgIERFRkFVTFQgQ0hBUlNFVD1sYXRpbjEgQ09NTUVOVD0nZGF0YXRhYmxlIGRlbW8gdGFibGUnIEFVVE9fSU5DUkVNRU5UPTY0IDsKCi0tCi0tIER1bXBpbmcgZGF0YSBmb3IgdGFibGUgYGVtcGxveWVlYAotLQoKSU5TRVJUIElOVE8gYGVtcGxveWVlYCAoYGlkYCwgYGVtcGxveWVlX25hbWVgLCBgZW1wbG95ZWVfc2FsYXJ5YCwgYGVtcGxveWVlX2FnZWApIFZBTFVFUwooMSwgJ1RpZ2VyIE5peG9uJywgMzIwODAwLCA2MSksCigyLCAnR2FycmV0dCBXaW50ZXJzJywgMTcwNzUwLCA2MyksCigzLCAnQXNodG9uIENveCcsIDg2MDAwLCA2NiksCig0LCAnQ2VkcmljIEtlbGx5JywgNDMzMDYwLCAyMiksCig1LCAnQWlyaSBTYXRvdScsIDE2MjcwMCwgMzMpLAooNiwgJ0JyaWVsbGUgV2lsbGlhbXNvbicsIDM3MjAwMCwgNjEpLAooNywgJ0hlcnJvZCBDaGFuZGxlcicsIDEzNzUwMCwgNTkpLAooOCwgJ1Job25hIERhdmlkc29uJywgMzI3OTAwLCA1NSksCig5LCAnQ29sbGVlbiBIdXJzdCcsIDIwNTUwMCwgMzkpLAooMTAsICdTb255YSBGcm9zdCcsIDEwMzYwMCwgMjMpLAooMTEsICdKZW5hIEdhaW5lcycsIDkwNTYwLCAzMCksCigxMiwgJ1F1aW5uIEZseW5uJywgMzQyMDAwLCAyMiksCigxMywgJ0NoYXJkZSBNYXJzaGFsbCcsIDQ3MDYwMCwgMzYpLAooMTQsICdIYWxleSBLZW5uZWR5JywgMzEzNTAwLCA0MyksCigxNSwgJ1RhdHlhbmEgRml0enBhdHJpY2snLCAzODU3NTAsIDE5KSwKKDE2LCAnTWljaGFlbCBTaWx2YScsIDE5ODUwMCwgNjYpLAooMTcsICdQYXVsIEJ5cmQnLCA3MjUwMDAsIDY0KSwKKDE4LCAnR2xvcmlhIExpdHRsZScsIDIzNzUwMCwgNTkpLAooMTksICdCcmFkbGV5IEdyZWVyJywgMTMyMDAwLCA0MSksCigyMCwgJ0RhaSBSaW9zJywgMjE3NTAwLCAzNSksCigyMSwgJ0plbmV0dGUgQ2FsZHdlbGwnLCAzNDUwMDAsIDMwKSwKKDIyLCAnWXVyaSBCZXJyeScsIDY3NTAwMCwgNDApLAooMjMsICdDYWVzYXIgVmFuY2UnLCAxMDY0NTAsIDIxKSwKKDI0LCAnRG9yaXMgV2lsZGVyJywgODU2MDAsIDIzKSwKKDI1LCAnQW5nZWxpY2EgUmFtb3MnLCAxMjAwMDAwLCA0NyksCigyNiwgJ0dhdmluIEpveWNlJywgOTI1NzUsIDQyKSwKKDI3LCAnSmVubmlmZXIgQ2hhbmcnLCAzNTc2NTAsIDI4KSwKKDI4LCAnQnJlbmRlbiBXYWduZXInLCAyMDY4NTAsIDI4KSwKKDI5LCAnRmlvbmEgR3JlZW4nLCA4NTAwMDAsIDQ4KSwKKDMwLCAnU2hvdSBJdG91JywgMTYzMDAwLCAyMCksCigzMSwgJ01pY2hlbGxlIEhvdXNlJywgOTU0MDAsIDM3KSwKKDMyLCAnU3VraSBCdXJrcycsIDExNDUwMCwgNTMpLAooMzMsICdQcmVzY290dCBCYXJ0bGV0dCcsIDE0NTAwMCwgMjcpLAooMzQsICdHYXZpbiBDb3J0ZXonLCAyMzU1MDAsIDIyKSwKKDM1LCAnTWFydGVuYSBNY2NyYXknLCAzMjQwNTAsIDQ2KSwKKDM2LCAnVW5pdHkgQnV0bGVyJywgODU2NzUsIDQ3KSwKKDM3LCAnSG93YXJkIEhhdGZpZWxkJywgMTY0NTAwLCA1MSksCigzOCwgJ0hvcGUgRnVlbnRlcycsIDEwOTg1MCwgNDEpLAooMzksICdWaXZpYW4gSGFycmVsbCcsIDQ1MjUwMCwgNjIpLAooNDAsICdUaW1vdGh5IE1vb25leScsIDEzNjIwMCwgMzcpLAooNDEsICdKYWNrc29uIEJyYWRzaGF3JywgNjQ1NzUwLCA2NSksCig0MiwgJ09saXZpYSBMaWFuZycsIDIzNDUwMCwgNjQpLAooNDMsICdCcnVubyBOYXNoJywgMTYzNTAwLCAzOCksCig0NCwgJ1Nha3VyYSBZYW1hbW90bycsIDEzOTU3NSwgMzcpLAooNDUsICdUaG9yIFdhbHRvbicsIDk4NTQwLCA2MSksCig0NiwgJ0Zpbm4gQ2FtYWNobycsIDg3NTAwLCA0NyksCig0NywgJ1NlcmdlIEJhbGR3aW4nLCAxMzg1NzUsIDY0KSwKKDQ4LCAnWmVuYWlkYSBGcmFuaycsIDEyNTI1MCwgNjMpLAooNDksICdab3JpdGEgU2VycmFubycsIDExNTAwMCwgNTYpLAooNTAsICdKZW5uaWZlciBBY29zdGEnLCA3NTY1MCwgNDMpLAooNTEsICdDYXJhIFN0ZXZlbnMnLCAxNDU2MDAsIDQ2KSwKKDUyLCAnSGVybWlvbmUgQnV0bGVyJywgMzU2MjUwLCA0NyksCig1MywgJ0xhZWwgR3JlZXInLCAxMDM1MDAsIDIxKSwKKDU0LCAnSm9uYXMgQWxleGFuZGVyJywgODY1MDAsIDMwKSwKKDU1LCAnU2hhZCBEZWNrZXInLCAxODMwMDAsIDUxKSwKKDU2LCAnTWljaGFlbCBCcnVjZScsIDE4MzAwMCwgMjkpLAooNTcsICdEb25uYSBTbmlkZXInLCAxMTIwMDAsIDI3KTs=[\/et_pb_dmb_code_snippet][et_pb_text _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<p><strong>Step 6:<\/strong> Create the<strong> response.php<\/strong> and include the connection at the top of the file<\/p>\n<p>[\/et_pb_text][et_pb_dmb_code_snippet code=&#8221;aWYgKGlzc2V0KCRfUE9TVFsnYWN0aW9uJ10pICYmICFlbXB0eSgkX1BPU1RbJ2FjdGlvbiddKSkgewogICAgJGFjdGlvbiA9ICRfUE9TVFsnYWN0aW9uJ107CiAgICBzd2l0Y2ggKCRhY3Rpb24pIHsKICAgICAgICBjYXNlICdnZXRFTVAnIDoKICAgICAgICAgICAgZ2V0RU1QKCREQmNvbm5lY3QpOwogICAgICAgICAgICBicmVhazsKICAgICAgICBjYXNlICdnZXRQcm9kJyA6CiAgICAgICAgICAgIGdldFByb2R1Y3RzKCREQmNvbm5lY3QpOwogICAgICAgICAgICBicmVhazsKICAgICAgICAvLyAuLi5ldGMuLi4KICAgIH0KfQ==&#8221; admin_label=&#8221;Code Snippet&#8221; style=&#8221;github-gist&#8221; linenums=&#8221;on&#8221; _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]aWYgKGlzc2V0KCRfUE9TVFsnYWN0aW9uJ10pICYmICFlbXB0eSgkX1BPU1RbJ2FjdGlvbiddKSkgewogICAgJGFjdGlvbiA9ICRfUE9TVFsnYWN0aW9uJ107CiAgICBzd2l0Y2ggKCRhY3Rpb24pIHsKICAgICAgICBjYXNlICdnZXRFTVAnIDoKICAgICAgICAgICAgZ2V0RU1QKCREQmNvbm5lY3QpOwogICAgICAgICAgICBicmVhazsKICAgICAgICBjYXNlICdnZXRQcm9kJyA6CiAgICAgICAgICAgIGdldFByb2R1Y3RzKCREQmNvbm5lY3QpOwogICAgICAgICAgICBicmVhazsKICAgICAgICAvLyAuLi5ldGMuLi4KICAgIH0KfQ==[\/et_pb_dmb_code_snippet][et_pb_text _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]<\/p>\n<p><strong>Step 8: <\/strong>Create the function <strong>getEMP<\/strong> and pass in the $DBconnect object.<\/p>\n<p>[\/et_pb_text][et_pb_dmb_code_snippet code=&#8221;ZnVuY3Rpb24gZ2V0RU1QKCREQmNvbm5lY3QpCnsKLy8gc3RvcmluZyAgcmVxdWVzdCAoaWUsIGdldC9wb3N0KSBnbG9iYWwgYXJyYXkgdG8gYSB2YXJpYWJsZQogICAgJHJlcXVlc3REYXRhID0gJF9SRVFVRVNUOwogICAgJGNvbHVtbnMgPSBhcnJheSgKLy8gZGF0YXRhYmxlIGNvbHVtbiBpbmRleCAgPT4gZGF0YWJhc2UgY29sdW1uIG5hbWUKICAgICAgICAwID0+ICdlbXBsb3llZV9uYW1lJywKICAgICAgICAxID0+ICdlbXBsb3llZV9zYWxhcnknLAogICAgICAgIDIgPT4gJ2VtcGxveWVlX2FnZScKICAgICk7Ci8vIGdldHRpbmcgdG90YWwgbnVtYmVyIHJlY29yZHMgd2l0aG91dCBhbnkgc2VhcmNoCiAgICAkc3FsID0gIlNFTEVDVCBlbXBsb3llZV9uYW1lLCBlbXBsb3llZV9zYWxhcnksIGVtcGxveWVlX2FnZSAiOwogICAgJHNxbCAuPSAiIEZST00gZW1wbG95ZWUiOwogICAgJHF1ZXJ5ID0gbXlzcWxpX3F1ZXJ5KCREQmNvbm5lY3QsICRzcWwpIG9yIGRpZSgiTXlzcWwgTXlzcWwgRXJyb3IgaW4gZ2V0dGluZyA6IGdldCBwcm9kdWN0cyIpOwogICAgJHRvdGFsRGF0YSA9IG15c3FsaV9udW1fcm93cygkcXVlcnkpOwogICAgJHRvdGFsRmlsdGVyZWQgPSAkdG90YWxEYXRhOyAgLy8gd2hlbiB0aGVyZSBpcyBubyBzZWFyY2ggcGFyYW1ldGVyIHRoZW4gdG90YWwgbnVtYmVyIHJvd3MgPSB0b3RhbCBudW1iZXIgZmlsdGVyZWQgcm93cy4KICAgICRzcWwgPSAiU0VMRUNUIGVtcGxveWVlX25hbWUsIGVtcGxveWVlX3NhbGFyeSwgZW1wbG95ZWVfYWdlICI7CiAgICAkc3FsIC49ICIgRlJPTSBlbXBsb3llZSBXSEVSRSAxPTEiOwogICAgaWYgKCFlbXB0eSgkcmVxdWVzdERhdGFbJ3NlYXJjaCddWyd2YWx1ZSddKSkgeyAgIC8vIGlmIHRoZXJlIGlzIGEgc2VhcmNoIHBhcmFtZXRlciwgJHJlcXVlc3REYXRhWydzZWFyY2gnXVsndmFsdWUnXSBjb250YWlucyBzZWFyY2ggcGFyYW1ldGVyCiAgICAgICAgJHNxbCAuPSAiIEFORCAoIGVtcGxveWVlX25hbWUgTElLRSAnIiAuICRyZXF1ZXN0RGF0YVsnc2VhcmNoJ11bJ3ZhbHVlJ10gLiAiJScgIjsKICAgICAgICAkc3FsIC49ICIgT1IgZW1wbG95ZWVfc2FsYXJ5IExJS0UgJyIgLiAkcmVxdWVzdERhdGFbJ3NlYXJjaCddWyd2YWx1ZSddIC4gIiUnICI7CiAgICAgICAgJHNxbCAuPSAiIE9SIGVtcGxveWVlX2FnZSBMSUtFICciIC4gJHJlcXVlc3REYXRhWydzZWFyY2gnXVsndmFsdWUnXSAuICIlJyApIjsKICAgIH0KICAgICRxdWVyeSA9IG15c3FsaV9xdWVyeSgkREJjb25uZWN0LCAkc3FsKSBvciBkaWUoIk15c3FsIE15c3FsIEVycm9yIGluIGdldHRpbmcgOiBnZXQgcHJvZHVjdHMiKTsKICAgICR0b3RhbEZpbHRlcmVkID0gbXlzcWxpX251bV9yb3dzKCRxdWVyeSk7IC8vIHdoZW4gdGhlcmUgaXMgYSBzZWFyY2ggcGFyYW1ldGVyIHRoZW4gd2UgaGF2ZSB0byBtb2RpZnkgdG90YWwgbnVtYmVyIGZpbHRlcmVkIHJvd3MgYXMgcGVyIHNlYXJjaCByZXN1bHQuCiAgICAkc3FsIC49ICIgT1JERVIgQlkgIiAuICRjb2x1bW5zWyRyZXF1ZXN0RGF0YVsnb3JkZXInXVswXVsnY29sdW1uJ11dIC4gIiAgICIgLiAkcmVxdWVzdERhdGFbJ29yZGVyJ11bMF1bJ2RpciddIC4gIiAgIExJTUlUICIgLiAkcmVxdWVzdERhdGFbJ3N0YXJ0J10gLiAiICwiIC4gJHJlcXVlc3REYXRhWydsZW5ndGgnXSAuICIgICAiOwogICAgLyogJHJlcXVlc3REYXRhWydvcmRlciddWzBdWydjb2x1bW4nXSBjb250YWlucyBjb2xtdW4gaW5kZXgsICRyZXF1ZXN0RGF0YVsnb3JkZXInXVswXVsnZGlyJ10gY29udGFpbnMgb3JkZXIgc3VjaCBhcyBhc2MvZGVzYyAsICRyZXF1ZXN0RGF0YVsnc3RhcnQnXSBjb250YWlucyBzdGFydCByb3cgbnVtYmVyICwkcmVxdWVzdERhdGFbJ2xlbmd0aCddIGNvbnRhaW5zIGxpbWl0IGxlbmd0aC4gKi8KICAgICRxdWVyeSA9IG15c3FsaV9xdWVyeSgkREJjb25uZWN0LCAkc3FsKSBvciBkaWUoIk15c3FsIE15c3FsIEVycm9yIGluIGdldHRpbmcgOiBnZXQgcHJvZHVjdHMiKTsKICAgICRkYXRhID0gYXJyYXkoKTsKICAgIHdoaWxlICgkcm93ID0gbXlzcWxpX2ZldGNoX2FycmF5KCRxdWVyeSkpIHsgIC8vIHByZXBhcmluZyBhbiBhcnJheQogICAgICAgICRuZXN0ZWREYXRhID0gYXJyYXkoKTsKICAgICAgICAkbmVzdGVkRGF0YVtdID0gJHJvd1siZW1wbG95ZWVfbmFtZSJdOwogICAgICAgICRuZXN0ZWREYXRhW10gPSAkcm93WyJlbXBsb3llZV9zYWxhcnkiXTsKICAgICAgICAkbmVzdGVkRGF0YVtdID0gJHJvd1siZW1wbG95ZWVfYWdlIl07CiAgICAgICAgJGRhdGFbXSA9ICRuZXN0ZWREYXRhOwogICAgfQogICAgJGpzb25fZGF0YSA9IGFycmF5KAogICAgICAgICJkcmF3IiA9PiBpbnR2YWwoJHJlcXVlc3REYXRhWydkcmF3J10pLCAgIC8vIGZvciBldmVyeSByZXF1ZXN0L2RyYXcgYnkgY2xpZW50c2lkZSAsIHRoZXkgc2VuZCBhIG51bWJlciBhcyBhIHBhcmFtZXRlciwgd2hlbiB0aGV5IHJlY2lldmUgYSByZXNwb25zZS9kYXRhIHRoZXkgZmlyc3QgY2hlY2sgdGhlIGRyYXcgbnVtYmVyLCBzbyB3ZSBhcmUgc2VuZGluZyBzYW1lIG51bWJlciBpbiBkcmF3LgogICAgICAgICJyZWNvcmRzVG90YWwiID0+IGludHZhbCgkdG90YWxEYXRhKSwgIC8vIHRvdGFsIG51bWJlciBvZiByZWNvcmRzCiAgICAgICAgInJlY29yZHNGaWx0ZXJlZCIgPT4gaW50dmFsKCR0b3RhbEZpbHRlcmVkKSwgLy8gdG90YWwgbnVtYmVyIG9mIHJlY29yZHMgYWZ0ZXIgc2VhcmNoaW5nLCBpZiB0aGVyZSBpcyBubyBzZWFyY2hpbmcgdGhlbiB0b3RhbEZpbHRlcmVkID0gdG90YWxEYXRhCiAgICAgICAgImRhdGEiID0+ICRkYXRhICAgLy8gdG90YWwgZGF0YSBhcnJheQogICAgKTsKICAgIGVjaG8ganNvbl9lbmNvZGUoJGpzb25fZGF0YSk7ICAvLyBzZW5kIGRhdGEgYXMganNvbiBmb3JtYXQKfQ==&#8221; admin_label=&#8221;Code Snippet&#8221; style=&#8221;github-gist&#8221; linenums=&#8221;on&#8221; _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;]ZnVuY3Rpb24gZ2V0RU1QKCREQmNvbm5lY3QpCnsKLy8gc3RvcmluZyAgcmVxdWVzdCAoaWUsIGdldC9wb3N0KSBnbG9iYWwgYXJyYXkgdG8gYSB2YXJpYWJsZQogICAgJHJlcXVlc3REYXRhID0gJF9SRVFVRVNUOwogICAgJGNvbHVtbnMgPSBhcnJheSgKLy8gZGF0YXRhYmxlIGNvbHVtbiBpbmRleCAgPT4gZGF0YWJhc2UgY29sdW1uIG5hbWUKICAgICAgICAwID0+ICdlbXBsb3llZV9uYW1lJywKICAgICAgICAxID0+ICdlbXBsb3llZV9zYWxhcnknLAogICAgICAgIDIgPT4gJ2VtcGxveWVlX2FnZScKICAgICk7Ci8vIGdldHRpbmcgdG90YWwgbnVtYmVyIHJlY29yZHMgd2l0aG91dCBhbnkgc2VhcmNoCiAgICAkc3FsID0gIlNFTEVDVCBlbXBsb3llZV9uYW1lLCBlbXBsb3llZV9zYWxhcnksIGVtcGxveWVlX2FnZSAiOwogICAgJHNxbCAuPSAiIEZST00gZW1wbG95ZWUiOwogICAgJHF1ZXJ5ID0gbXlzcWxpX3F1ZXJ5KCREQmNvbm5lY3QsICRzcWwpIG9yIGRpZSgiTXlzcWwgTXlzcWwgRXJyb3IgaW4gZ2V0dGluZyA6IGdldCBwcm9kdWN0cyIpOwogICAgJHRvdGFsRGF0YSA9IG15c3FsaV9udW1fcm93cygkcXVlcnkpOwogICAgJHRvdGFsRmlsdGVyZWQgPSAkdG90YWxEYXRhOyAgLy8gd2hlbiB0aGVyZSBpcyBubyBzZWFyY2ggcGFyYW1ldGVyIHRoZW4gdG90YWwgbnVtYmVyIHJvd3MgPSB0b3RhbCBudW1iZXIgZmlsdGVyZWQgcm93cy4KICAgICRzcWwgPSAiU0VMRUNUIGVtcGxveWVlX25hbWUsIGVtcGxveWVlX3NhbGFyeSwgZW1wbG95ZWVfYWdlICI7CiAgICAkc3FsIC49ICIgRlJPTSBlbXBsb3llZSBXSEVSRSAxPTEiOwogICAgaWYgKCFlbXB0eSgkcmVxdWVzdERhdGFbJ3NlYXJjaCddWyd2YWx1ZSddKSkgeyAgIC8vIGlmIHRoZXJlIGlzIGEgc2VhcmNoIHBhcmFtZXRlciwgJHJlcXVlc3REYXRhWydzZWFyY2gnXVsndmFsdWUnXSBjb250YWlucyBzZWFyY2ggcGFyYW1ldGVyCiAgICAgICAgJHNxbCAuPSAiIEFORCAoIGVtcGxveWVlX25hbWUgTElLRSAnIiAuICRyZXF1ZXN0RGF0YVsnc2VhcmNoJ11bJ3ZhbHVlJ10gLiAiJScgIjsKICAgICAgICAkc3FsIC49ICIgT1IgZW1wbG95ZWVfc2FsYXJ5IExJS0UgJyIgLiAkcmVxdWVzdERhdGFbJ3NlYXJjaCddWyd2YWx1ZSddIC4gIiUnICI7CiAgICAgICAgJHNxbCAuPSAiIE9SIGVtcGxveWVlX2FnZSBMSUtFICciIC4gJHJlcXVlc3REYXRhWydzZWFyY2gnXVsndmFsdWUnXSAuICIlJyApIjsKICAgIH0KICAgICRxdWVyeSA9IG15c3FsaV9xdWVyeSgkREJjb25uZWN0LCAkc3FsKSBvciBkaWUoIk15c3FsIE15c3FsIEVycm9yIGluIGdldHRpbmcgOiBnZXQgcHJvZHVjdHMiKTsKICAgICR0b3RhbEZpbHRlcmVkID0gbXlzcWxpX251bV9yb3dzKCRxdWVyeSk7IC8vIHdoZW4gdGhlcmUgaXMgYSBzZWFyY2ggcGFyYW1ldGVyIHRoZW4gd2UgaGF2ZSB0byBtb2RpZnkgdG90YWwgbnVtYmVyIGZpbHRlcmVkIHJvd3MgYXMgcGVyIHNlYXJjaCByZXN1bHQuCiAgICAkc3FsIC49ICIgT1JERVIgQlkgIiAuICRjb2x1bW5zWyRyZXF1ZXN0RGF0YVsnb3JkZXInXVswXVsnY29sdW1uJ11dIC4gIiAgICIgLiAkcmVxdWVzdERhdGFbJ29yZGVyJ11bMF1bJ2RpciddIC4gIiAgIExJTUlUICIgLiAkcmVxdWVzdERhdGFbJ3N0YXJ0J10gLiAiICwiIC4gJHJlcXVlc3REYXRhWydsZW5ndGgnXSAuICIgICAiOwogICAgLyogJHJlcXVlc3REYXRhWydvcmRlciddWzBdWydjb2x1bW4nXSBjb250YWlucyBjb2xtdW4gaW5kZXgsICRyZXF1ZXN0RGF0YVsnb3JkZXInXVswXVsnZGlyJ10gY29udGFpbnMgb3JkZXIgc3VjaCBhcyBhc2MvZGVzYyAsICRyZXF1ZXN0RGF0YVsnc3RhcnQnXSBjb250YWlucyBzdGFydCByb3cgbnVtYmVyICwkcmVxdWVzdERhdGFbJ2xlbmd0aCddIGNvbnRhaW5zIGxpbWl0IGxlbmd0aC4gKi8KICAgICRxdWVyeSA9IG15c3FsaV9xdWVyeSgkREJjb25uZWN0LCAkc3FsKSBvciBkaWUoIk15c3FsIE15c3FsIEVycm9yIGluIGdldHRpbmcgOiBnZXQgcHJvZHVjdHMiKTsKICAgICRkYXRhID0gYXJyYXkoKTsKICAgIHdoaWxlICgkcm93ID0gbXlzcWxpX2ZldGNoX2FycmF5KCRxdWVyeSkpIHsgIC8vIHByZXBhcmluZyBhbiBhcnJheQogICAgICAgICRuZXN0ZWREYXRhID0gYXJyYXkoKTsKICAgICAgICAkbmVzdGVkRGF0YVtdID0gJHJvd1siZW1wbG95ZWVfbmFtZSJdOwogICAgICAgICRuZXN0ZWREYXRhW10gPSAkcm93WyJlbXBsb3llZV9zYWxhcnkiXTsKICAgICAgICAkbmVzdGVkRGF0YVtdID0gJHJvd1siZW1wbG95ZWVfYWdlIl07CiAgICAgICAgJGRhdGFbXSA9ICRuZXN0ZWREYXRhOwogICAgfQogICAgJGpzb25fZGF0YSA9IGFycmF5KAogICAgICAgICJkcmF3IiA9PiBpbnR2YWwoJHJlcXVlc3REYXRhWydkcmF3J10pLCAgIC8vIGZvciBldmVyeSByZXF1ZXN0L2RyYXcgYnkgY2xpZW50c2lkZSAsIHRoZXkgc2VuZCBhIG51bWJlciBhcyBhIHBhcmFtZXRlciwgd2hlbiB0aGV5IHJlY2lldmUgYSByZXNwb25zZS9kYXRhIHRoZXkgZmlyc3QgY2hlY2sgdGhlIGRyYXcgbnVtYmVyLCBzbyB3ZSBhcmUgc2VuZGluZyBzYW1lIG51bWJlciBpbiBkcmF3LgogICAgICAgICJyZWNvcmRzVG90YWwiID0+IGludHZhbCgkdG90YWxEYXRhKSwgIC8vIHRvdGFsIG51bWJlciBvZiByZWNvcmRzCiAgICAgICAgInJlY29yZHNGaWx0ZXJlZCIgPT4gaW50dmFsKCR0b3RhbEZpbHRlcmVkKSwgLy8gdG90YWwgbnVtYmVyIG9mIHJlY29yZHMgYWZ0ZXIgc2VhcmNoaW5nLCBpZiB0aGVyZSBpcyBubyBzZWFyY2hpbmcgdGhlbiB0b3RhbEZpbHRlcmVkID0gdG90YWxEYXRhCiAgICAgICAgImRhdGEiID0+ICRkYXRhICAgLy8gdG90YWwgZGF0YSBhcnJheQogICAgKTsKICAgIGVjaG8ganNvbl9lbmNvZGUoJGpzb25fZGF0YSk7ICAvLyBzZW5kIGRhdGEgYXMganNvbiBmb3JtYXQKfQ==[\/et_pb_dmb_code_snippet][et_pb_text _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p>Links to the Demo and Source code below.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221; column_structure=&#8221;1_4,1_4,1_4,1_4&#8243;][et_pb_column _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221; type=&#8221;1_4&#8243;][et_pb_button button_url=&#8221;https:\/\/projects.shanecunningham.me\/jquery\/&#8221; url_new_window=&#8221;on&#8221; button_text=&#8221;Demo&#8221; _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_button][\/et_pb_column][et_pb_column _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221; type=&#8221;1_4&#8243;][et_pb_button button_url=&#8221;https:\/\/gist.github.com\/ShaneCunn\/0012cd8f492f72cd669910ef55c0e007&#8243; url_new_window=&#8221;on&#8221; button_text=&#8221;Source Code&#8221; _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221;][\/et_pb_button][\/et_pb_column][et_pb_column _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221; type=&#8221;1_4&#8243;][\/et_pb_column][et_pb_column _builder_version=&#8221;4.7.0&#8243; _module_preset=&#8221;default&#8221; type=&#8221;1_4&#8243;][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This PHP tutorial will help you create jquery Datatable 1.10.16 using a Bootstrap 3.3.7. with pagination. The tutorial is broken into 8 steps. We will use the following structure for the datatable: index.php configDB.php response.php Step 1: Create a Bootstrap Html page called index.php and include the scripts and CSS belowPGxpbmsgaHJlZj0iaHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIiByZWw9InN0eWxlc2hlZXQiLz4KPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uZGF0YXRhYmxlcy5uZXQvMS4xMC4xNi9jc3MvZGF0YVRhYmxlcy5ib290c3RyYXAubWluLmNzcyIgcmVsPSJzdHlsZXNoZWV0Ii8+CgogPHNjcmlwdCBzcmM9Imh0dHBzOi8vY29kZS5qcXVlcnkuY29tL2pxdWVyeS0zLjMuMS5taW4uanMiCiAgaW50ZWdyaXR5PSJzaGEyNTYtRmdwQ2IvS0pRbExOZk91OTF0YTMyby9OTVp4bHR3Um84UXRta01SZEF1OD0iCiAgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvanMvYm9vdHN0cmFwLm1pbi5qcyI+PC9zY3JpcHQ+IAogICAgPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiIHNyYz0iaHR0cHM6Ly9jZG4uZGF0YXRhYmxlcy5uZXQvci9kdC9kdC0xLjEwLjkvZGF0YXRhYmxlcy5taW4uanMiPjwvc2NyaXB0PiAKICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBzcmM9Imh0dHBzOi8vY2RuLmRhdGF0YWJsZXMubmV0LzEuMTAuMTYvanMvanF1ZXJ5LmRhdGFUYWJsZXMubWluLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBzcmM9Imh0dHBzOi8vY2RuLmRhdGF0YWJsZXMubmV0LzEuMTAuMTYvanMvZGF0YVRhYmxlcy5ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4=Step 2: Add the Html [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":99,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"This PHP tutorial will help you create jquery <a href=\"https:\/\/datatables.net\/\">Datatable<\/a> 1.10.16 using a <a href=\"https:\/\/getbootstrap.com\/docs\/3.3\/\">Bootstrap 3.3.7<\/a>. with pagination. The tutorial is broken into 8 steps.\n\nWe will use the following structure for the datatable:\n<ol>\n \t<li>index.php<\/li>\n \t<li>configDB.php<\/li>\n \t<li>response.php<\/li>\n<\/ol>\n<!--more-->\n\n<strong>Step 1:<\/strong> Create a Bootstrap Html page called index.php and include the scripts and CSS below\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\" rel=\"stylesheet\"\/&gt;\n&lt;link href=\"https:\/\/cdn.datatables.net\/1.10.16\/css\/dataTables.bootstrap.min.css\" rel=\"stylesheet\"\/&gt;\n\n &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.min.js\"\n  integrity=\"sha256-FgpCb\/KJQlLNfOu91ta32o\/NMZxltwRo8QtmkMRdAu8=\"\n  crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt; \n    &lt;script type=\"text\/javascript\" src=\"https:\/\/cdn.datatables.net\/r\/dt\/dt-1.10.9\/datatables.min.js\"&gt;&lt;\/script&gt; \n    &lt;script type=\"text\/javascript\" src=\"https:\/\/cdn.datatables.net\/1.10.16\/js\/jquery.dataTables.min.js\"&gt;&lt;\/script&gt;\n    &lt;script type=\"text\/javascript\" src=\"https:\/\/cdn.datatables.net\/1.10.16\/js\/dataTables.bootstrap.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<strong>Step 2:<\/strong>  Add the Html below to inside the body tags\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"container\"&gt;\n    &lt;div class\n    &lt;div class=\"header\"&gt;&lt;h1&gt;Server side DataTable demo in Php,Mysql and Ajax &lt;\/h1&gt;&lt;\/div&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;table id=\"employee-grid\" class=\"table table-striped table-bordered\" style=\"width:100%\"&gt;\n            &lt;thead&gt;\n            &lt;tr&gt;\n                &lt;th&gt;Employee name&lt;\/th&gt;\n                &lt;th&gt;Salary&lt;\/th&gt;\n                &lt;th&gt;Age&lt;\/th&gt;\n            &lt;\/tr&gt;\n            &lt;\/thead&gt;\n        &lt;\/table&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<strong>Step 3:<\/strong> Instantiate the datatable object in index.php\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-highlight=\"6-9\">$(document).ready(function () {\n          var dataTable = $('#employee-grid').DataTable({\n              \"responsive\": true,\n              \"processing\": true,\n              \"serverSide\": true,\n              \"ajax\": {\n                  url: \"ajax\/response.php\", \/\/ json datasource\n                  data: {action: 'getEMP'}, \/\/ Set the POST variable  array and adds action: getEMP\n                  type: 'post',  \/\/ method  , by default get\n              },\n              error: function () {  \/\/ error handling\n                  $(\".employee-grid-error\").html(\"\");\n                  $(\"#employee-grid\").append('&lt;tbody class=\"employee-grid-error\"&gt;&lt;tr&gt;&lt;th colspan=\"3\"&gt;No data found in the server&lt;\/th&gt;&lt;\/tr&gt;&lt;\/tbody&gt;');\n                  $(\"#employee-grid_processing\").css(\"display\", \"none\");\n              }\n          });\n      });<\/pre>\n<strong>Step 4:<\/strong> Create a database connection file called config.php\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">&lt;?php\ndefine('DB_SERVER', 'localhost');\ndefine('DB_USERNAME', 'username');\ndefine('DB_PASSWORD', 'passwordForDB');\ndefine('DB_NAME', 'DatabaseName');\n$DBconnect = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);\n\/\/echo \"Connect Successfully. Host info: \" . mysqli_get_host_info($DBconnect);\nif (!$DBconnect) {\n    die(\"Connection failed: \" . mysqli_connect_error());\n}<\/pre>\n<strong>Step 5:<\/strong> For this example,  you will need to load data from MySQL database, so we need to create a database table to store and retrieve data.\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"sql\">--\n-- Table structure for table `employee`\n--\n\nCREATE TABLE IF NOT EXISTS `employee` (\n  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key',\n  `employee_name` varchar(255) NOT NULL COMMENT 'employee name',\n  `employee_salary` double NOT NULL COMMENT 'employee salary',\n  `employee_age` int(11) NOT NULL COMMENT 'employee age',\n  PRIMARY KEY (`id`)\n) ENGINE=InnoDB  DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=64 ;\n\n--\n-- Dumping data for table `employee`\n--\n\nINSERT INTO `employee` (`id`, `employee_name`, `employee_salary`, `employee_age`) VALUES\n(1, 'Tiger Nixon', 320800, 61),\n(2, 'Garrett Winters', 170750, 63),\n(3, 'Ashton Cox', 86000, 66),\n(4, 'Cedric Kelly', 433060, 22),\n(5, 'Airi Satou', 162700, 33),\n(6, 'Brielle Williamson', 372000, 61),\n(7, 'Herrod Chandler', 137500, 59),\n(8, 'Rhona Davidson', 327900, 55),\n(9, 'Colleen Hurst', 205500, 39),\n(10, 'Sonya Frost', 103600, 23),\n(11, 'Jena Gaines', 90560, 30),\n(12, 'Quinn Flynn', 342000, 22),\n(13, 'Charde Marshall', 470600, 36),\n(14, 'Haley Kennedy', 313500, 43),\n(15, 'Tatyana Fitzpatrick', 385750, 19),\n(16, 'Michael Silva', 198500, 66),\n(17, 'Paul Byrd', 725000, 64),\n(18, 'Gloria Little', 237500, 59),\n(19, 'Bradley Greer', 132000, 41),\n(20, 'Dai Rios', 217500, 35),\n(21, 'Jenette Caldwell', 345000, 30),\n(22, 'Yuri Berry', 675000, 40),\n(23, 'Caesar Vance', 106450, 21),\n(24, 'Doris Wilder', 85600, 23),\n(25, 'Angelica Ramos', 1200000, 47),\n(26, 'Gavin Joyce', 92575, 42),\n(27, 'Jennifer Chang', 357650, 28),\n(28, 'Brenden Wagner', 206850, 28),\n(29, 'Fiona Green', 850000, 48),\n(30, 'Shou Itou', 163000, 20),\n(31, 'Michelle House', 95400, 37),\n(32, 'Suki Burks', 114500, 53),\n(33, 'Prescott Bartlett', 145000, 27),\n(34, 'Gavin Cortez', 235500, 22),\n(35, 'Martena Mccray', 324050, 46),\n(36, 'Unity Butler', 85675, 47),\n(37, 'Howard Hatfield', 164500, 51),\n(38, 'Hope Fuentes', 109850, 41),\n(39, 'Vivian Harrell', 452500, 62),\n(40, 'Timothy Mooney', 136200, 37),\n(41, 'Jackson Bradshaw', 645750, 65),\n(42, 'Olivia Liang', 234500, 64),\n(43, 'Bruno Nash', 163500, 38),\n(44, 'Sakura Yamamoto', 139575, 37),\n(45, 'Thor Walton', 98540, 61),\n(46, 'Finn Camacho', 87500, 47),\n(47, 'Serge Baldwin', 138575, 64),\n(48, 'Zenaida Frank', 125250, 63),\n(49, 'Zorita Serrano', 115000, 56),\n(50, 'Jennifer Acosta', 75650, 43),\n(51, 'Cara Stevens', 145600, 46),\n(52, 'Hermione Butler', 356250, 47),\n(53, 'Lael Greer', 103500, 21),\n(54, 'Jonas Alexander', 86500, 30),\n(55, 'Shad Decker', 183000, 51),\n(56, 'Michael Bruce', 183000, 29),\n(57, 'Donna Snider', 112000, 27);\n\n<\/pre>\n<strong>Step 6:<\/strong> Create the response.php file and include the connection at the top of the response.php file:\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">include '..\/DB\/configDB.php';<\/pre>\n<strong>Step 7: <\/strong>Add an If statement to response.php, this checks to see if the <a href=\"https:\/\/www.tutorialrepublic.com\/php-tutorial\/php-get-and-post.php\"><strong>POST<\/strong><\/a> variable is set and is also not empty.  It then sets the $action variable and which is then used in a switch statement to call the getEMP function passing in a database connection object.\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-highlight=\"1,5\">if (isset($_POST['action']) &amp;&amp; !empty($_POST['action'])) {\n    $action = $_POST['action'];\n    switch ($action) {\n        case 'getEMP' :\n            getEMP($DBconnect);\n            break;\n        case 'getProd' :\n            getProducts($DBconnect);\n            break;\n        \/\/ ...etc...\n    }\n}<\/pre>\n<strong>Step 8:  <\/strong>Create the function getEMP and pass in the $DBconnect object.\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">function getEMP($DBconnect)\n{\n\/\/ storing  request (ie, get\/post) global array to a variable\n    $requestData = $_REQUEST;\n    $columns = array(\n\/\/ datatable column index  =&gt; database column name\n        0 =&gt; 'employee_name',\n        1 =&gt; 'employee_salary',\n        2 =&gt; 'employee_age'\n    );\n\/\/ getting total number records without any search\n    $sql = \"SELECT employee_name, employee_salary, employee_age \";\n    $sql .= \" FROM employee\";\n    $query = mysqli_query($DBconnect, $sql) or die(\"Mysql Mysql Error in getting : get products\");\n    $totalData = mysqli_num_rows($query);\n    $totalFiltered = $totalData;  \/\/ when there is no search parameter then total number rows = total number filtered rows.\n    $sql = \"SELECT employee_name, employee_salary, employee_age \";\n    $sql .= \" FROM employee WHERE 1=1\";\n    if (!empty($requestData['search']['value'])) {   \/\/ if there is a search parameter, $requestData['search']['value'] contains search parameter\n        $sql .= \" AND ( employee_name LIKE '\" . $requestData['search']['value'] . \"%' \";\n        $sql .= \" OR employee_salary LIKE '\" . $requestData['search']['value'] . \"%' \";\n        $sql .= \" OR employee_age LIKE '\" . $requestData['search']['value'] . \"%' )\";\n    }\n    $query = mysqli_query($DBconnect, $sql) or die(\"Mysql Mysql Error in getting : get products\");\n    $totalFiltered = mysqli_num_rows($query); \/\/ when there is a search parameter then we have to modify total number filtered rows as per search result.\n    $sql .= \" ORDER BY \" . $columns[$requestData['order'][0]['column']] . \"   \" . $requestData['order'][0]['dir'] . \"   LIMIT \" . $requestData['start'] . \" ,\" . $requestData['length'] . \"   \";\n    \/* $requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc\/desc , $requestData['start'] contains start row number ,$requestData['length'] contains limit length. *\/\n    $query = mysqli_query($DBconnect, $sql) or die(\"Mysql Mysql Error in getting : get products\");\n    $data = array();\n    while ($row = mysqli_fetch_array($query)) {  \/\/ preparing an array\n        $nestedData = array();\n        $nestedData[] = $row[\"employee_name\"];\n        $nestedData[] = $row[\"employee_salary\"];\n        $nestedData[] = $row[\"employee_age\"];\n        $data[] = $nestedData;\n    }\n    $json_data = array(\n        \"draw\" =&gt; intval($requestData['draw']),   \/\/ for every request\/draw by clientside , they send a number as a parameter, when they recieve a response\/data they first check the draw number, so we are sending same number in draw.\n        \"recordsTotal\" =&gt; intval($totalData),  \/\/ total number of records\n        \"recordsFiltered\" =&gt; intval($totalFiltered), \/\/ total number of records after searching, if there is no searching then totalFiltered = totalData\n        \"data\" =&gt; $data   \/\/ total data array\n    );\n    echo json_encode($json_data);  \/\/ send data as json format\n}<\/pre>\nYou can view the Demo and download the source code below.\n\n<a href=\"https:\/\/projects.shanecunningham.me\/jquery\/\" rel=\"noopener\">Live Demo <\/a> <a href=\"https:\/\/gist.github.com\/ShaneCunn\/0012cd8f492f72cd669910ef55c0e007\" rel=\"noopener\">Source code<\/a>","_et_gb_content_width":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-aside","has-post-thumbnail","hentry","category-php","post_format-post-format-aside"],"_links":{"self":[{"href":"https:\/\/cun.ie\/blog\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cun.ie\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cun.ie\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cun.ie\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cun.ie\/blog\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":0,"href":"https:\/\/cun.ie\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cun.ie\/blog\/wp-json\/wp\/v2\/media\/99"}],"wp:attachment":[{"href":"https:\/\/cun.ie\/blog\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cun.ie\/blog\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cun.ie\/blog\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}