javascript - datatables select first row onload - Stack Overflow|江阴雨辰互联

I'm trying to auto select first row of table when data is loaded for the first time and failing to do that.

How do I auto select first row of table when table loads for the first time? This html doesn't work:

<!DOCTYPE html>
<html xmlns="">
<head>
    <title></title>

    <style type="text/css" title="currentStyle">
            @import "DataTables/css/demo_page.css";
            @import "DataTables/css/demo_table.css";
    </style>


    <script type="text/javascript" src="Datatables/js/jquery.js"></script>
    <script type="text/javascript" src="Datatables/js/jquery.dataTables.js"></script>

    <script>

        var oTable;
        var firstTime = true;

        $(document).ready(function () {

            $("#example tbody").click(function (event) {
                $(oTable.fnSettings().aoData).each(function () {
                    $(this.nTr).removeClass('row_selected');
                });
                $(event.target.parentNode).addClass('row_selected');
            });

            oTable = $('#example').dataTable({
                "sScrollX": "500px",
                "sPaginationType": "full_numbers",

                "bServerSide": true,
                "sAjaxSource": "services/data3.ashx",
                "sServerMethod": "POST",
                "fnDrawCallback": function (oSettings) {
                    if (firstTime) {
                        alert('DataTables has redrawn the table');
                        oTable.$('tr:first').click();
                        firstTime = false;
                    }

                }
            });


        });

    </script>

</head>
<body>

    <table border="1" >

        <tr><td>id</td><td><input type="text" /></td></tr>
        <tr><td>name</td><td><input type="text" /></td></tr>
        <tr><td>surname</td><td><input type="text" /></td></tr>


    </table><br />

    <table id="example" border="1" class="display">
        <thead>
            <tr>
                <td>name</td>
                <td>surname</td>
                <td>id</td>
            </tr>

        </thead>
        <tbody></tbody>


    </table>

</body>
</html>

I'm trying to auto select first row of table when data is loaded for the first time and failing to do that.

How do I auto select first row of table when table loads for the first time? This html doesn't work:

<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
    <title></title>

    <style type="text/css" title="currentStyle">
            @import "DataTables/css/demo_page.css";
            @import "DataTables/css/demo_table.css";
    </style>


    <script type="text/javascript" src="Datatables/js/jquery.js"></script>
    <script type="text/javascript" src="Datatables/js/jquery.dataTables.js"></script>

    <script>

        var oTable;
        var firstTime = true;

        $(document).ready(function () {

            $("#example tbody").click(function (event) {
                $(oTable.fnSettings().aoData).each(function () {
                    $(this.nTr).removeClass('row_selected');
                });
                $(event.target.parentNode).addClass('row_selected');
            });

            oTable = $('#example').dataTable({
                "sScrollX": "500px",
                "sPaginationType": "full_numbers",

                "bServerSide": true,
                "sAjaxSource": "services/data3.ashx",
                "sServerMethod": "POST",
                "fnDrawCallback": function (oSettings) {
                    if (firstTime) {
                        alert('DataTables has redrawn the table');
                        oTable.$('tr:first').click();
                        firstTime = false;
                    }

                }
            });


        });

    </script>

</head>
<body>

    <table border="1" >

        <tr><td>id</td><td><input type="text" /></td></tr>
        <tr><td>name</td><td><input type="text" /></td></tr>
        <tr><td>surname</td><td><input type="text" /></td></tr>


    </table><br />

    <table id="example" border="1" class="display">
        <thead>
            <tr>
                <td>name</td>
                <td>surname</td>
                <td>id</td>
            </tr>

        </thead>
        <tbody></tbody>


    </table>

</body>
</html>

Share Improve this question asked Nov 15, 2013 at 9:55 user2959594 4231 gold badge5 silver badges5 bronze badges

Use focus(). Possible duplicate of Focus on Table row TR for accessiblity – Anto Jurković Commented Nov 15, 2013 at 11:31

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

oTable.$('tr:first') will raise an error - $ is not a function or property of oTable.

You must use

oTable.find('tbody tr:first').focus()

because tr:first will return the <thead> <tr>, not the <tbody> <tr>!

I dont think you by default can focus an entire <tr> in HTML, so you must add some CSS to the <tr> to make the focus visible. Like this

tr {
    border:1px inset white;
}
tr.focused {
   border:1px solid red; 
}

oTable.find('tbody tr:first').addClass('focused');

An example of focusing rows when they are clicked :

oTable.find('tbody tr').click(function() {
    oTable.find('tbody tr').removeClass('focused');
    $(this).addClass('focused');
});

All the above in this fiddle -> http://jsfiddle/vv7Sa/

Check this link, it should help: https://www.datatables/forums/discussion/18305/select-first-row-onload. or you can try this:

 $('#table-id').on('init.dt', function() {
           $('#table-id tbody tr:eq(0)').click();
    });

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745116454a4612154.html

javascript - datatables select first row onload - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - datatables select first row onload - Stack Overflow

2 Answers 2

相关推荐