How to add jquery datatable plugin to your website

What Will I Learn?

Hello everyone, In this video Im gonna show you how to add jquery datatable to your web app

• How to add jquery datatable plugin to your website with bootstrap

Needs are;

A. download jquery
B. download bootstrap
C. C#

The difficulty level of commands we use is middle.

1. Create folder 'any name you want'

2. download bootstrap 'https://getbootstrap.com/' --- Im downloading version 3

3. open bootstrap zip file that we downloaded and copy paste css, js, and fonts folders
   to the folder that we created before.

4. make a new file called script.js inside the js file

5. make a new file called style.css inside the css file // not needed for this video

6. make a new file called index.html inside the folder that we created in the first step.

1. we need to add two more things jquery and dataTable plugin -

• to download jquery visit: 'https://jquery.com/download/'
• to download datatable plugin just goto google and search 'datatable plugin' or visit 'datatable.net'.

lets have a look at the demo/ example table first

ok, for download click the download link in the right

1. copy paste the jquery file into js folder : I rename it as jquery.js

2. first open the zip file then copy paste dataTables.bootstrap.js and jquery.dataTables.js into js folder
   also dataTables.bootstrap.css file into css folder.

3. open up the index.html file and write html template first (lets go...)
   I am using Atom as my text editor: drag and drop the index.html file into
   atom editor.

now you can see every file are loaded to the editor

1. now we need to link bootstrap css files,

2. next, we have to link bootstrap js files,
   also we need to link jquery file

3. Also datatable js files and css files. //there are two files
   javascript file and jquery datatable file.

4. again goto datatables.net/examples/styling/bootstrap.html

• in this page you can get javascript code and html for
  table structure.

lets see how to do that...

copy js code and paste it in script.js file // save this

copy paste html table structure into index.html - inside body tag

open this index.html in your favorite browser

now you can see there is no search box or buttons
those are inside the js folder so we need to clearly mention those

still problem not solved that because we didnt link the script.js file

If there is no styling, that because jquery.dataTables.js file, must
add before dataTables.bootstrap.js file

there is lot more properties to config datatable. You can refer those in the website
most of them I will show you in the next video

Also in the next video I will show you how to add our own data in html and
how to add data in the js file and also how to display JSON file data
inside this table.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---