DropDown in particular column of a datatable jquery

Hi all ,


Good to be back after years.

Technical Post :)

This post is about how to bring up DropDown in a particular column of "dataTable()".

Simple and understandable,

U can just create an array to be listed out in drop down "dropvalues" and the option to be selection is u have to get it and loop it with the "dropvalues" and append it with option of select.

"aoColumnDefs": [
{
"fnRender": function ( oObj, sVal) {
                    var dropval = oObj.aData[1];
                    if(dropval != ' ')
                    {
                      var select = $("<select></select>", {
                    "id": "drop"
                    });
                for(var loop=0;loop<dropvalues.length;loop++){
                        var values = dropvalues[loop];
                    var option = $("<option></option>", {
                        "text": values,
                            "value": values
                        });
                        if(dropval == values){
                            option.attr("selected", "selected")
                        }
                    select.append(option);
                    }
                    return select.prop("outerHTML");
                    }
}

 Use this code your aoColumnDefs of datatable.

Use this code if any queries comment below.

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

Creating a simple datable Jquery

Image
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 wan...
Read more