jQuery DataTables AJAX JSON example

we're going to look at how to use a jquery based external library to assist us in creating a table to display our json data using ajax data tables is an open source or free library that we can use to achieve this here you can see on the home page we have a table here that has several different features we're able to do pagination here at the bottom you see pagination we're able to show a certain number of records and we're also able to search if we wanted to search for tokyo for instance everything is filtered using ajax so it's pretty nice and it is really easy to get set up and to use so some of the features i was mentioning pagination instant search column ordering we are able to use any so almost any source right javascript or ajax if you are rendering data from a database using php or node or whatever c sharp you cannot you know send that data via as a json format and use data tables to display that data in a table that looks like this all right so we want to get this setup in our project to display our json data in our json file and i have a table here set up in my html file with several several records and we're just going to install data tables and convert this table to a data table and we are also including our js or main.js file which is where we will be putting our data table code all right so let us take a look at the manual on how to get data tables set up in our project so let's go to installation and there are a few dependencies we obviously have to get jquery installed as it is jquery based along with a few other files so jquery is the first file that we have to include and i am going to use the cdn so a cdn if we scroll down just a little bit we see here that to install data tables we can also use a cdn to install the file so a cdn is a content delivery network and these are available to us online and these are the links that we need in order to install data tables in our website right but before we copy those we need our jquery dependency first and let me get this cdn from google jk recidion okay so let us copy this section here and this will give us jquery in our file so let us put jquery as the very first dependency that will load and then let us grab these other two files that we need in order to in order for our data table to work so i'm going to paste those two here right so one is a link to a style sheet and let me actually put everything next to each other so scripts with scripts and link by itself all right and we have our final script here our main all right all right so our css and three different scripts jquery and our data table script and our main local main script all right so we're going to convert this table into a data table so currently this table looks like this so let us load our file so currently this is what our table looks like right and we want to now convert it to a data table so let's scroll up and now that we have installed our data table let's take a look at the manual so installation we've done the installation and now we want to get our table converted to a data table so here we can initialize our data table so let us actually copy this snippet here and we'll need to paste this in our main dot js all right so this is actually jquery syntax so all throughout the course we've been using vanilla javascript our document selectors jquery uses this simple syntax with a dollar sign document.ready function and this selects the entire html document and then within that selector we are selecting our tables so our table has an id of example so we'll need to change this to example so remember this dollar sign or hashtag indicates that it is an id if it was a class we would have a dot right so now we're selecting our table and we're just simply going to chain our use our dot notation and convert our table to a data table so let us save this and go back and refresh right so we see now that we have converted that you know bare bare bones html table to a nice looking data table so we can show the different entries all right if we want to expand it to 100 if we only want 10 we have pagination so we can click on a page number or we can click on previous our next and we can also filter so if i wanted to know who was an engineer i could type in engineer and it would simply filter out that search result so now what we're going to do is display our json data here as a data table so in order to do this we need a few things set up all right so i am going to delete everything after our table header let's ensure that we have our closing table tag all right so this is our table and it closes here so we need our table head and in our table head we're going to have the different field names that we want to display so id first name last name email location and job title so first one will be id first name last name email job title or location and then job title all right there we go so now we have our header set up for our data table and you can find all of this instruction on on this data table website in their manual so it has really good documentation that can help you get set up i believe there's a section here if we want to um be able to get ajax right so this is the ajax if if you have json data you can use this type of um syntax here to convert that json data into a data table so that is what we're going to do we just need our data source which we already have right here in our json file so the next thing that we need here so within our data table method i am going to pass in a few parameters here so the first parameter is we are going to be using ajax to get our data and now we need the path to our json source or our data source so in this case our data source is in our contacts folder here right so it has to be contacts forward slash data.json and the second parameter we're going to pass in are the columns and this will be passed in as an array so the first column and the identifier for all of our um records here in our json file is data and this could be employees it could be contacts for instance so if you want to change this to contacts then contacts is what we would use as our identifier so the first parameter has to be contacts and of course it has to be a string so contacts and the first thing we want from our contacts this should be a semicolon so the first thing we want is our id and then we can close and we put a comma to separate each each value so i think we have first name last name email location and job title so first and we have to ensure that it is spelled exactly as this built here in this file so first name underscore name last name email and job title all right so we don't need this final comma right so everything looks good and now we can [Music] try and run this so let us go back all right so so here we have our json data loading in our table and here we have our data that's rendering and it has all the functionality that was shown before so if you wanted to search for sheila we are able to do so if we want to search for accountants then we get all of our contents so this is a nice way to be able to quickly um show or display our json data in a table format

Channel: doxalearn

Views: 12,930

Keywords: jquery datatables ajax json example, datatable example, json data to html table using jquery, html to json, json to html table, fetch json data using jquery ajax

Id: _a2dhymoTHw

Length: 12min 59sec (779 seconds)

Published: Mon Mar 08 2021