JQuery Data Table Tutorial Part -2 (Server Side Processing) | DataTable Integration to Website

hello everyone uh so today we are going to learn uh about the server side processing so in the previous uh video of the data tables we understood how to implement the basic data tables but in today's session we are going to understand that and that data table was processing the data at the client side and this this lecture is all about implementing the data table server side so so this was the quote from the previous data table if you do not have any idea what was the previous lecture was all about please click on the i button and you you'll be able to see the link or i'll be pasting the link in the description box so let's quickly start uh the server side processing data so as you can see i have like all the data present in the in the t body but in the server side so this example was for the client side processing but we need to process the data at the server side we need to get the data from the server every time you perform any kind of action so let's quickly remove this data present in the html so that we'll be able to see the changes let's remove this tr as well so we have mtt body correct and i have this test dot cs html so i had created uh you know one t head already which was implemented so i'll be i'll be using full name email phone and action which i'm getting from the server so i'll be replacing this with that and let me also change the footer remember one thing it does not matter whether you have footer in your like table diagram or not but the header uh i mean the t head columns are important while rendering the data table okay so i have changed the full name email phone and action as a column so let's reload this table so now we have no data available in the table correct now what we are going to do so this was the basic data table from the previous session right so we are going to comment it out for the timing so let's comment it out and let's just remove this one so now we have nothing implemented we have no data table so you will not be able to see anything okay but let's go ahead and copy uh some existing code which is present so i'll be explaining uh you know line by line what i have done exactly so the very first thing which you need to define is the op like the column definitions uh from the of the data table so these are the column definitions so column definitions defines that i mean you need to have this format an array inside that area you should have multiple objects and that in that object you are defined you are going to define some properties like target so target defines that what should be the target of the uh you know column so if target is zero it means you are talking about this first name okay and in the same way target one two and three are talking about email phone in action and then you have one render property and it it you need to define a function for that and this function takes four arguments like data type row and meta so if we are going to like console.log the row then we will be able to see all the data which is coming from the backend so how do you want to transform a specific column that is defined by the render property okay so what i did here was that i implemented the full name and i you know merged the first name and the last name and then i created a link for that and like paste it like uh added the full name property or the variable into that and returned it okay for those targets uh for which you do not want to generate the dynamic html you can just define the target the data so the this data defines that what should be the property of the incoming data from the server which you need to bind to this column so i'm getting the email in the as a property of email from the backend so i'm just binding this data to the email and whether this uh column should be sortable or not so i made one as true i mean this email is true and phone is false so i just wanted to have the simple uh you know elements for email and phone and the last one is action so you'll be able to understand each and everything after i load the data table that what exactly i've done it so this is the action let me not explain you this right now so let me copy another you know variable which is data table options so you can directly have the data table options into this but i am you know creating separate variable for that and storing data table options so let me copy this and let's put the data table options as well okay so now you if you observe from the previous session that something has changed in this data table options so these are the normal options which was present the column definitions is a property which you need to define and for that we have passed a variable which is data table column definitions which we have already defined right so and one more thing has changed that there is one adjacent property which you need to define if you want to do the server side processing so i have defined the ajax property for that and this is my server url so this is my server url okay so this is the end point which i am going to use so let me show you the end point as well so customer controller and there is one action method or the end point called list so i'll simply copy this url so you need to adjust the url based upon your requirement so i have this customer as controller and list as action method so i'll be putting this and the method type would be post and this is all you need to load the data from the server okay and one more option is there which is called created row okay so created row helps you to perform some action while the row is getting created so let's say on each row uh let's say you you want to make one of the rows like mark the background as red or you know mark the text of that row specific row as red then based upon certain conditions you can change the color of that row as well okay so okay now i have data table options as well and data table column definitions as well let me go ahead and now initialize the data table so after i have added both of this i'll be uh initializing the data table with this data table options obviously in the data table you pass the data table options so i have passed that okay and i guess the id is same for that yes example two is the id so as you can see we have nothing here let's put a breakpoint at the back end and let's test it out so let's go here let's reload this and see it is loading the uh it has hit the you know the back-end server so as soon as we continue we are going to get the data correct so see i told you right for the target 0 which was full name i have merged first name and last name and created it as a link so it came as a link but in the action we are not able to see anything this is because let's go to the data table dot html again and then let's go to the data table column definition so we are creating this target 3 which is zero one two and three so target three is action so we are creating two links link for edit and link for delete so we are having this font awesome element which is which we have not included in our example so i'll simply add edit text and delete okay so let's reload it let's remove the breakpoint from the backend so see now you are able to you know see edit and delete for each of the row okay so let me show you how it loads the data so if i click on the second pagination link then it is again going to send me my server request now the question should be that how it is doing that where like if you have any idea about you know how the pagination and all works from the like backhand side then you must be uh having the idea that for pagination to work you need to send the current index to the server and obviously if you are searching something as well let's say i'm searching anything so it should be you know this text should be going to the server and based upon the input which you have put it should be searched on the records was present in the database or maybe if you are changing the length of the of your data table then also something needs to be sent to the server correct so how it is happening so let me quickly show you that so in the client side it was it was not the worry that you need to send some request back to the server and get the database all the data was present at the client side at the browser only but in the server side you need to send the request every time you make any uh you know change or any action to the data so let me quickly inspect the element and try to go to the network so i hope you understand that why the network tab is used in the inspect element or the developer console because we can intersect the you know each request which is going to the server or coming the response which we are getting from the server back okay so let let me do the length change so let let's say that we do not want to load the 10 records we want to load 25 records at a time so let's make a request so see it made a request so it is the headache of the data table to make a request to the server so now let's observe that what the i know the the request to the server contains when what all parameters so if you see it was a post method as we have mentioned it right the status code is 200 but if you are able to see that in the form data you will be able to see multiple parameters which was sent by the uh data table so draw is eight i mean how many time you have done specific you know action to this data table so that is defined by the draw columns 0 data column 0 name it is basically defining the parameters for each and every column so for column zero is it searchable is it orderable so if you remember that you know for phone we have made sorting as false so zero one and 2. so see i mean orderable is false for phone correct and column third so column third has some data so since we have just changed the length of the uh you know the data table it is sending the length property as 25 okay the start is zero so this start defines that what is the starting of the record so it identifies the start as zero as we denote in the array correct so start element is so let's say there are 25 elements so starting element would be 0 and the end element would be 24 correct the length is 25 the search value is nothing excuse me so the search value is sent as blank and the search regex is sent as blank okay and the order type should be ascending so this is how you your data table interacts with the you know your server so at the server side you need to trace all the parameters which was sent by the data table and process that data based upon that request so i hope you you have understood everything regarding the request phase data table sense so let me close this and let me clear the console and you know try to show you one more example so uh other than this 25 let's search something let's say uh so currently it is sending like four requests to the server but we only you know because for each and every text it is sending the request that also we can configure or change so let's see in the form data what exactly was sent to the server so for the very first character it was sent as s for this shub and for the last one it was shivam so based upon the shubham i intercepted it at the back end and then i you know source the record from the database based upon the search value and the length is still 25 so let let me clear this now let's keep the search as shubham only and let's change the length so again one request went to the server now the search value is shubham but the length got changed so by this way you need to intercept your request at the back end okay let's clear this out so your your you know uh the records in the data table will start loading up so this is how the server side processing of this table works data table works so these are the parameters let me quickly show you so i hope you understand the data table column definitions how it is working and the data table options so this is pretty much clear the paging these are the options like whether we want paging or not whether we want like ordering or not the data table should be responsive or not or as x as x i've already explained you and what about the created row so let's let's do one thing let's console.log and see how in what format the data is coming so let me do console.log and let's console.log the data okay so let's inspect the element let's go to the console and just reload the table so see in this format the data is coming from the backend so i have this uh you know customer id email first name last name phone and zip code so base and i i'm also sending the dt row id so on row created if you so i'm like you know i want to change the color of this dt and you know the fifth id i mean the customer with the fifth id so what i'm going to do is i'm just checking that if the dt row data so what is the dt row data this is the dt raw data in that data the peak is present so dot p key if that is equals to five then what i am going to do is the current row dot css should be red so the current row uh which we are getting i'm just setting the css property to red so let let me go ahead and reload it so see the first element had the you know p key as 5 so it changed its color to red so even if you go to the second page of the data table it will not show you anything but if you come to the first page it will change the color of you know the current row of your data table so this is how you can you know perform some actions on specific row which you want to have so i guess uh this is all uh if we talk about the server side processing so by this way so there are so many options present in the data table as well let that you can obviously explore if you search data table jquery go to the data tables and everything is mentioned in the documentation so just go to the full getting started guide and see i was telling you the light the server side processing so if you click on server side processing you are going to see all the sent parameters so i have already shown you the send parameter the send parameters are nothing but the parameters which the data table sends to the server while making a request so you can have a detailed you know overview of what each and every like each and every property which is being sent to the server contents and this is the return data so this is the format of the return data which your data table should have so i have made the same you know same kind of format for my response okay and this was the additional properties which you can add to your response okay and so i guess this is pretty much it about the data table i hope you must have understand so many things about how to do it i mean how to process your data using the server side processing of the data table so let me let me let me let me let me show you okay obviously you can put your you know the json or the endpoint url here so that is it if we talk about the server side processing of the data table obviously there are so many things to do with the data tables based upon your requirement but by using the uh you know the current options which i have shown you you will be at least able to create some basic data table if if you want this source code uh you know of this example which i have shown you so you'll be able to see it in my github link so i will be pasting my github link in the description box if you like this video just give it give it a thumbs up and you know subscribe if you want to stay tuned with the upcoming videos which i'm gonna have and ah cheers happy coding thank you bye

Channel: CrazyBreakPoint

Views: 16,216

Keywords: Jquery Data Table, Integrate Data Table to website, CrazyBreakPoint, BootStrap DataTable, Table Design, Data Table Server SIde Processing, Server Side Data Table, Server Side Table, Ajax Table, Ajax Data Table

Id: nJ5tyF9WEI8

Length: 21min 3sec (1263 seconds)

Published: Fri Jan 08 2021