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

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

bbrindzabbrindza Posts: 316Questions: 73Answers: 1

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

 });  

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,381Questions: 26Answers: 4,959

    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

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    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();
           
        }
    
  • kthorngrenkthorngren Posts: 21,381Questions: 26Answers: 4,959

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

    Kevin

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    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?

  • kthorngrenkthorngren Posts: 21,381Questions: 26Answers: 4,959

    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

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    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>';
                                   }
      }
    
  • kthorngrenkthorngren Posts: 21,381Questions: 26Answers: 4,959
    edited April 2023 Answer ✓

    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

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    That did it. Thanks

Sign In or Register to comment.