【问题标题】:Scroll to specific row in Datatable API滚动到 Datatable API 中的特定行
【发布时间】:2017-08-01 12:55:00
【问题描述】:

我需要滚动到我的数据表中的特定行,如下所示:

https://datatables.net/extensions/scroller/examples/initialisation/api_scrolling.html

这是我的代码:

        <script src="js/jquery-1.12.4.js"></script>
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/form-builder.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        ....
        <script>
            $(document).ready(function() {
                tableEntityList = $('#accentityListTable').DataTable({      
                    "ordering": false,  
                    "scrollY":"120px",
                    "scrollCollapse": true,
                    "paging":false, 
                    "dom":'<<"top"i>ft>',
                    "deferRender":true,
                    "scroller":true,    
                    "columnDefs": [
                        {"targets": [ 0 ],"visible": false}
                    ],
                    "createdRow": function( row, data, dataIndex ) {
                        if ( data[ 3 ] == "Inp" )
                            $(row).css('color', 'green')
                        else 
                            $(row).css('color', 'red')

                        if ( data[7] > 0 ) $(row).css('font-weight', 'bold')                        
                    },
                    "initComplete": function () {
                        alert("first");
                        this.api().row( 2 ).scrollTo();
                        alert("second");
                    }           

                });
    })
</script>

出现第一个警报:

alert("first");

但是第二个,没有:

alert("second");

我做错了什么?

谢谢。

【问题讨论】:

  • 你正在使用两个 jQuery 库,删除一个你不需要的。

标签: javascript jquery datatables


【解决方案1】:

我认为应该是“scrollY”:“120”,而不是“scrollY”:“120px”。尝试不使用 px。

【讨论】:

【解决方案2】:

我认为问题可能在于您使用了“this”。在这种情况下,我认为它实际上引用了回调函数,而不是 DataTable。我不确定你是否可以以某种方式将它作为参数传递给回调函数,但如果你在回调函数范围之外创建对 DataTable 的引用,则可以通过该变量访问它。

【讨论】:

  • 这不是真的,用this完全没问题,见this example
【解决方案3】:

请用下面的 initComplete 函数替换。它会起作用的。

"initComplete": function () {
    $('#example').DataTable().row(2).scrollTo();
}

注意:2代表n-1个目标行

【讨论】:

  • this完全OK,见this example,不用$('#example').DataTable()
  • 但是 this.api() 不起作用。请看下面的示例代码codepen.io/abbasak/pen/pePJGX
  • 如果我使用this.api(),我会得到相同的结果,这是首选方法,因为您不一定必须使用表ID。
  • 好的,我也试试
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-12-29
  • 1970-01-01
  • 1970-01-01
  • 2020-09-24
  • 1970-01-01
  • 2014-07-10
相关资源
最近更新 更多