Edit DataTables source data, using form inside pop-up window

Question

I have a datatable that fetches records from database with ajax. I want to add the edit tooltip like jquery-datatables-editor extension to datatables but for free. Is there

Answer 1

If you mean JQUERY DATATABLE then you can insert input fields (that would still retain the cell data) for every column within your table row as you desire and set the borders of the input field to not display, with css.

EXAMPLE TABLE

 
 

   

     

       
Name
       
State
       
Address
       
Active
       
Action
 
     
   
   

   

EXAMPLE DATATABLE INITIALIZATION

 var table = $('#dynamic_table').DataTable({
          "order":[[ 0, 'asc' ]], // order by first column
          "processing": true,
          'paging': true,
          'searching': true,
          'retrieve': true,
          'serverSide': true,
          'ajax': {
              'url': "your-ajax-url",
              'type': 'POST'
          },
          'columns': [ //every **name:** value must be present in your json
              { data: null, name: 'name'},
              { data: null, name: 'state' },
              { data: null, name: 'address' },
              { data: null, name: 'active' },
              { data: null, name: 'id' } // column that holds your buttons
          ],
          "columnDefs": [
             {
                "targets": 0,  // column that inserts an input field
                "data":  'name',
                "orderable": false,
                "createdCell": function (td, cellData, rowData, row, col){
                  return ''
                }
             },
             {
                "targets": 1,  // column that inserts an input field
                "data":  'state',
                "orderable": false,
                "createdCell": function (td, cellData, rowData, row, col){
                  return ''
                }
             },
             {
                "targets": 2,  // column that inserts an input field
                "data":  'address',
                "orderable": false,
                "createdCell": function (td, cellData, rowData, row, col){
                  return ''
                }
             },
             {
                "targets": 3,  // column that inserts an input field
                "data":  'active',
                "orderable": false,
                "createdCell": function (td, cellData, rowData, row, col){
                  return ''
                }
             },
             {
                "targets": 4,  // column that holds your buttons
                "data":  'id',
                "orderable": false,
                "createdCell": function (td, cellData, rowData, row, col){
                  return 'Edit'
                }
             }
          ],
          'responsive': true,
          'initComplete': function(settings, json) {
            //Run a function when table first initializes
          },
          'drawCallback': function( settings ) {
            //Run a function anytime table reloads when paginating
          }
      });

EXAMPLE DATATABLE ROW EDIT FUNCTION

$('#dynamic_table tbody').on('click', '.edit_row', function () {
  var row = table.row( $(this).parents('tr') ); // row that was clicked
  var d = row.data(); // data of the row button that was clicked .eg. console.log(d.name)
  var index = row.index();
  var json = { // json to be sent
        id: d.id,
        name: table.cell(index,0).nodes().to$().find('input').val(),
        state: table.cell(index,1).nodes().to$().find('input').val(),
        address: table.cell(index,2).nodes().to$().find('input').val(),
        active: table.cell(index,3).nodes().to$().find('input').val()
   }
  /*Your Ajax Function Here*/
});

RELOAD DATATABLE FUNCTION

table.ajax.reload( function ( json ) {
  //Run function after table reloads
});