Question

76

DataTable with dropdown Column

rated 0 times [ 80] [ 4] / answers: 1 / hits: 60386 / 8 Years ago, wed, march 16, 2016, 12:00:00

I need to make dropdown as column in DataTable jQuery it is lookinng like as below right now

And I want it like the below image

and the code which I use is

<table id=example class=hover row-border dataTable role=grid width=100%>

    <thead class=dataTableHeader>

        <tr>

            <th>Days</th>

            <th>Start Time</th>

            <th>End Time</th>

        </tr>

    </thead>

</table>



$(document).ready(function () {

    $('#example').DataTable({

        aaData: OrganizationData.OrganizationPreference.ScheduleDaysCol,

        columns: [

            {data: DayName},

            {data: StartDateHour},

            {data: EndDateHour}



        ],

        paging: false,

        ordering: false,

        info: false,

        filter: false

    });

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

xiomara

Add To Favorites

Follow

Total Points: 378

Total Questions: 90

Total Answers: 104

Location: Guernsey

Member since Thu, Oct 7, 2021

3 Years ago

answered 8 Years ago keric · Accepted Answer

Another way would be to use the render method:

        render: function(d,t,r){

            var $select = $(<select></select>, {

                id: r[0]+start,

                value: d

            });

            $.each(times, function(k,v){

                var $option = $(<option></option>, {

                    text: v,

                    value: v

                });

                if(d === v){

                    $option.attr(selected, selected)

                }

                $select.append($option);

            });

            return $select.prop(outerHTML);

        }

Working example.