How to do Serverside Listing and Filtering using JQuery Datatables in Laravel

hey guys welcome back my channel in this video we will learn about laravel data tables and how to retrieve data from server list them paginate it and also do searching so let's get started so i have created a simple data table in laravel by using post example there is a title slug and description so you can list them and paginate them but i have also provided you filter in the case if you want to filter a data table between a particular range so i have created a brand new project i have create a new model now and i will name my model has post model after this i will specify fields related to models such as table name primary key and fillable fillable columns now just like model i will also create a controller give it a name as data table controller so the index method just displays the html file when the page loads the data table sends request to server which retrieves list of posts so i will quickly set up my html table so the first thing is to do is we have to specify a selector just like we call uh other jquery plugins then after that we will have to specify another property called olang okay so this here we can put some message to a user before displaying lists such as loading list or please wait so followed by pagination paging type currently it is simple numbers then to enable designation you have to do paging true and then you can also specify the length or the list of items that to be resp that to be retrieved with this you have to also specify other properties such as processing server type and ordering let's end also let's keep ordering as false and next property is ajax it takes up the first first thing is uh the method of method of request that is get method second is the url and the third is data to be passed currently we will leave this as empty while doing filtering from date range we will i will show you how to do that so when you retrieve data the data comes directly to data filter property so when you retrieve the thing you receive the data from data filter function so within this you have to parse the json and then you have to assign that too few variables and you have to and then you have to return json json has a string which is used by data table then comes column properties it is an array item is object so after data table i will set up routes then i will create a new method and name it as posts so this is used for getting data and also the filtering operation also will be performed here so now for demonstration purpose i will retrieve the first 10 rows of the table the serial number is used to display the list of numbers that is count along that we have to also pass the total which says the total number of records in our table so i am facing a problem here i am not getting query parameters from data tables so let's see what is the error and resolve it so there is a issue of incorrect naming i have fixed that now so let's refresh and see whether the data we have whether we are retrieving the query parameters from data tables so we are receiving now so we'll go to my controller and fetch the parameter so the start query param specifies the offset we have to take and length length query parameter specifies the amount of rows we have to retrieve from database so now you can see the pagination is uh working very well so let's continue from doing searching for that in query query parameters there is a value search and within the search there is another key called value you have to retrieve that value that value contains the search search search query so now using rware query i will i will i will retrieve the name and slug which belongs to the which is similar to search query the user has typed so this will retrieve me the results of all those matching records when user enters in search search input field so it is working pretty well now the next thing we have to add a custom filter for this to do that i will create i will do some changes in my html i will add two fields that is from date and to date this is this data we will get the date range we will get the records by filtering the date range the new function reload table refreshes the ajax which in turn the data table again sends the request to the server so now in our post method we will save the incoming from data and two data query parameters into a variable and use them for filtering data to do that i will go to my post model and create a scope and name it scope data filter method this takes three arguments the first one is the query which is by default the second one is from date which is assigned to null and the third is to date by default the value is also null so here i will do my filtering logic and return the new updated updated query so now i will call the data filter method which will filter data and the same thing i will do to the below query so coming to there uh keep this so now i will come to tables and what i do is i will try to retrieve some records from the date range and see whether it how it works so till now it has worked pretty well so now we are getting the rose even from the adding the date range and all uh so this is this was all about laravel data tables if you like my video subscribe to my channel uh so and also i have skipped this and also i have given a link to the source code invite in the description below thank you for watching bye

Channel: The Code Learners

Views: 2,222

Keywords: laravel jquery datatables, laravel datatables, jquery datatables, laravel tutorials, laravel pagination, laravel serverside ajax, laravel javascript, laravel php programming, php tutorials

Id: X-QC6uZXuk0

Length: 17min 24sec (1044 seconds)

Published: Tue Jan 12 2021