update empty inputs in data table from function

update empty inputs in data table from function

waliedalexwaliedalex Posts: 2Questions: 1Answers: 0

Hello

I need to update inputs values in column 5 from function output
thank you in advance

$(document).ready(function(){
  var count = 0 ; 

$('#CIL_table').DataTable({

      serverSide: true,
      processing: true, 
ajax: {
          url:"xxx.php",
          method:"POST",
          dataType:"JSON",
          dataSrc: ""
            },
columnDefs: [ { targets: 0,
                      render: function ( data, type, row, meta ) {                      
                        count++;
                      return '<span>'+count+'</span>'
                    }
                    },{ targets: 3,
                      data: "col_date_in",
                      render: function ( data, type, row, meta ) {
                      return '<input type="date" name="date_in" id="date_in_'+count+'" data-srno="'+count+'" class="form-control 
                       date_in" value="'+data+'"/>';
                    }  
                    },
                    { targets: 4,
                      data: "col_date_out",
                      render: function ( data, type, row, meta ) {
                      return '<input type="date" name="date_out" id="date_out_'+count+'" data-srno="'+count+'" class="form-control 
                       date_out" value="'+data+'"/>';
                    }  
                    },
                     { targets: 5,
                      data: null,
                      render: function ( data, type, row, meta ) {
                      return '<input type="text" name="storage_days" id="storage_days_'+ count +'" data-srno="'+ count +'" 
                       class="form-control" />';
                    }                      
                    }
                     ],
 initComplete : function(settings, json) {
                          calculations();
                            },

 });
});



function calculations(){
          var count = document.getElementById("total_item").value;

//calculate day differance
          for(j=1; j<=count; j++){

            var date_in = $('#date_in_'+j).val();

            var date1 = new Date(date_in)               //converts string to date object
            var date_out = $('#date_out_'+j).val();
            var date2 = new Date(date_out)              //converts string to date object
            var oneDay = 24 * 60 * 60 * 1000;           // hours*minutes*seconds*milliseconds
            
            if (date1<date2){

                            var diffDays = Math.abs((date1.getTime() - date2.getTime()) / (oneDay)) + 1 ;

                            $('#storage_days_'+j).val(diffDays);
}
}
     // i want to insert new values in target  5


Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    Are you wanting to take the updated input and send it to the server to save in the DB?

    Kevin

  • waliedalexwaliedalex Posts: 2Questions: 1Answers: 0

    no i just want to take the updated input to the value attribute, when i print i see no data in the updated column.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    edited March 2023

    Maybe something like this would work:
    https://live.datatables.net/zukacehi/100/edit

    See this example for ordering with the updated input value. It uses cell().invalidate() to update the Datatables cache.

    Kevin

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    I just noticed you are using server side processing. The ordering example I linked only works with client side processing. Also the cell().invalidate() likely won't do anything as all the table data is expected to come from the server. This code will still work as its not Datatables specific.

      //update the input value
      $(this).attr('value', $(this).val());
    

    To update the table's data you will need to send the row data to the server via ajax. Then use draw() in the success function to update the client data.

    Kevin

Sign In or Register to comment.