using columnDef to render a dropdown.

using columnDef to render a dropdown.

chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
edited January 2019 in Free community support

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/

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited January 2019

    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

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1

    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>
    
  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
    edited January 2019

    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>', {
                                        });
    
  • sirimol2540sirimol2540 Posts: 1Questions: 0Answers: 0

    It's very interesting for your story.

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

This discussion has been closed.