using columnDef to render a dropdown.

chessGuru64

I just want a simple select like this in my datatables server-side column:

                 <select id = "myList">
                               <option value = "1">1</option>
                               <option value = "2">2</option>
                               <option value = "3">3</option>
                             </select>

   <script type="text/javascript"> 
    $(document).ready(function() {
       var table=  $('#example').DataTable( {
            "processing": true,
            "serverSide": true,
            ajax: {
            url: 'server.php',
            type: 'POST',
            },
         columnDefs: [
          {  targets: -1,
             render: function (data, type, row, meta) {
                return '<button type="submit" class="add_btn btn btn-success btn-md active" data-id="' + meta.row + '"  id=" ' + meta.row + ' " value="add">  <span class="glyphicon glyphicon-plus"></span> </button>';
             }
          }
          ],
      columnDefs: [ {
                "targets": -2,
                "render": function (data, type, row, meta){
                                        var $select = $("<select></select>", {
                                        });
                                        $.each(times, function (k, v) {

                                            var $option = $("<option></option>", {
                                                "text": v,
                                                "value": v
                                            });
                                            if (data === v) {
                                                $option.attr("selected", "selected")
                                            }
                                            $select.append($option);
                                        });
                                        return $select.prop("outerHTML");
             }
            } ],
        })
    } ); // end ready
    </script>

Project link if needed: https://sampleajax.000webhostapp.com/

kthorngren

Your code seems to build the selects. I put together a test case for you:
http://live.datatables.net/fuhukago/1/edit

The first three rows should match the values in the select to choose the correct selected option.

Note: I made one change to your code. Changed if (data === v) { to if (data == v) { so that the string value in the table will match the numeric value in the times data.

EDIT: Just saw you had posted an example: You are getting this error:
Uncaught ReferenceError: times is not defined

You need to define the times variable with your object data for the options.

Kevin

chessGuru64

You are correct I got the dropdown to work. However, one of my concerns was doing two separate renders with columnDef. Now the add button is not showing up. I will play around with this some more now that the table data is back.

kthorngren

You have columnDefs defined twice. You only want to define one columnDefs object (that goes with the other config items also). Combine what you want to do within one columnDefs array.

Kevin

chessGuru64

Ok so it is really important to use a comma after the first render's final } otherwise the whole code does not work. Took me a while to figure this out. THanks for help. Here is final solution code:

     columnDefs: [ 
             {  targets: -1,
             render: function (data, type, row, meta) {
                return '<button type="submit" class="add_btn btn btn-success btn-md active" data-id="' + meta.row + '"  id=" ' + meta.row + ' " value="add">  <span class="glyphicon glyphicon-plus"></span> </button>';
             }
             },
             {
                targets: -2,
                render: function (data, type, row, meta){
                                        var $select = $("<select></select>", {
                                        });
                                        $.each(numbers, function (k, v) {

                                            var $option = $("<option></option>", {
                                                "text": v,
                                                "value": v
                                            });
                                            if (data === v) {
                                                $option.attr("selected", "selected")
                                            }
                                            $select.append($option);
                                        });
                                        return $select.prop("outerHTML");
             }
            } ],
        })
    } ); // end ready
    </script>

chessGuru64

FYI: this is how I believe you get the id in the server-side like button tags:

      render: function (data, type, row, meta){
                                    var $select = $('<select data-id="' + meta.row + '"  id=" ' + meta.row + ' " ></select>', {
                                    });

sirimol2540

It's very interesting for your story.

หวยหุ้นออนไลน์
https://xn--q3caa7ari1acta2jqgmc7b.net