datatables选择第一行onload

我试图自动选择数据第一次加载时没有这样做的第一行表。datatables选择第一行onload

第一次加载表格时，如何自动选择第一行表格？此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>

来源

2013-11-15 user2959594

Use focus（）。可能重复的[关于访问权限集中在表行TR]（http://stackoverflow.com/questions/7103306/focus-on-table-row-tr-for-accessiblity） –

oTable.$('tr:first')将引发一个错误 - $不是oTable的功能或属性。

您必须使用

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

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

我不认为你默认情况下可以将整个<tr>集中在HTML中，所以你必须添加一些CSS到<tr>使焦点可见。像这样

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/

来源

2013-11-15 12:06:29 davidkonrad

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

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

来源

2014-09-22 10:34:51 SharpCoder

datatables选择第一行onload

回答

相关问题