Unable to perform single row selection with Editor

pansengtat

I have consulted the example used in the DataTables official examples site at (https://datatables.net/examples/api/select_single_row.html) to see how to perform single row selection.
However, I am using DT with Editor, and when I attempted to use the same code snippet, I was not able to select a single row.
Instead, I was selecting a single node of a column, and when I tried to perform multiple row selection, I was able to select multiple rows, and would intermittently unselect other rows.
Note that I have two Editor instances, one is just called editor and the other is called editor_alternate (which I need to perform other functions requested by my client).

This is my code:

// Inside the JS file to be called by main PHP file
$(document).ready(function() {
    var table = $('#myTable').DataTable({
        dom: "Tfrtip",
        ajax: "php/myTableEditor.php",
        columns: [
            { data: "myTable.myColumn1" },
            //... Add other columns
        ],
        "order": [[ 0, "desc" ]],
        "columnDefs": [
            {
                "targets":
                [   colNum_hiddenCol1, 
                    //... Add other hidden columns
                ],
                "visible":    false,
                "searchable": false
            }
        ],
        "autoWidth": false,
        tableTools: {
            sRowSelect: "os",
            sSwfPath: "extensions/tabletools/swf/copy_csv_xls_pdf.swf",
            aButtons: [
                {
                    sExtends:        "editor_edit",
                    editor:          editor,
                    sButtonText:     "Modify"
                }, {
                    sExtends:        "xls",
                    sButtonText:     "Export as Excel",
                    sAction:         "flash_save",
                    "oSelectorOpts": {
                        page: 'current'
                    },
                    "mColumns":
                    [   colNum_columnExport1, 
                        //... Add other exportable columns
                    ]
                }, {
                    sExtends:        "pdf",
                    sButtonText:     "Export as PDF",
                    sPdfOrientation: "landscape",
                    "oSelectorOpts": {
                        page: 'current'
                    },
                    "mColumns":
                    [   colNum_columnExport1, 
                        //... Add other exportable columns
                    ]
                },
                "print"     , {
            sExtends:        'select_single',
            sButtonClass:    'marginLeft',
            sButtonText:     'Alternate Editor',
            fnClick: function () {
                if (table.row('.selected').length !== 0) {
                    editor_alternate
                        .title('Alternate Editor Form')
                        .buttons({ label: 'Modify Type 2', fn: function () { this.submit(); } })
                        .edit(table.row('.selected').node());
                }
            }
        }
            ]
        },
        initComplete: function (settings, json) {
            editor.field('myTable.foreignID').update(json.myForeignTable);
        }
    });
 
    $('#myTable tbody').on('click', 'tr', function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });
});

What am I missing?

allan

Can you link to the page showing the problem please? TableTools doesn't have a cell selection option, so it sounds like there might just be a CSS styling issue.

Thanks,
Allan