Set focus to firt row.

Linkrag

I'm trying to set focus to the firt row in the table as soon it is opened. I can set focus to filter with:

$("#tblComponents_filter input").focus();

But when i try to set focus to the body with:

$("#tblComponents tbody").focus();

It dosent seem to work. I'm opening my table with a codemirror function using CRTL+I and when i use the second example it dosent set focus to the table at all. But with the filter focus it works correctly.

My function to call the table:

            function callTemplate(cm) {
                var pos = cm.cursorCoords(null);
                $("#ctx-menu").css({
                    display: "block",
                    top: pos.bottom - 30,
                    left: pos.left
                }).addClass("show");
                tblComponents.clear().draw();
                addTableRows();
                $("#tblComponents_filter input").val("");
                $("#tblComponents_filter input").focus();
                return false;
            }

And the table configs. The 1 row (Nome - Name) its a clicable option that calls a sample code (Template) to the textArea. After i fix the focus i want to make it navigable using the arrow keys, but i already found some examples in the forum.

            $(document).ready(function () {
                tblComponents = $('#tblComponents').DataTable({
                    ordering: false,
                    "scrollY": "200px",
                    "scrollCollapse": true,
                    info: false,
                    searching: true,
                    pageLength: 5,
                    bLengthChange: false,
                    bPaginate: false,
                    keys: true,
                    language: {
                        emptyTable: ' ',
                        sSearch: ' '
                    },
                    columnDefs: [
                        {
                            name: "Nome",
                            targets: [0],
                            width: '120'
                        },
                        {
                            name: "Template",
                            targets: [1],
                            visible: false
                        }
                    ]
                });

                $('#tblComponents tbody').on('click', 'tr', function () {
                    selectComponent(this);
                });
                addTableRows();
            });

Please help me. Thanks.

allan

Referring to focus here, do you mean the KeyTable focus (I see you are using keys: true)?

If so cell().focus() is the method you want: http://live.datatables.net/lebazaqi/1/edit .

Allan

Linkrag

Yes the keys true will be used to the next function, that i could not test, becouse the inicial focus is on the filter when i open the table. What i want to do is press the command CTRL+I to bring the table with the list/data (thats already done) then with the focus set on the first row i will navigate the table to the "button"/cell i want and press enter. On short im using the table as a autocomplete function with templates.

I tried to use the cell().focus but the console says that its not a function. JS its not my stronger programming language, so im sorry if im doing something wrong.

            function callTemplate(cm) {
                var pos = cm.cursorCoords(null);
                $("#ctx-menu").css({
                    display: "block",
                    top: pos.bottom - 30,
                    left: pos.left
                }).addClass("show");
                tblComponents.clear().draw();
                addTableRows();
                $("#tblComponents_filter input").val("");
                tblComponents.cell(':eq(0)', 0).focus();
                return false;
            }

I used this before, but it didn't work, like now. When i use this (above) the focus stay at the editor.

colin

cell().focus() is a function in the KeyTable extension, so for that error to happen, you wouldn't have the files for that extension loaded. If you look at this example here, ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table.

Colin