Very strange tab index issue

Very strange tab index issue

dougmdougm Posts: 23Questions: 3Answers: 0

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.

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • dougmdougm Posts: 23Questions: 3Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
        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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • dougmdougm Posts: 23Questions: 3Answers: 0

    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!

Sign In or Register to comment.