Adding json data in select box

Scania

Hi i was trying to populate the dropdown, but facing some issue, not able to find any xmaples. can you please help me. I am tying to send the drop down as map which is present ias one of the feilds in "data".

Scania

this is the json that i am sending
data":

[
    {
        "DT_RowId": "1198991",
        "orderId": "1198991",
        "orderType": "N",
        "original": "1198991",
        "creationDate": "2015-05-01 15:22:39.0",
        "receiver_mcSupplierno": "0536101",
        "receiver_name": "Something LTD",
        "receiverAddress_countryCode": "GB",
        "fds": "2015-05-07",
        "consignor_mcSupplierno": "5963001",
        "consignor_name": "something CHAIN",
        "consignorAddress_countryCode": "GB",
        "selectedWeekOrDateString": "w20",
        "etaWeekOrDateString": "2015-11-09",
        "status": "5",
        "orderTypeList": {
            "1": "One",
            "2": "two",
            "3": "three"
        }

in this ordertypelist is the list i want to show

ThomD

Please post a sample of the code you have so far.

allan

Hi,

I think ThomD is correct in that we'll need to be able to see the code you are using. However, to populate the options list you can use the Field->options() method (assuming you are using the PHP libraries?) as documented here.

There is an example available showing that in action.

Regards,
Allan

Scania

var action;
//FOLLOWING CODE FOR CELL DETAIL part

function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Order Id:</td>'+
            '<td>'+d.orderId+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>COuntry Code:</td>'+
            '<td>'+d.consignorAddress_countryCode+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}


//FOLLOWING CODE FOR CELL DETAIL part

$(document).ready(function() {
    

    
    $('#tabledata tfoot th').each( function () {
        var title = $('#tabledata thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    action = new $.fn.DataTable.Editor( {
        ajax: "viewOrder.do?method=actionLinks",
        table: "#tabledata",
        fields: [ {
                label: "Order:",
                name: "orderId"
            }, {
                label: "Type:",
                name: "orderType"
            }, {
                label: "Type:",
                name: "original",
                type: "select",
                options:"this is what i wan to know how to populate"
            }, {
                label: "Created:",
                name: "creationDate",
                type: "date",
                def:        function () { return new Date(); },
                dateFormat: $.datepicker.ISO_8601
               
            }, {
                label: "receiver_mcSupplierno:",
                name: "receiver_mcSupplierno"
            }, {
                label: "To:",
                name: "receiver_name"
            }
        ]
    } );
    $('#tabledata').on( 'click', 'tbody td:not(:first-child)', function (e) {
        action.inline( this );
    } );
    
var table = $('#tabledata').DataTable( {
     "scrollY":        "300px",
     "columnDefs": [
                    { "width": "10%", "targets": 0 }],
     "scrollCollapse": true,
     "paging":         false,
         dom: "Tfrtip", //this is used for buttons
        ajax: "viewOrder.do?method=listOfOrders",
        columns: [

                {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
                },
            { "data": "orderId"   },
            { "data": "orderType" },
            { "data": "original" },
            { "data": "creationDate" },
            { "data": "receiver_mcSupplierno" },
            { "data": "receiver_name" },
            { "data": "receiverAddress_countryCode" },
            { "data": "fds" },
            { "data": "consignor_mcSupplierno" },
            { "data": "consignor_name" },
            { "data": "consignorAddress_countryCode" },
            { "data": "selectedWeekOrDateString" },
            { "data": "etaWeekOrDateString" },
            { "data": "status" }
        ],
"order": [[1, 'asc']]
        ,
        tableTools: {
            sRowSelect: "os",
            sRowSelector: 'td:first-child',
            aButtons: [
                { sExtends: "editor_create", editor: action },
                { sExtends: "editor_edit",   editor: action },
                { sExtends: "editor_remove",   editor: action }
                
            ]
        }
    } );

     table.columns().every( function () {
            var that = this;
     
            $( 'input', this.footer() ).on( 'keyup change', function () {
                that
                    .search( this.value )
                    .draw();
            } );
        } );

I am using java, not PHP. and sending the ajax content. I am a bit new to this, so not able to add the list to populate the dropdown, the following

allan

options:"this is what i wan to know how to populate"

You have two options. You can use the update() method of the select field type. Or you can have your viewOrder.do?method=listOfOrders JSON response include the options you want to show. You would do that by providing an options object with the options to be shown in a parameter name matching the field name.

For example:

{
  "data": [ ... ],
  "options": {
    "original": [
      ...options...
    ]
  }
}

Allan