Creating a simple datable Jquery

Hi all,

Working in  JQuery is simple as that of javascript. It has a pulgin Datatable. Which we have many options while creating a table. Lets see how we can create a simple Datatable using JSON call.


1. You have to create a <table id=""></table>.

2.To that table id we have to append <thead> with <tr id="footerid">------------</tr></thead>.

3. The ----- in the previous point to be filled with number of columns u are going to display in the datatable. It should be exactly same number of columns from the JSON result.

4.Lets create a datatable "(#tableid).datatable({})".

5. In this we can do our functionalities.

In this we have to mention how our datatable should be displayed.






6. If u need to pass any number of parameters, u have to mention in

"fnServerParams": function(aoData){
            aoData.push({name: "chipName", value: chipName});
        },

7. If u wanna do any functionality after the table is Rendeered completeply. U have to do that functionality inside.

"fnDrawCallback": function (oSettings) {
                 *Your functionality
             }

8. And the main part is displaying the column with values. You have to mention in aoColumnDefs.
You have to mention exactly the returned number of columns in "aTargets".

"aoColumnDefs": {"aTargets": [0], "bVisible": true}
                              .
                              .
                              .
                              .
                              .
                              .
                             {"aTargets": [n], "bVisible": true}

If you are returning 10 values friom JSON u have create column defintion with aTargets of "aTargets [10]" values.

That's it. Your datatable will be created.

Please be careful on returning data from JSON.

Here i have used "sAjaxSource": "your JSON call"

If U want to display a particular column with some changes, U can read my previous post.

If u have any queries, Mention in comment box

More about datatable

Comments

Post a Comment

Popular posts from this blog

Creating empty Rows in datatable jquery

Image
Hi all, This is about how we can create Empty rows in datable  irrespective of the rows returned from DB. I have done it in "fnDrawCallback". My logic is like i have to display 10 rows on Initial load. If DB returned 2 rows, i have to display the balance 8rows with empty values. Here it follows, Now steps to create datatable, After the whole table rendered. You can get the number of rows printed in table in " fnDrawCallback ". In this, am getting the total records and passing it to my function which create empty rows. As we are using (#tableid).datatable().fnData([]) , it will call the " fnDrawCallback" again and again si i have restricted it to run only one times using var itr=1; We can manually set " " values to be printed in table using  fnData([" "," "," "])   as you know how many columns you are printing in table, By using this simple way, we can creating rows with empty records...
Read more

Twitter acquisition

Hi All,  " Twitter has acquired the Android lockscreen app ". There might be a few updates in that app in near future.    They have mentioned like " Twitter may come out with a "Twitter For Android launcher" and may push contextual tweets and direct messages directly to the lockscreen of a user ".   This app will be very useful for those who tweets all the time and those who need to get updated with the current news.           For more info:  http://timesofindia.indiatimes.com/tech/tech-news/Twitter-acquires-Android-lockscreen-app/articleshow/33405320.cms
Read more