title: jQuery DataTable - put data from the database into an input element
body: <p>I have a jQuery DataTable and I want to display some data into an input element rather than in an not editable row. </p>
  
  <p>this is the jQuery DataTable initialization code:</p>
  
  <pre><code>var table = $('#monthly_table').DataTable({
          processing: true,
          serverSide: true,
          dom: "fr&lt;'clear'&gt;Ttip",
          ajax: '{{ url("reports/row-details-data") }}',
          tableTools: {
              sRowSelect: "os",
              sSwfPath: "../Content/DataTables/swf/copy_csv_xls_pdf.swf",
              aButtons: [
                  {
                      sExtends: "xls",
                      sButtonText: "Export to Excel",
                      sButtonClass: "save-collection btn-default"
  
                  },
                  {
                      sExtends: 'print',
                      sButtonText: "Print",
                      sButtonClass: "btn-default"
                  }
              ]
          },
          columns: [
              {data: 'id', name: 'report_id'},
              {data: 'name', name: 'report_name'},
              {data: 'value', name: 'report_value'}
          ]
     });
  </code></pre>
  
  <p>At this point the data comes as an html normal table. I want those values to display in an input inside the table. just like the image shown below:</p>
  
  <p><img src="https://i.stack.imgur.com/U411j.png" alt="DataTables example- Live DOM ordering"></p>
  
  <p>All the help is appreciated.</p>