Learn to easily export HTML table to Excel | CSV | PDF | - Code With Mark

hey have you ever thought about creating an html table but giving a little extra boost to it meaning in which you can have a sorted column and also a search term where you start typing it will filter for you for example if i start typing a i it's gonna filter only for that particular character but also gives you the ability to export it to excel cvs file type as well as pdf and print it but not to mention the fact you can also copy the data right off your screen if you're interested in that make sure you watch this whole video and also if you like watching my video my channel and you haven't subscribed to it make sure you do that because i put out amazing content that will help you take your web development project to the next level and not to mention fact you'll be able to finish them a lot faster so let's get into in this particular demo in which i will show you how you can build this particular html table looking like this so just to show you what i will do i'll refresh the code page and then you will print out this html and in this video i am not going to go into how do you take this data from your server side and put it on your page if you're interested in that there are plenty other videos that i have created you can go to my website which is called with mark.com and you can search through there's a whole bunch of videos in here that i that i teach you how you take your survey data and put it in your html view and this one i just want to show you if you already have a table how do you make it so useful for you and a user where they can sort through each one of those columns and sort the data any which way they want and also so show you how you can add a search feature and export it feature as well and not much math you can also filter your entries by showing little or all of them so that's what i want to show you so let's say this is the filter part if you want to filter by the name let's say old ascending one it's going to show you all of that and if i want to filter by this any of these particular few columns i can filter for and let's say if i want to type search for age group that is only 66 years old so if i type in 66 it's gonna show me two entries right away and if i take that out it's gonna show me everything and let's go over here let's say if i want to copy everything currently displaying because right now it's only just plain 10 rows i can just click on copy it tells me it has copied all 22 rows if i go to paste it open up a notepad paste it and then voila here it is here are all the rows if you want to export it out just to show you this stuff does work if i click on export to excel and i'm going to save it and then click on open it up and then here is the all of the 20 rows that are in here and if you look at over here there are 22 rows and they will export all of them out and also if i put it into a cvs file csv file which is comma separated value if i open this little bad boy up and you will see it opens up with in the right format i just want to show you that it does work this is not one of those things like hey it will work it will not work because all the code that i'm gonna share with you that i have shared with you if you have watched all of my other previous videos you know i try my best to make it easy for you to implement the stuff my code into your project so let's move on to the next part which is pdf if i just save it click on it save it it literally will just save it into regular pdf and you'll see it formats it right and also you will notice it puts the export to html which is your uh title which is right over here and i will show you how you can customize the output of it to where you can say hey don't include the whatever is on the title put it to somewhere else so let's go on to the next part which is if you want to only show a certain button rather than showing all of them you want to say hey i only want to show excel pdf and maybe csv but also i want to change the color of that button how do i do that so let's go to the part two of this which is right over here so as you can see before let me just put this side by side so you can see it so in here before it was just say excel cvs csv pdf and print and now i can i have customized the text to display whatever we want so this might come in handy in your project where you're like hey i wanted to have it say i don't know xyz or john's pdf or john's excel report or whatever you want to call it right you could do that so i'm going to show you how to do that and it's extremely extremely extremely easy when you see that you'll be like oh my god mark thank you so much this helped me a lot i'm going to use this in my project and if you do use it in your project make sure you comment below and also what i want to share with you something before we i show you the code it is if you are interested in taking your web development knowledge wherever there it is whether you're a beginning level or you're an expert level and now you are moving on to like hey i wanna know how do i get people who can pay for my services as a web developer i have this 30-day coaching program going on in which i would like to invite you to take part in it and there's going to be a link in the description make sure you click on it check it out and keep in mind this is only limited to 10 people that's all i'm taking 10 people and if you're really serious about taking your web development knowledge and creating a business out of it and you were like okay man i know this stuff and i don't want to go work for somebody else i want to create my own business out of it because i want to help other people just click the link below i will literally show you how you can get 10 paying clients in the next 30 days and if you're really really serious about it and that's i cannot emphasize if you're really serious about this then and only then click on the link otherwise do not waste your time so all right so let me show you how do you implement this in your web project so i'll go over here open up the code and let's go to the very first one so the libraries that you are going to be needing are this and don't worry i'm going to make it easy for you as i always do if this is the first time you are twinning in this channel i always always always make it easy for you to implement this code into your project so literally what you have to do is cut copy paste and that's it into your project and life is amazingly easy so the libraries that you're going to need which is the data table libraries which are these libraries all you do is copy paste it into your project for file wherever you want to paste it and that's it and then after that let me zoom this in for you so after that all you need to do is export your not an export more more importantly have your tail table be shown on your page like i said before i'm now going to go into how do you display your server side information into a page because i have created a lot of different videos on that how do you do that aj calls things in that nature check out this youtube channel if not check out the website which is code with mark.com in which it will tell you how do you take your server size data from your database and put it into your html table which is very extremely easy so from this point forward i will assume you know how to create your table and you already have a table which i have right over here the only thing that i would suggest you just call your table id an example but if you want to call it something else i don't know call it joe'sparty.com or joe's table whatever you want to call it right that's you want to put it as an id just make sure that over here this line of code that's all you really need to make sure that your table can be filtered it can be searchable and also it can be exportable so if i put this in here and then this particular line of code after i have included all of these libraries and i put this in here as a jquery when the page loads up it's going to look for this particular id which is right over here and it's going to put the data table plug-in in here and then all i need to do is add that in this thing and that's all and this three lines of code is going to get me this particular view in which i can copy the data i can export into excel i can export it into csv pdf print and also i can do show how many entries i want to show i want to shoot only 10 i can do up to 50 20 whatever you got so it gives you a really nice view of do that and also search and filter and all of that good stuff so then second part what i'm going to do is i want to customize these particular buttons in which like hey i don't care about showing my users of the application how they can copy it because that is not part of your project let's assume that so let's move on to that part and don't worry once again i'm gonna give you the code for this so you can literally just copy and paste and life is good so in here what we're going to do is we're always going to include your libraries in here and then next part is the same thing initiating with this example id but this time around we are going to say include the page length which is this drop down box right over here how many rows it will show for you and then also we're gonna include the button uh array in here as well so let's walk through this so that way you understand when you include it into your project what things you need to modify so that it will work so in here the very first thing is excel and then html so what that's going to do is it's going to allow you to export it into x a is excel your html table and the title would be mk i just called it a x uh what you call your excel mk so in other words it's like a hyperlink if i put my mouse over it it's gonna show it sometimes sometimes it doesn't show it depending on the browser you're using so for the most part this is not even that useful but what is useful is if i wanna customize let me put this over here so let's say if i want to customize where it says export to excel to some other button name so this will be the name of this button compared to over here this is excel like boring stop what would you do right so let's say if i want to customize that to say something else so let's say just to show you it does work i'm going to put a dash in here and call it i don't know code with mark and save it and then this is the one that's going to change so as you can see it changed the text off that button to extend it so let's take it one step further let's say if i want to change the look and feel of that button for some reason you want to help your users identify like hey if you are click on the red button it's going to give you excel if you click on the purple button i don't know it's going to give you csv then if you click on the pdf then it's going to give you the uh some other information so let's move on so what i'm going to do is i'm going to make this back to where it was so the next part is you could add a specific class to your button so in this case what i did was i added a class name and i just called it some generic class called btnpdf so that's going to add here and then after it is done initializing this piece of code last thing what i can do is i say i can say hey after you're done initializing this data table plug-in go look for it and this is part of jquery go look for it anywhere where it says btn underscore pdf and then add an attribute called class and then add this classes to it which makes it green so that is what i'm doing here and then there we go so if i click on it and just show you it will work click on it and then create a pdf and then here is my pdf and then let's click on the csv file and then here is my csv file last but not least my excel file let's open this up so here is my excel file as well so there you go there you have it hopefully this helped you in your project make sure if it really did help you comment below so that way i know this was helpful so i can continue to make videos that's going to help you take your project to the next level as i said before if you're interested in my limited time limited spaces 30-day coaching program in which i will share with you how you can create your own web agency in just as little as 30 days just click the link below and i hope that you join my coaching program so i can teach you how you can get 10 paying clients in a little ass 30 days so click the link below and also if you're watching this and you made it this far why don't you just give it a thumbs up and click the subscribe button so that way i can continue to create valuable information that's gonna help you out until next time guys happy coding

Channel: Code With Mark

Views: 15,425

Keywords: code with mark, jquery, php, mysql

Id: ihHh9WvXEaA

Length: 15min 47sec (947 seconds)

Published: Sun Nov 01 2020