jQuery datatable - Select list within column

Question

I am currently pulling data in a jQuery datatable which is grand! But I am having an issue with the Role column.

I am trying to inset a select list in that column which will have two options "admin" & "User" and whatever data is in the array set that value within the select list.

But I haven't been able to render select list into the table then set it to admin or user based on whats in the array.

jQuery(function($) {
  var data = [
    ["test1", "admin", "yes"],
    ["test2", "admin", "yes"],
    ["test3", "user", "no"],
    ["test4", "user", "no"]
  ]

  function authusers() {
    t = $('#authTable').DataTable({
      retrieve: true,
      paging: false,
      data: data,
      columns: [{
        "title": "Email",
        "render": function(data, type, row, meta) {
          return row[0];
        }
      }, {
        "title": "Role",
        "render": function(data, type, row, meta) {
          return row[1];
        }
      }, {
        "title": "Active",
        "render": function(data, type, row, meta) {
          var checkbox = $("<input/>", {
            "type": "checkbox"
          });
          checkbox.attr("checked", (row[2] === "yes"));
          checkbox.addClass((row[2] === "yes") ? "checkbox_checked" : "checkbox_unchecked")
          return checkbox.prop("outerHTML")
        }
      }, ],
      order: []
    });
  }

  //Passes value and if it was enabled or disabled value to serverside.
  $(document).on('click', '.checkbox_checked , .checkbox_unchecked', function() {
    if ($(this).is(':checked')) {
      var rowIndex = $(this).closest('tr').find('td:eq(0)').text();
      var status = 'yes';
    } else if ($(this).prop('checked', false)) {
      var rowIndex = $(this).closest('tr').find('td:eq(0)').text();
      var status = 'no';
    }
  });
  authusers();
});

<link href="//cdn.datatables.net/1.10.11/css/jQuery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>

<body>
  <table class="display" id="authTable" width="60%">
    <thead>
      <tr>
        <th>Email</th>
        <th>Active</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>

And also a JSfiddle

Any advice or recommendations are welcome!

I have looked at the examples, my problem is rendering them within the table based on the data in the array. — Studento919
– Studento919, Commented Jun 13, 2016 at 16:28

Deep · Accepted Answer · 2016-06-13 17:44:19Z

1

These are the few issues in your code like the data table options should not be in "". Check the corrected fiddler here.

https://jsfiddle.net/fjxbz50w/6/

jQuery(function($) {

var sdata = [
["test1", "admin", "yes"],
["test2", "admin", "yes"],
["test3", "user", "no"],
["test4", "user", "no"]
]

function authusers(data) {
t = $('#authTable').DataTable({
  retrieve: true,
  paging: false,
  data : sdata,
  columns: [{
    "title": "Email",
    "render": function(data, type, row, meta) {
      return row[0];
    }
  }, {
    "title": "Role",
    "render": function(data, type, row, meta) {
      return row[1];
    }
  }, {
    "title": "Active",
    "render": function(data, type, row, meta) {
      var checkbox = $("<input/>", {
        "type": "checkbox"
      });
      checkbox.attr("checked", (row[2] === "yes"));
      checkbox.addClass((row[2] === "yes") ? "checkbox_checked" : "checkbox_unchecked")
      return checkbox.prop("outerHTML")
    }
  }, ],
  order: []
  });
 }

 //Passes value and if it was enabled or disabled value to serverside.
  $(document).on('click', '.checkbox_checked , .checkbox_unchecked', function() {
  if ($(this).is(':checked')) {
  var rowIndex = $(this).closest('tr').find('td:eq(0)').text();
  var status = 'yes';
  console.log(rowIndex);
  console.log(status);
} else if ($(this).prop('checked', false)) {
  var rowIndex = $(this).closest('tr').find('td:eq(0)').text();
  var status = 'no';
  console.log(rowIndex);
  console.log(status);
  }
  });
  authusers();
});

for select in the Role column you can do like this.

"title": "Role",
    "render": function(data, type, row, meta) {
       var a = sdata.indexOf(row);
       var select = $("<select id='role_"+a+"'><option value ='admin'>admin</option><option value ='user'>user</option</select>");

       $("#role_"+a).val(row[1]);

       return select.prop("outerHTML")

Here is the updated fiddler.

https://jsfiddle.net/fjxbz50w/11/

edited Jun 13, 2016 at 17:44

answered Jun 13, 2016 at 16:18

Deep

9,7962 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Studento919 Over a year ago

The fiddle is the same as mine just the removal of "" doesn't actually answer how to have a select box in the column

Deep Over a year ago

OK, let me check that part a, i checked the fiddled you share was not working so just corrected it to make it work

Deep Over a year ago

i have updated the code as per your requirement, hope this will help you.

dnxit · Accepted Answer · 2020-06-02 12:53:44Z

Here is how I've achieved something like this, May be helpful for someone :)

 {
    "title": "", "render": function (data, type, full, meta) {
        var html = '<div>';
        var $select = $("<select></select>", {
            "id": "EmployeeId_"+ full.Id,
            "value": full.Name
        });
        $select.append("<option value =''></option>");
        $.each(full.EmployeeList, function (index, element) {                                                                
            var $option = $("<option></option>", {
                "text": element.Id,
                "value": element.Name
            });

            if (full.Id === element.Id) {
                $option.attr("selected", "selected")
            }

            $select.append($option);
        });

        html += $select[0].outerHTML;
        html += '<a href="#" onclick="changeName(this,' + full.Id + ')" id="tag' + full.Id + '">Change</a>';
        html += '</div>';

        return html;
    } 
}

Collectives™ on Stack Overflow

jQuery datatable - Select list within column

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related