Hello everyone, In this video Im gonna show you how to add jquery datatable to your web app
Needs are;
A. download jquery
B. download bootstrap
C. C#
The difficulty level of commands we use is middle.
Create folder 'any name you want'
download bootstrap 'https://getbootstrap.com/' --- Im downloading version 3
open bootstrap zip file that we downloaded and copy paste css, js, and fonts folders
to the folder that we created before.
make a new file called script.js inside the js file
make a new file called style.css inside the css file // not needed for this video
make a new file called index.html inside the folder that we created in the first step.
lets have a look at the demo/ example table first
ok, for download click the download link in the right
copy paste the jquery file into js folder : I rename it as jquery.js
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.
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
now we need to link bootstrap css files,
next, we have to link bootstrap js files,
also we need to link jquery file
Also datatable js files and css files. //there are two files
javascript file and jquery datatable file.
again goto datatables.net/examples/styling/bootstrap.html
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.
