DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

How to select a row by its (displayed) index in an ordered DataTable ?

How to select a row by its (displayed) index in an ordered DataTable ?

ComodeComode Posts: 7Questions: 2Answers: 0
in DataTables 1.10

Hello,
I want to be able to select a row in my dataTable using keyboard's arrows (or any other way).
I've an index var (let's call it myCursor) going from 0 to DT.page.info().recordsTotal - 1. When i press a key, it updates MyCursor, changes page if needed and now, i want to add a class to the row having myCursor as index.

i wrote
DT.row(myCursor).nodes().to$().addClass("myClass");

However, as the table is sorted, myCursor does not correspond to the displayed element.

How should i do to get the displayed row corresponding to myCursor ?

Thx in advance

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    There is no row().nodes() method - either rows().nodes() or row().node(). The above code should be giving an error on the browser's console I would think.

    Beyond that, if you could link to the page that would be useful.

    Allan

  • ComodeComode Posts: 7Questions: 2Answers: 0
    edited June 2015

    There's no page avaible yet, but i'm positive, there's no error with that code (Firefox + Firebug).

    the switch(event.keyCode) code is

    case 38 : //arrow up
var DT = $("#datatable_" + id).DataTable();
var infos = DT.page.info();
if(myCursor === false || myCursor === 0)
{
    myCursor = infos.recordsTotal - 1;
    DT.page(infos.pages - 1);
}
else
{
    myCursor--;
    if(myCursor < infos.start)
        DT.page(infos.page - 1);
}
DT.row().nodes().to$().removeClass("datatable_cursor_row");
DT.row(myCursor).nodes().to$().addClass("datatable_cursor_row");
DT.draw(false);
console.log(myCursor);
break;

    And except for the highligthning order, it works pretty fine...

    May i asked how you would get the next/prev item ?

    Thank you vm.

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    I must confess I don't know why that isn't giving an error. It should! I would very much recommend you use either row().node().

    As to why it isn't working - I'm not sure! It is operating on the DataTables internal row index. You probably want to pass {page:'current'} into the row() selector.

    Allan

  • ComodeComode Posts: 7Questions: 2Answers: 0

    Ummm looks like we're misunderstanding... Maybe my english is a bit bad :/

    for row.node, on row().node(), there's :

    table
    .row( '#row-4' )
    .nodes()
    .to$()      // Convert to a jQuery object
    .addClass( 'ready' );
);

    Isn't it what i did ?

    For my main question, I made a very simple page from my code to explain :

    <!DOCTYPE html>
<meta charset="utf-8"> 
<head>
    <link rel="stylesheet" type="text/css" href="./jquery/jqueryui/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="./jquery/datatables/media/css/jquery.dataTables.css">
    <script type="text/javascript" src="./jquery/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="./jquery/jqueryui/jquery-ui.js"></script>
    <script type="text/javascript" src="./jquery/datatables/media/js/jquery.dataTables.js"></script>
   
    <style>
        .HL td {background-color:#0F0;}
    </style>

    <script>
    $(function(){
        var myCursor = false;
        var DT = $("#DT").DataTable({"order": [[0, "desc" ]], "pageLength" : 10});
        $(document).on("keypress", function(event){
            switch(event.keyCode)
            {
                default : break;
                
                case 38 : //arrow up
                var infos = DT.page.info();
                if(myCursor === false || myCursor === 0)
                {
                    myCursor = infos.recordsTotal - 1;
                    DT.page(infos.pages - 1);
                }
                else
                {
                    myCursor--;
                    if(myCursor < infos.start)
                        DT.page(infos.page - 1);
                }
                DT.row().nodes().to$().removeClass("HL");
                DT.row(myCursor).nodes().to$().addClass("HL")
                DT.draw(false);
                
                console.log(myCursor);
                break;
            }
        }); 
    });
    </script>
</head>
<body>
    <table id="DT">
        <thead>
            <tr>
                <th>First Name</td>
                <th>Last Name</td>
            </tr>
        </thead>
        <tbody>
            <tr><td>B</td><td>H</td></tr>
            <tr><td>C</td><td>F</td></tr>
            <tr><td>A</td><td>G</td></tr>
            <tr><td>E</td><td>I</td></tr>
            <tr><td>D</td><td>J</td></tr>
        </tbody>
    </table>
</body>
</html>

    The point and is that i can't get the index working. When i press key UP, the highlighting order is going wrong.

    Thx again and sorry for being annoying.

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    for row.node, on row().node()DT, there's :

    Yes - that is what you have done. The example is wrong. Fixed committed and I'll push it up to the site soon. Thank your for letting me know about that.

    For for why your example isn't working - myCursor is an integer, which means that row() is selected on the row data index (see the row-selector documentation). If you want it to select based on current position use ':eq('+myCursor+')' to use a jQuery selector.

    Allan

  • ComodeComode Posts: 7Questions: 2Answers: 0

    It works !

    I never though the row data index would'nt be an integer.

    Thank you very much !

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.