inline editing for two strings merged into one field

petsi

Hi,
I have a table that takes first name and last name as two separate strings from SQL and then merges them together into one column using columns.render. I'm using inline editing for the whole table.

What's the best way to tackle this? I'd really like to keep it as one column (when displayed), but separated in the database. Ideally, I'd like either two input fields (for first name and last name) to appear when the cell is clicked, or just one input field showing full name. Is there an elegant way to achieve this?

Debugger code: https://debug.datatables.net/unukad

My code:

$(document).ready(function() {
  var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.people.php',
        table: '#people',
    fields: [
            {
                "label": "first name:",
                "name": "people.first_name"
            },
      {
                "label": "last name:",
                "name": "people.last_name"
            },
            {
                "label": "number:",
                "name": "people.number"
            },
      {
                "label": "job:",
                "name": "jobs.name"
            }
        ]
    } );
  
  $('#people').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this, {
      onBlur: 'submit'
    } );
  } );

  var table = $('#people').DataTable({
    ajax: 'php/table.people.php',
    columns: [
      { data: null,
        defaultContent: '',
        className: 'select-checkbox',
        orderable: false
      },
            { "data": "people.last_name", render: function ( data, type, row ) {
        if ( type === 'sort' ) {
          return row.people.last_name;
        } else {
          return row.people.first_name + ' ' + row.people.last_name;
        }
      } },
            {
                "data": "people.number"
            },
      {
                "data": "jobs.name",
        "visible": false
            }
        ],
    select: {
      style:    'os',
      selector: 'td:first-child'
    },
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor }
    ],
    "orderFixed": [ 3, 'asc' ],
    order: [[ 3, 'asc' ], [ 1, 'asc' ]],
    rowGroup: {
        dataSrc: 'jobs.name'
    },
    paging: false
  });
});

allan

Editor doesn't have the ability to do this at the moment I'm sorry to say. You'd need to use a bubble edit for that column.

Allan

petsi

OK, thanks for the confirmation.