DataTable Editor render: function ( data, type, row ), columns are not aligned

bbrindza

When I add a rendered column to my DataTable using Editor . It does not show the first column data from the JSON.

What am I missing here?

JSON from SSP

{"data":[{"DT_RowId":"row_SOU0c95020250c95020250c9502021480c950202R01871","PKLOC":"SOU","PKRGNO":"5","PKSLNO":"5","PKCUST":"148","PKPROD":"R01871","BD$01":"2.1","BD$02":"2.3","BD$03":"3.0","BD$04":"3.1","BD$05":"1.9","BD$06":"1.6","BD$07":"2.3","BD$08":"2.6","BD$09":"2.1","BD$10":"1.9","BD$11":"2.3","BD$12":"3.6"}],"options":[],"files":[],"draw":1,"recordsTotal":1,"recordsFiltered":1,"debugSql":[]}

  // Open this row
         row.child(format3(rowData)).show();

         var id = rowData.productNumber;
         productNumber = rowData.productNumber;
 
         editor = new $.fn.dataTable.Editor( {
         ajax: {
                 type: 'POST',
                 url: 'ssp_getSalepersonByCustomerBillTo_BudgetData.php',
                 data: { salespersonNumber: salespersonNumber,
                         customerNumber: customerNumber,
                         productNumber: productNumber
                  },
              },
             
             table: '#budgetRows_' + id,
             fields: [ {
                     label: 'January Budget:',
                     name:  'BD$01'
                 }, {
                     label: 'February Budget:',
                     name:  'BD$02'
                 }, {
                     label: 'March Budget:',
                     name:  'BD$03'
                 }, {
                     label: 'April Budget:',
                     name:  'BD$04'
                 }, {
                     label: 'May Budget:',
                     name:  'BD$05'
                 }, {
                     label: 'June Budget:',
                     name:  'BD$06'
                 }, {
                     label: 'July Budget:',
                     name:  'BD$07'
                 }, {
                     label: 'August Budget:',
                     name:  'BD$08'
                 }, {
                     label: 'September Budget:',
                     name:  'BD$09'
                 }, {
                     label: 'October Budget:',
                     name:  'BD$10'
                 }, {
                     label: 'November Budget:',
                     name:  'BD$11'
                 }, {
                     label: 'December Budget:',
                     name:  'BD$12'
                 }
             ]
         } );
  
         // Activate an inline edit on click of a table cell
        // $('#budgetRows_' + id).on( 'click', 'tbody td', function (e) {
         $('#budgetRows_' + id).on( 'click', 'tbody td:not(:first-child)', function (e) {
             editor.inline( childTable3.cell( this ).index(), {
                 onBlur: 'submit'
             } );
         } );
 
         childTable3 = $('#budgetRows_' + id).DataTable({
             dom: 't',
             ajax: {
                    type: 'POST',
                    url: 'ssp_getSalepersonByCustomerBillTo_BudgetData.php',
                    data: { salespersonNumber: salespersonNumber,
                            customerNumber: customerNumber,
                            productNumber: productNumber
                        },
                },
             serverSide: true,
             columns: [
                         { data: 'BD$01'},
                         { data: 'BD$02'},
                         { data: 'BD$03'},
                         { data: 'BD$04'},
                         { data: 'BD$05'},
                         { data: 'BD$06'},
                         { data: 'BD$07'},
                         { data: 'BD$08'},
                         { data: 'BD$09'},
                         { data: 'BD$10'},
                         { data: 'BD$11'},
                         { data: 'BD$12'}
             ],
       
             columnDefs: [
                           {
                     "targets": [ 0 ],
                             "data": null,
                              render: function ( data, type, row ) {
                                  return '<td>Next Years Budget</td>';
                               }
                           },
                 
                          { targets: "_all",
                            orderable: false}
              ],
             
             select: {
                 style:    'os',
                 selector: 'td:first-child'
             },

         } );
         
    }//END - else

 });  

kthorngren

columnDefs.targets of 0 is { data: 'BD$01'},. Remove the columnDefs option for targets 0 and do this:

            columns: [
                            {
                            "data": null,
                             render: function ( data, type, row ) {
                                 return '<td>Next Years Budget</td>';
                              }
                          },
                        { data: 'BD$01'},
                        { data: 'BD$02'},
                        { data: 'BD$03'},
                        { data: 'BD$04'},
                        { data: 'BD$05'},
                        { data: 'BD$06'},
                        { data: 'BD$07'},
                        { data: 'BD$08'},
                        { data: 'BD$09'},
                        { data: 'BD$10'},
                        { data: 'BD$11'},
                        { data: 'BD$12'}
            ],

Kevin

bbrindza

I forgot to include the format3 function for my question.

    function format3(rowData) { 

        var childTable3 = 
    
            // Budget table
            '<table id="budgetRows_' + rowData.productNumber + '"class="display budgetDetailRow cell-border">' +
            '<thead><tr><th></th><th>January</th><th>February</th><th>March</th><th>April</th><th>May</th><th>June</th><th>July</th><th>August</th><th>September</th><th>October</th><th>November</th><th>December</th></tr></thead>' +
            '</table>';
    
     return $(childTable3).toArray();
       
    }

kthorngren

I think we cross posted and you may have missed my answer.

Kevin

bbrindza

I made the change however get this message.

{"fieldErrors":[],"error":"Unknown field: (index 0)","data":[],"ipOpts":[],"cancelled":[],"debugSql":[]}

Do I need to add something this the SSP script?

kthorngren

By default the table order is column 0 and your SSP script is trying to order by that column, which doesn't exist. Use order to set the order to another column or turn ordering off altogether.

Kevin

bbrindza

I also tried adding searchable: false and orderable: false... didn't work

 {
    data: null,
    searchable: false,
     orderable: false,
      render: function ( data, type, row ) {
                                  return '<td>Next Years Budget</td>';
                               }
  }

kthorngren

Its good to set those things but as I said use the order option to a different column or use order: [] to not order any of the columns. columns.orderable only affects the user's ability to order the column.

Kevin

bbrindza

That did it. Thanks