Very strange tab index issue

dougm

First off I do not have the bug reproduced where you can see the problem in action.
The problem : I have multiple tables that all have one column and the tab action doesn't take me to the next row after clicking in the first row. If I click in the second row and then click in the first row again it then tabs to the the 2 row and 3rd etc.
The examples I have seen all the seem to say add keys: true and include the keyTable.dataTables.min.css and dataTables.keyTable.min.js which I have done. Any help would be greatly appreciated.

colin

We would really need to see this to progress it. Please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

dougm

Would it be possible to DM you a link with a user id and password to view the problem? It is a very complex problem to try to reproduce.

Here is my code that generates a lot of tables for the view. I have tried numerous things with in the "keys" section and I have linked to the key css and js.

    theEditor = new $.fn.dataTable.Editor({
        ajax: {
            edit: {
                url: "${pageContext.servletContext.contextPath}/enterpriseanalysis/save.do?clientId=${enterpriseAnalysisForm.clientId}&id=${enterpriseAnalysisForm.id}&description="+titleDescription+"&year=${enterpriseAnalysisForm.year}&type="+type
            }
        },
        table: tableName,
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        },
        fields: [{name: "enterpriseAnalysisId"}, {name: "DT_RowId"}, {name:"amount"}, {name:"type"}, {name:"incomestatmentId"}]
    });
    $(tableName).on( 'click', 'tbody td', function (e) {
        theEditor.inline( this, {
            submit: 'allIfChanged'
        });
    });
    $(tableName).on( 'click', 'tr', function (e) {
         if ( $(this).hasClass('selected') ) {
             $(this).removeClass('selected');
         }
         else {
             table.$('tr.selected').removeClass('selected');
             $(this).addClass('selected');
         }      
    });
    theEditor.on('submitSuccess', function (e, json, data) {
        validateNumbers(data.enterpriseAnalysisId);
    });
    $( 'input', theEditor.node() ).on( 'focus', function () {
          this.select();
    });
    table = $(tableName).DataTable( {
        bFilter: false,
        bPaginate: false,
        bInfo : false,
        bSort: false,
        ajax: "${pageContext.servletContext.contextPath}/enterpriseanalysis/buildCategoryTable.do?clientId=${enterpriseAnalysisForm.clientId}&enterpriseAnalysisId=${enterpriseAnalysisForm.id}&description="+titleDescription+"&year=${enterpriseAnalysisForm.year}&type="+type,
        columns: [
            { data: "amount" , className:'dt-head-right dt-body-right', render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        order: [ 0, 'asc' ],
        keys: {
            columns: [ 1 ],
            keys: [ 9 ],
            editor: theEditor,
            editOnFocus: true
        },
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
            var total = api
                .column(0)
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
            $(api.column(0).footer()).html(formatCurrency(total));
        },
        "processing": true
    }); 

Thanks
Doug

kthorngren

    keys: {
        columns: [ 1 ],
        keys: [ 9 ],
        editor: theEditor,
        editOnFocus: true
    },

If you have only one column the column index should be 0, for example, columns: [ 0 ],. Hope this helps.

Kevin

colin

Would it be possible to DM you a link with a user id and password to view the problem? It is a very complex problem to try to reproduce.

Yep, if Kevin's suggestion doesn't get you going, please DM to myself or @allan and we'll take a look,

Colin

dougm

I decided to build a public facing example of the issue and rewrote the page from scratch one table at a time and of course it works there! The columns: [1] fix to [0] was not the problem. I had some row highlighting code that was not required and I cleaned up the code and it works as expected.

Thanks!