jquery datatable onload选择第一行不起作用

时间:2014-06-03 13:07:36

标签: jquery jquery-datatables

我正在尝试在第一次加载数据时自动选择第一行表。 我尝试使用下面的代码,它不起作用。

javaScript.js:

 $(document).ready( function () {
    $('#example1').dataTable( {
        "sDom": 'T<"clear">lfrtip',
        fnInitComplete:function() {
           $('#example tbody tr:eq(0)').click(); 
         }       
     } );


} );

请帮助我..

1 个答案:

答案 0 :(得分:1)

点击此链接:https://www.datatables.net/forums/discussion/18305/select-first-row-onload 我希望它会有所帮助。你走在正确的道路上:))

<!DOCTYPE html>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">" target="_blank" rel="nofollow">http://www.w3.org/1999/xhtml"></a>;
<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>