Datatables Edit Not working

ingila

My datatables Editor is not working. I am using a trial version and also using select plugin for datatables.
My interface is
The example I am following is https://editor.datatables.net/examples/simple/inTableControls.html

My Code is:

    var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {

  editor = new $.fn.dataTable.Editor({
    "ajax": "../ajax/data/objects.txt",
    "table": "#example",
    "fields": [ 
        {
            "label": "ID:",
            "name": "id"
        },          
        {
            "label": "First name:",
            "name": "name"
        }, {
            "label": "Position:",
            "name": "position"
        }, {
            "label": "Salary:",
            "name": "salary"
        },          
        {
            "label": "Start date:",
            "name": "start_date",
            "type": "datetime"
        },          
        {
            "label": "Office:",
            "name": "office"
        }, 
        {
            "label": "Extension:",
            "name": "extn"
        }
    ]
    } );

// Edit record
    $('#example').on('click', 'a.editor_edit', function (e) {
    e.preventDefault();                 
    editor.edit( $(this).closest('tr'), {
        title: 'Edit record',
        buttons: 'Update'
    } );
    } );

// Delete a record
    $('#example').on('click', 'a.editor_remove', function (e) {
    e.preventDefault(); 
    editor.remove( $(this).closest('tr'), {
        title: 'Delete record',
        message: 'Are you sure you wish to remove this record?',
        buttons: 'Delete'
    } );
    } )

     var table = $('#example').DataTable( {

 dom: "Blfrtip",    
"ajax": "../ajax/data/objects.txt",     

"columnDefs": [ {
        orderable: false,
        className: 'select-checkbox',
        targets:   0
    } ],
"columns": [
        {
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },

{ "data": "id"},
        { "data": "name" },
        { "data": "position" },
        { "data": "salary" },
        { "data": "start_date" },
        { "data": "office" },
        { "data": "extn" },
        {
            data: null,
            className: "center",
            defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
        }
    ],

    //select: {'style': 'multi'},     
    select:true,     
          buttons: [        
    {
      text: 'Select All',
            key: '1',
            action: function ( e, dt, node, config ) {                  
                table.rows().select();
            }

    },

    {
      text: 'Deselect All',
            key: '1',
            action: function ( e, dt, node, config ) {
                table.rows().deselect();
            }       
    }


    ],
     "order": [[0, 'asc']]
     });

     $('#example tbody').on('click', 'td', function () {    /*

    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
         $('div.slider', row.child()).slideUp( function () {
        row.child.hide();
        tr.removeClass('shown');
         });
    }
    else {
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
         $('div.slider', row.child()).slideDown();
    }
*/});
} );

My imports are:

    <!--Datatables  Buttons-->
    <script src="../vendor/datatables-buttons/js/dataTables.buttons.min.js"></script>
<!--Datatables  Select-->
    <script src="../vendor/datatables-select/js/dataTables.select.min.js"></script>

<!--Datatables  Editor-->
    <script src="../vendor/datatables-editor/Editor/js/dataTables.editor.min.js"></script>

And CSS:

 <!-- DataTables Buttons CSS -->
<link href="../vendor/datatables-buttons/css/buttons.dataTables.min.css" rel="stylesheet">

<!-- DataTables Select CSS -->
<link href="../vendor/datatables-select/css/select.dataTables.min.css" rel="stylesheet">

<!-- DataTables Editor CSS -->
<link href="../vendor/datatables-editor/Editor/css/editor.dataTables.min.css" rel="stylesheet">

kthorngren

Please don't post duplicate threads:
https://www.datatables.net/forums/discussion/47458/datatables-editor-not-orking-on-edit-and-delete#latest

My datatables Editor is not working

What exactly is not working?

Kevin

ingila

@kthorngren On clicking Edit, no pop-up shows.

kthorngren

From what you provided I don't see any issues. Do you see any errors in your browsers console?

Can you post a link to a page showing the issue?

Kevin

allan

Have you included the event handlers to activate editing from those edit links? e.g.

    // Edit record
    $('#example').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();
 
        editor.edit( $(this).closest('tr'), {
            title: 'Edit record',
            buttons: 'Update'
        } );
    } );

A full and working code example is here.

Allan

ingila

@allan Yes I have included the code you mentioned!

ingila

Resolved the issue. As per what I found, datatables look for a unique identifier in your object.txt (or whatever the file is) file. It looks for "DT_RowID" which it assumes is unique for every row in the table. I didnt have one in mine instead I had a key "id" in it. Had to mention

         idSrc:  'id',

in databales initialization and viola!

Thaks @allan for the help!

allan

Can you give me a link to the page showing the issue please? The example here seems to work no problem, so we'll need a link to your page so we can take a look at the code being used and see why it isn't working.

Allan

ingila

@allan The example you shared works fine because if you look at its Ajax Load tab, the data does have

"DT_RowId": "row_46"

However my Ajax had something like

 "id": "2"

It looks for the exact DT_RowId keyword which I didnt have. However in a scenario like this you can use

idSrc:  'id'

to tell DataTables where to find that unique row identifier in your data.

Hope I get my point across.

allan

In Editor use idSrc to tell it where to get the row id, and in DataTables use rowId.

Allan

BradleyB

I waste time following duplicate links that point back and forth to each other. Why not just post solutions?