在jQuery数据表中创建一个组合框

Question

I am using the following to create a datatable.

   mydata = [{
        "id": "1",
        "name": "daniel",
        "age": "28",
        "position": "accountant",
        "status": "A"
    }, {
        "id": "2",
        "name": "jack",
        "age": "55",
        "position": "architect",
        "status": "R"
    }];

   $('#myTable').dataTable({
        "aaData": mydata,
            "aoColumns": [{
            "mDataProp": "id"
        ,{
            "mDataProp": "name"
        }, {
            "mDataProp": "age"
        }, {
            "mDataProp": "position"
        },
          {
            "mDataProp": "status"
        }]
    });

Now I need to create a combobox for the column "status" (Options: D, L, A, R) having each status with a separate ID (using ID from the "id" column). As a start I used the mRender function to create a combobox like:

 {
            "mDataProp": "status",
             mRender: function(oObj){
                    return '<select id = "status">'+'<option value = "D"> D </option>'+'<option value = "L"> L </option>'+'<option value = "A"> A </option>'+'<option value = "R"> R </option>'+'</select>';
        }
      }

This just creates a simple combobox but I want to know as to how would I assign each option with the "id" column. Any suggestions?

Answer 1

You can get your JSON file from a different absolute URL (eg, www.example.com/files/myJson.JSON ) or from a relative URL (eg, /files/myJson.JSON )

The rest is pretty simple.

$(document).ready(function() {
$.getJSON( "<<LOCATION OF YOUR FILE>>", function( data ) {
var mydata = data;

$('#myTable').dataTable({
    "aaData": mydata,
        "columns": [{
        "data": "name"
    }, {
        "data": "age"
    }, {
        "data": "position"
    }]
   });
  });
});

Keep your HTML as is. Note that I simplified your Datatables formatting, as you were using labels from an older version.