cell shows [object object]

sabari_sg

Hi Folks,

My data table fields assigned with nested object value as follows. I am able to render the values
without any issues using the following way. But when I try to edit each cell, the cell shows [object object]
rather than actual values. Please guide how to resolve it Thanks

My JSON Structure: (I want to access "value" attribute of each field

[  
   {  
      "id":{  
         "change":"",
         "value":"5"
      },
      "resourceA":{  
         "change":"",
         "value":"2222.2.2.2,3.3.3.3"
      },
      "resourceB":{  
         "change":"",
         "value":"S10889-AAC"
      },
      "protocol":{  
         "change":"",
         "value":"TCP"
      },
      "port":{  
         "change":"",
         "value":"8080, 808166666"
      },
    },

................................
.........................

My datatable description:

 var table = $('#tbl-fwweb').DataTable({
                 dom: "Bfrtip",
                data: dataSet,
                columns: [
                              {
                                  'targets': 0,
                                  'searchable': false,
                                  'orderable': false,
                                  'className': 'dt-body-center',
                                  'render': function (data, type, full, meta){
                                      return '<input type="checkbox">';
                                  }
                              },
                              {
                                mRender: function (data, type, full){
                                   return "'" + data.value + "'";
                                }, 
                                sWidth: "200px",
                                mDataProp: 'resourceA', 
                                sDefaultContent: '' 
                              },
                              {
                                    mRender: function (data, type, full){
                                       return "'" + data.value + "'";
                                    }, 
                                    sWidth: "200px",
                                    mDataProp: 'resourceB', 
                                    sDefaultContent: '' 
                              },
                              {
                                    mRender: function (data, type, full){
                                       return "'" + data.value + "'";
                                    }, 
                                    sWidth: "200px",
                                    mDataProp: 'port', 
                                    sDefaultContent: '' 
                              },
                              {
                                    mRender: function (data, type, full){
                                       return "'" + data.value + "'";
                                    }, 
                                    sWidth: "150px",
                                    mDataProp: 'protocol', 
                                    sDefaultContent: '' 
                              },
                              
                          ],
                          order: [ 1, 'asc' ],
                          keys: {
                              columns: ':not(:first-child)',
                              keys: [ 9 ]
                          },
                          select: {
                              style:    'os',
                              selector: 'td:first-child'
                          },
                          buttons: [
                              { extend: "create", editor: editor },
                              { extend: "edit",   editor: editor },
                              { extend: "remove", editor: editor }
                          ],
                          rowCallback: function(row, data, dataIndex){
                              // Get row ID
                              var rowId = data[0];

                              // If row ID is in the list of selected row IDs
                              if($.inArray(rowId, rows_selected) !== -1){
                                 $(row).find('input[type="checkbox"]').prop('checked', true);
                                 $(row).addClass('selected');
                              }
                           }
             
                });

jLinux

Format the code, instructions are below the input box for replies.

Once its readable, ill look.

allan

I've edited the formatting now (did it before I saw your reply jLinux).

You are telling DataTables to display an object - e.g. mDataProp: 'port', points to an object. It doesn't know how you want it to display that object so it just uses the toString() Javascript method, which results in what you are seeing. You should use mDataProp: 'port.value', - see the columns.data documentation for full data and also the manual which gives an overview of how this works.

Allan

sabari_sg

Hi Allan, jLnux,

I was digging myself after the post, realized that
In Table Description/Initialization - I don't need to describe my nested JSON fields using mRender && mDataProp attributes, rather if I use "data: 'XXXX.value' my mentioned editor issues resolved. Thanks a lot for your suppot

My new table desc below.

var table = $('#tbl-fwweb').DataTable({
                 dom: "Bfrtip",
                data: dataSet,
                columns: [
              {
                  'targets': 0,
                  'searchable': false,
                  'orderable': false,
                  'className': 'dt-body-center',
                  'render': function (data, type, full, meta){
                      return '<input type="checkbox">';
                  }
              },
              {
                sWidth: "200px",
                data: 'resourceA.value', 
                sDefaultContent: '' 
              },
              {
                   
                    sWidth: "200px",
                    data: 'resourceB.value', 
                    sDefaultContent: '' 
              },
              {
                   
                    sWidth: "200px",
                    data: 'port.value', 
                    sDefaultContent: '' 
              },
              {
                    sWidth: "150px",
                    data: 'protocol.value', 
                    sDefaultContent: '' 
              },
              {
                    sWidth: "150px",
                    data: 'direction.value', 
                    sDefaultContent: '' 
              },
              {
                    sWidth: "150px",
                    data: 'type.value', 
                    sDefaultContent: '' 
              },
              {
                    sWidth: "150px",
                    data: 'remark.value', 
                    sDefaultContent: '' 
              },
              {
                    mData: null, 
                    bSearchable: false, 
                    bSortable: false,
                    sWidth: "200px",
                    mRender: function(data, type, full) {
                        return '<a href="#"><i class="fa fa-trash fa-lg" style="color:#E60000"></i></a>';
                    }
                   
              },
          ],
          order: [ 1, 'asc' ],
          keys: {
              columns: ':not(:first-child)',
              keys: [ 9 ]
          },
          select: {
              style:    'os',
              selector: 'td:first-child'
          },
          buttons: [
              { extend: "create", editor: editor },
              { extend: "edit",   editor: editor },
              { extend: "remove", editor: editor }
          ],
          rowCallback: function(row, data, dataIndex){
              // Get row ID
              var rowId = data[0];

              // If row ID is in the list of selected row IDs
              if($.inArray(rowId, rows_selected) !== -1){
                 $(row).find('input[type="checkbox"]').prop('checked', true);
                 $(row).addClass('selected');
              }
           }
             
    });

jLinux

Awesome! Good job, glad you got it figured out