数据表选择“第一行加载”

datatables select first row onload

本文关键字：一行 加载 第一行加载 选择 数据表      更新时间：2023-09-26

我正在尝试在第一次加载数据时自动选择表的第一行，但未能做到这一点。

首次加载表时如何自动选择表的第一行？此 html 不起作用：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/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>

oTable.$('tr:first')会引发错误 - $不是oTable的函数或属性。

您必须使用

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

因为tr:first会返回<thead> <tr>，而不是<tbody> <tr>！

我认为默认情况下您无法在HTML中聚焦整个<tr>，因此您必须在<tr>中添加一些CSS以使焦点可见。喜欢这个

tr {
    border:1px inset white;
}
tr.focused {
   border:1px solid red; 
}
oTable.find('tbody tr:first').addClass('focused');

单击行时聚焦行的示例：

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

以上所有内容都在这个小提琴中 ->http://jsfiddle.net/vv7Sa/

检查此链接，它应该会有所帮助： https://www.datatables.net/forums/discussion/18305/select-first-row-onload. 或者你可以试试这个： 

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