title: Datatables - Set dropdown on response from AJAX
body: <p>I have a table that with the following columns: </p>
  
  <p>UUID - Title - Location - Set State</p>
  
  <p>The JSON I return from the server looks like: </p>
  
  <pre><code>{"uuid": 2, "title": "Some title", "location": "California", "state": "CLOSED"}
  </code></pre>
  
  <p>There are 3 different states that I can return from the server, and those are: </p>
  
  <ol>
  <li>Open </li>
  <li>Pending</li>
  <li>Closed</li>
  </ol>
  
  <p>I am trying to understand how it would be possible for me to dynamically set the 'State' of a row item (i.e. 'selected' in the dropdown) and populate the dropdown with the other two option (not selected). </p>
  
  <p>EDIT: Here is my example HTML (notice that my javascript currently just renders a dropdown, not based on the data returned):</p>
  
  <pre><code>&lt;table id="table" class="display"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;UUID&lt;/th&gt;
          &lt;th&gt;Title&lt;/th&gt;
          &lt;th&gt;Location&lt;/th&gt;
          &lt;th&gt;Set State&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>And Javascript</p>
  
  <pre><code>$.ajax({
      url: "/some/endpoint/
      cache: false,
      success: function(response){
          var table = $('#table').DataTable({
              "sAjaxSource": "/some/endpoint/",
              "orderClasses": false,
              "order": [[ 3, "asc" ]],
              "aoColumns": [
                  { "mData": "uuid" },
                  { "mData": "title" },
                  { "mData": "location" },
                  {
                      mData: "Set State",
                      bSortable: false,
                      mRender: function (data, type, row) {
                          return '&lt;select&gt;' +
                              '&lt;option value="active"&gt;ACTIVE&lt;/option&gt;' +
                              '&lt;option value="pending"&gt;PENDING&lt;/option&gt;' +
                              '&lt;option value="closed"&gt;CLOSED&lt;/option&gt;' +
                              '&lt;/select&gt;'
                      }
                  }
              ],
          }
      });
  </code></pre>