Select First Row Not Working with Editor

lightfoot

Dear Forum,
The following code is trying to select the first table row so it's data could be automatically presented into the Editor screen on start up of the program. I have tried each of the 6 methods shown (commented out bottom of the js program) from other forum discussions and none worked.

This test code originates from the Editor's Generator. In addition, I did included the select.dataTables.min.css and select.min.js in my main html file as was required per the select documentation with no positive results.

Can any one shine some light on how to best approach this problem? Thanks

/*
 * Editor client script for DB table EditorTest
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.EditorTest.php',
        table: '#EditorTest',
        fields: [
            {
                "label": "name:",
                "name": "name"
            },
            {
                "label": "phone:",
                "name": "phone"
            },
            {
                "label": "city:",
                "name": "city"
            }
        ]
    } );

    var table = $('#EditorTest').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.EditorTest.php',
        columns: [
            {
                "data": "name"
            },
            {
                "data": "phone"
            },
            {
                "data": "city"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );

// The following code is trying to select the first row so it could be automaticly presented into the Editor screen on start up of the program. 
// I have tried each of the following 6 methods from other forum discussions and none will work.    
table.row(':eq(0)', { page: 'current' }).select(); 
// table.rows(0).select();
// $( table.row(':eq(0)').node()).trigger("click"); 
// $( table.row(':eq(0)').node()).click();  
// $('#Objective tbody tr:eq(0)').trigger("click"); 
// $('#Objective tbody tr:eq(0)').click();  

// I need to present the first row in the Editor on start up. This will start an empty Editor.  No form or data.    
editor.edit();
    
        
} );

}(jQuery));

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

table.button(1).trigger();

should do it after you have selected the row. That will trigger the edit button (e.g. button index 1).

Important - Since you are Ajax loading the data for the DataTable, you should move the row selection and the editing trigger into initComplete. Otherwise it will run before the data is loaded.

Allan

lightfoot

Allan,
Thanks for your help. This worked very well. I removed all my code at the bottom of the file and modified the the following section as follows:

var table = $('#EditorTest').DataTable( {
    dom: 'Bfrtip',
    ajax: 'php/table.EditorTest.php',
    columns: [
        {
            "data": "name"
        },
        {
            "data": "phone"
        },
        {
            "data": "city"
        }
    ],
    select: true,
    lengthChange: false,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ],
    "initComplete": function(settings, json) {
        alert( 'DataTables has finished its initialisation.' );
        table.row(':eq(0)', { page: 'current' }).select();  
        table.button(1).trigger();
    }
} );

Cool.
Thank You