Question

我正在创建一个由AJAX动态填充的表。表格中有几列。因此，表的整个内容被设计为在溢出时水平滚动。但是用户需要使用键盘箭头键左右移动。相反，我想为用户提供两个箭头，放在桌子可见部分的两侧，左右两侧像Bootstrap轮播一样左右。但这里略有不同。当我向上/向下滚动页面时，箭头也应该在表格的可见部分内上/下移动以允许用户导航。

我知道如何在按钮点击时水平向侧面滚动表格。但我不能将这些箭头放在桌子可见部分的两端。任何人都可以建议如何通过CSS，Jquery或使用这两种方法或任何其他方法来实现这一目标。

HTML代码如下 -

 <div id="table_div" style="display:none;">
    <div style="overflow-x: scroll; position:relative;" id="tablecontent">
        <table id="table" class="table table-striped table-hover">
            <thead class="vd_bg-green vd_white">

                <tr>
                    <th>Edit</th>
                    <th>Student Id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Father's Name</th>
                    <th>Address</th>
                    <th>DOB</th>
                    <th>Mobile</th>
                    <th>Email</th>
                    <th>Gender</th>
                    <th>Start Year</th>
                    <th>End Year</th>
                    <th>Registration No</th>
                    <th>Roll No</th>
                    <th>Stream</th>
                    <th>Section</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="table_body">
                <tr>

                <!--Dynamically generated data from AJAX goes here-->

                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

尝试： HTML：

<button class="left">left</button><button class="right">right</button>

的CSS：

div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }
button {
    position: fixed;
    top:100px;
}
.right {
    right:0;
}

JS：

$(document).ready(function() {
    $('#example').DataTable( {
        "scrollX": true,
        "bPaginate": false
    } );

} );
$('button').on('click',function(){
     var pwidth = $('div.dataTables_wrapper').width();

    if($(this).hasClass('left')){
       $('.dataTables_scrollBody').scrollLeft( $('.dataTables_scrollBody').scrollLeft()-pwidth );
    } else {
        $('.dataTables_scrollBody').scrollLeft($('.dataTables_scrollBody').scrollLeft()+pwidth );
    };


});

https://jsfiddle.net/tuuga07h/1/

将导航箭头放置在包含表格的div中以横向滚动

1 个答案: