Friday, March 2, 2018

Add data to the Jquery DataTable plugin through the Javascript - Part 2





----------------
Hello Everyone :)

I'm SL Coder.
----------------

In the previous video I have shown you guys how to add Jquery datatable plugin to your
website. And add some example records through the html.

Now, in this video im gonna show how you can add records through
the Javascript and explain them clearly.

1. Delete all the records in the index.html(those that we added in the previous video).

2. Delete all the columns and add columns that you want, for this video i'm gonna use
three columns id, name and age

3. Go to the script.js file and create a two dimensional array(for the records).

//im gonna name the array as 'records'
var records = [

[1, "Brad", 40], // this is a one row (an array for id, name and age)
[2, "Nick", 27],
[3, "Rick", 45]

];

I just only add three rows.

4. Now, we need to send this data to the table rows. to do that i'm going to add

data: records

inside the DataTable() function, Just like below

$(document).ready(function() {
    $('#example').DataTable({
data: records
});
} );


* Here what happen in that code snippet:

-> As soon as the page load/ready

$(document).ready()

-> anonymous function inside the .ready() get executed

$(document).ready(function() {
   
});
} );

-> In that function we have the table, Jquery identify its by table id - #example

-> To that table we are loading the values in the array using,

$('#example').DataTable({
data: records
});

- Notice: here .DataTable() is from Jquery DataTable plugin function.
and data is a property. There is lot of properties that you can use.

You can explore them in https://datatables.net/
I will show some of them in another video.

There is three ways that we can add data to the dataTable plugin

I have shown you how to add data from
- html
- javascript

In the next video I will show you how to get data through

- ajax Data sources


If you visit the https://datatables.net/ you can see lot of styling and so many things.

Also there are so many examples.


Thanks you guys for watching this video. See you in the next video.

Let me know what you thing about this video through a comment.
And please subscribe to my channel.

bye bye

No comments:

Post a Comment