{"id":12720,"date":"2020-04-11T02:05:19","date_gmt":"2020-04-11T02:05:19","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=12720"},"modified":"2021-11-12T05:57:14","modified_gmt":"2021-11-12T05:57:14","slug":"searching-column-sorting-with-pagination-using-ajax-in-laravel-5-5","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/searching-column-sorting-with-pagination-using-ajax-in-laravel-5-5\/","title":{"rendered":"Searching, Column Sorting with Pagination using Ajax in Laravel 5.5"},"content":{"rendered":"\n<p><strong>Step 1 : Instal Laravel Application<\/strong><\/p>\n\n\n\n<p>&nbsp;If you have not install Laravel application, then you have to open command prompt, and run composert command, and then after you can run below command this command will download Laravel application, and install at define destination.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">composer create-project --prefer-dist laravel\/laravel coto-employee <span class=\"hljs-string\">\"5.5.*\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"579\" height=\"323\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/laravel-install-devopsschool.png\" alt=\"\" class=\"wp-image-12721\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/laravel-install-devopsschool.png 579w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/laravel-install-devopsschool-300x167.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/laravel-install-devopsschool-355x199.png 355w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/figure>\n\n\n\n<p><strong>Step 2 : Bootstrap 4 upgrade in laravel 5.5<\/strong><\/p>\n\n\n\n<p>Laravel 5.5 has been out for some time, Its bundled with the stable version of bootstrap v3.<\/p>\n\n\n\n<p><strong>Bootstrap 4 can be easily installed with following steps.<\/strong><\/p>\n\n\n\n<p><strong>Step 2.1 : Remove existing bootstrap<\/strong><\/p>\n\n\n\n<p>Uninstall Bootstrap<\/p>\n\n\n\n<p>npm uninstall &#8211;save-dev bootstrap-sas<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"320\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/uninstall-bootstrap3.png\" alt=\"\" data-id=\"12722\" data-full-url=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/uninstall-bootstrap3.png\" data-link=\"https:\/\/www.devopsschool.com\/blog\/?attachment_id=12722\" class=\"wp-image-12722\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/uninstall-bootstrap3.png 576w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/uninstall-bootstrap3-300x167.png 300w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p><strong>Step 2.2 : Install Bootstrap 4<\/strong><\/p>\n\n\n\n<p>Install Bootstrap 4 beta and popperjs<\/p>\n\n\n\n<p>npm install &#8211;save-dev bootstrap@^4.0.0-beta.2 popper.js<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"321\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/install-bootstrap4.png\" alt=\"\" class=\"wp-image-12723\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/install-bootstrap4.png 580w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/install-bootstrap4-300x166.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p><strong>Step 2.3 : Update code references<\/strong><\/p>\n\n\n\n<p>In&nbsp;<em>resources\/assets\/js\/bootstrap.js<\/em>&nbsp;replace<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/devopsschool-com\/6e940847bccbd0bc03a0e020bfdd2b62.js\"><\/script>\n\n\n\n<p>with<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/devopsschool-com\/35cba54f42d4c407a813421e7c5c3ac7.js\"><\/script>\n\n\n\n<p>In&nbsp;<em>resources\/assets\/sass\/app.scss<\/em>&nbsp;replace<\/p>\n\n\n\n<p>@import \u201c~bootstrap-sass\/assets\/stylesheets\/bootstrap\u201d<\/p>\n\n\n\n<p>with<\/p>\n\n\n\n<p>@import \u201c~bootstrap\/scss\/bootstrap.scss\u201d<\/p>\n\n\n\n<p>In&nbsp;<em>resources\/assets\/sass\/_variable.scss<\/em>&nbsp;replace<\/p>\n\n\n\n<p>$font-size-base: 14px;<\/p>\n\n\n\n<p>with<\/p>\n\n\n\n<p>$font-size-base: 0.875rem;<\/p>\n\n\n\n<p><strong>Step 2.4 : Recompile Assets<\/strong><\/p>\n\n\n\n<p>npm run dev<\/p>\n\n\n\n<p>Now you have removed all Bootstrap 3 references and installed Bootstrap 4<\/p>\n\n\n\n<p><strong>Step 3 &#8211; Database Connection<\/strong><\/p>\n\n\n\n<p>For make database connection you have to&nbsp;<strong>.env<\/strong>&nbsp;file and define following database configuration.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">DB_CONNECTION=mysql\nDB_HOST=localhost\nDB_PORT=3306\nDB_DATABASE=coto_employee\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/span><\/pre>\n\n\n<p><strong>Step 3 &#8211; Create Model ,Migration and Controller<\/strong><\/p>\n\n\n\n<p>After making database connection, we have to make Employee Model <strong>Employee<\/strong> ,Migration <strong>_create_employees_table<\/strong> and Controller&nbsp;<strong>EmployeeController<\/strong>&nbsp;by using php artisan command. This controller will handle http request for display data on web page with data sorting and pagination request.<\/p>\n\n\n\n<p>php artisan make:Model Employee -mc<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"319\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/make-model.png\" alt=\"\" class=\"wp-image-12724\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/make-model.png 580w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/make-model-300x165.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p><strong>Step 4 &#8211; Customise Employee Migration Table<\/strong><\/p>\n\n\n\n<p>Customise Employee migration table adding 2 fields name and email of employee under <strong>\/database\/migrations\/2020_04_11_011321_create_employees_table.php<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/devopsschool-com\/9c47913ce13ac75037eac13a2bd8fd10.js\"><\/script>\n\n\n\n<p><strong>Step 5 &#8211; Migrate Tables on Database<\/strong><\/p>\n\n\n\n<p>php artisan migrate<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"321\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/migrate.png\" alt=\"\" class=\"wp-image-12726\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/migrate.png 580w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/04\/migrate-300x166.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p><strong>Step 6 : Create Index() and fetch_data() functions in EmployeeController<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/devopsschool-com\/e567734547363e33f61d531d4583167e.js\"><\/script>\n\n\n\n<p><strong>Step 7 &#8211; Create View file<\/strong><\/p>\n\n\n\n<p>For display data on web page, in Laravel we have to create view file in&nbsp;<strong>resources\/views<\/strong>&nbsp;folder. In this folder we have to create two view files like&nbsp;<strong>employee.blade.php<\/strong>&nbsp;and&nbsp;<strong>employee_data.blade.php<\/strong>.<\/p>\n\n\n\n<p>In&nbsp;<strong>employee.blade.php<\/strong>&nbsp;you can find complete html jQuery and ajax code for data sorting and pagination. In this file we have include&nbsp;<strong>employee_data.blade.php<\/strong>&nbsp;file data by using @include statement. Below you can find source code of both view files.<\/p>\n\n\n\n<p><strong>employee.blade.php<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/devopsschool-com\/bd67368455e547b02e549faa164d33a5.js\"><\/script>\n\n\n\n<p>employee_data.blade.php<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/devopsschool-com\/42ce53e8ec804b1796280fe6940556a3.js\"><\/script>\n\n\n\n<p><strong>Step 7 &#8211; Set Route<\/strong><\/p>\n\n\n\n<p>Lastly we have to set route for controller and method which we have make under controller. For this we have to go to&nbsp;<strong>routes\/web.php<\/strong>&nbsp;file and write following code for set route.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/devopsschool-com\/6d112745177dbad91ca01794a6545006.js\"><\/script>\n\n\n<div class=\"epyt-gallery\" data-currpage=\"1\" id=\"epyt_gallery_32056\"><iframe loading=\"lazy\"  id=\"_ytid_33827\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  data-epytgalleryid=\"epyt_gallery_32056\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><div class=\"epyt-gallery-list\"><div>Sorry, there was a YouTube error.<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Step 1 : Instal Laravel Application &nbsp;If you have not install Laravel application, then you have to open command prompt, and run composert command, and then after you can run&#8230; <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5201],"tags":[5203,177],"class_list":["post-12720","post","type-post","status-publish","format-standard","hentry","category-laravel","tag-laravel","tag-php"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/12720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=12720"}],"version-history":[{"count":5,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/12720\/revisions"}],"predecessor-version":[{"id":24874,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/12720\/revisions\/24874"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=12720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=12720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=12720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}