Laravel 5.8 - DataTables Server-side Processing

hello friends in this video tutorial we are going to learn to how to implement jQuery data tables server-side processing in new version of Louisville 5.8 there are many viewers has requested us to make Laura ville 5.8 crud application by using jQuery data tables plugin and bootstrap model so here we have first start discussing how to implement jQuery data tables with Laura ville 5.8 framework jQuery data tables plugin is mainly used for display data in tabular format with feature like pagination searching data column sorting and extra now let's start discussing how to make Louisville 5.8 application with jQuery data tables server-side processing this is our testing database we will connect Louisville application with this testing database now we want to download Louisville latest version for this we have go to command prompt here we have cursor moved to folder in which we want to download Louisville latest version here we have already write composer command and after this write this command this command will download latest version it will take some time for downloading after downloading Louisville framework now first we want to make database connection so we have go to config folder and open database dot PHP file and under this file we have said my SQL database configuration like hostname set to localhost database name set to testing username set to root and password set to blank same way after this we have open dot env file and here also we have defined my SQL database configuration like host name set to localhost database name set to testing username set to root and password set to blank after making database connection now we want to create table from laravel application for this we want to create migration file for this we have to go to command prompt and write following command this command will make create Ajax cruds migration file database folder and in that folder we want to open migration folder and here we can file migration file so we have opened this file here we can see two method like up and down up method will create Ajax cruds table here first we want to define table column so here we have right dollar table variable with string method and under this we have right first name table column name same way for last name table column here we have right dollar table variable with string method and under this we have right last name same way for image table column here we have right dollar table variable with string method and under this we have right image this way we have defined table column now we have go to command prompt and here we have write this command this command will migrate table structure from laravel application to testing my SQL database so we have go to testing my SQL database here we can see Ajax cruds table has been created first we have insert some data into this table after inserting data into Ajax cruds table we will display data in jQuery data tables with Laura ville 5.8 framework now we want to create Ajax crud model so we have go to command prompt and write this command it will make Ajax crud model under app folder now we have go-to app folder and open Ajax crud dot PHP model file under this file we have write-protect dollar fillable variable is equal to array with table column like first name last name and image here we have used model for database operation after this we want to create crud controller file so we have go to command prompt and write this command it will create Ajax crud controller dot PHP file under Apps slash HTTP slash controller folder so we have go to that folder and open Ajax curd controller dot PHP file here we can see inbuilt method for all crud operation first here we have right use statement with M folder with forward slash Ajax crud model class so under this controller we can use Ajax crud model for database operation now we want to download your data tables package in this Louisville application so we have go to command prompt and write following command this command will download your data tables package in our Louisville application it will take some time for download after successfully download of you juror data tables package and install now we have go to config folder and open app dot PHP file in this file we have to define service provider and alias details this is required for use of your Alaura vel data tables package in this application now we want to publish this vendor for this we have go to command prompt and write following command it will publish this yet roller of L data table package so we can use in this application now we have go to index method and here we have right return statement with view method and under this we have right Ajax index view file it will load Ajax index dot blade dot PHP file in browser now we have go-to resources folder / views folder and open Ajax index blade PHP file in this file we have already loaded jQuery library bootstrap library and jQuery datatable library under this file we have first create table with attribute ID is equal to user table with for table column like image first name last name and action now we have moved to write jQuery code so here we have write dollar with table ID user table with data table method this method will initialize data table plugin under this method first we have right processing options set to true it will enable table process table data below this we have right server side option which have been set to true it will enable server side processing in third option we have right Ajax and under this we have right URL option which has been set to Louisville expression and between this expression we have right root method and under this we have right Ajax crud dot index it will send Ajax request to index method of Ajax crud controller below this we have right columns option which has been used to define table column details under this array we have right data options set to image and name set to image here we have define image table column details for display image in jQuery data table here we have write render callback function with four argument like data type full and meta under this function we have right return statement HTML code like image tag with source is equal to laravel expression and between this URL class width to method with slash you it will return path to public folder in which we have store images under images folder so here we have right images / data variable it will display image from public folder of laravel framework for disable image column sorting so here we have right orderable option set to false it will disable image column sorting for first-name table column here we have add new node with data option set to first name and name option set to first name same way for a define last name table column here we have add new node with data option set to last name and name option set to last name for define action table column details under data tables so here we have add new node and under this we have write data option set to action name option set to action and stop table column sorting here we have set orderable option set to false now we have moved to write PHP code so we have go to index method of Ajax crud controller and here we have write if statement and under condition we have right request method with Ajax method this condition will be true if this method has received Ajax requests under this if block we have right return statement with data tables method this method will create new data tables instance from source here we have a dove method and under this method we have right Ajax crud model class with latest method with get method here latest method will return latest data from Ajax crud table and by using get method it will convert into array send to data table source using of method here action table column data has not become from Ajax crud table so here we want to define action column so here we have right add column method with two argument in first argument we have right action table column name and in second argument we have right call back function with dollar data argument under this column we want to define edit and delete button so here we have write dollar button' variable as equal to button tag with type is equal to button name is equal to edit ID is equal to dollar data variable with ID object class is equal to edit and in button text we have write edit here this class name we will use as selector in jQuery code and we will fetch value of ID attribute for edit after this we have again we write dollar button' variable and under this we have append HTML code like button tag with type is equal to button name is equal to delete ID is equal to dollar data variable with ID object class is equal to delete and button text we have right delete here we will use delete class as selector and ID attribute value will be fetch in jQuery code for delete data operation after define edit and delete button code under this dollar button variable now we have right return statement with dollar button variable it will display edit and delete button under action table column for a new column now we want to define column which should not be escaped for this here we have write raw columns method and under this we have write table column name action lastly we have right make method with true argument it will return unsaved model instance so here our code is ready for jQuery data tables server-side processing Inler of l 5.8 now we want to set root of all method of Ajax crud controller so we have go-to routes folder web dot PHP file here we have right root class with resource method with two argument in first argument we have right Ajax crud and in second argument we have right Ajax crud controller this code will set root of all method of Ajax crud controller now we want to run laravel application for this we have go to command prompt in command prompt here we have right PHP artisan serve command it will start Louisville server and return base URL of Louisville application now we have check output in browser so here we have right Louisville application base URL slash Ajax crud so it has load Ajax crud table data in jQuery data table plugin here we can see image has been loaded in jQuery data table plugin in Louisville 5.8 framework and here we can also see edit and delete button in all row here we can perform all data tables features like searching of data data pagination column sorting of data and many more this all functionality we can done without write any line of code so this way we can implement jQuery data table plugin with Laura ville 5.8 framework by using a true data table package in next part we will seen how to insert data into my SQL table using Ajax and bootstrap model in Louisville 5.8 framework if you have any query or input regarding this video tutorial please comment your query or input in comment box or if you like this video tutorial please share with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our youtube channel forget more update regarding release of future video lastly keep watching our youtube channel thanks for watching this video tutorial

Channel: Webslesson

Views: 43,168

Keywords: laravel 5.8 ajax, laravel 5.8 ajax crud, ajax crud in laravel, laravel 5.8 datatable, yajra datatables laravel 5.8, laravel 5.8 tutorial, ajax crud operation in laravel 5.8, laravel 5.8 ajax crud tutorial, laravel 5.8 datatable ajax crud, laravel 5.8 ajax crud search sort and pagination, insert update delete using ajax in laravel 5.8, create read update and delete records in laravel 5.8 using ajax, ajax crud example in laravel 5.8 application, ajax crud operations in laravel 5.8

Id: SEOVNxH2ykA

Length: 19min 24sec (1164 seconds)

Published: Thu Apr 04 2019