locked
ScrollX Datatables not scrolling whole width of tables RRS feed

  • Question

  • User1352447851 posted

    I am trying to create a horizontal scrollbar at the base of my tables for when they are too long for the page. At the moment I am using

    <div class="card shadow mb-4">
    <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold">Users</h6>
    </div>
    <div class="card-body">
    <div class="table-responsive">
    <div id="dataTable_wrapper" class="dataTables_wrapper dt-bootstrap4"> //dataTable_wrapper has a set width of 20000px
    <table class="table display" cellspacing="0" role="grid" width="100%" style="width: 100%;" aria-describedby="dataTable_info">
    <thead class="p-3 mb-2">
    <tr>
    <th class="sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending"
    aria-sort="ascending">Username</th>
    <th class="sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending"
    aria-sort="ascending">First Name</th>
    <th class="sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending"
    aria-sort="ascending">Last Name</th>
    <th class="sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending"
    aria-sort="ascending">Department</th></tr>
    </thead>
    <tbody>

    Javascript:

    $('table.display').DataTable({
    "scrollX": true,
    "order": [[4, "desc"]],
    columnDefs: [{
    orderable: false,
    targets: [2]
    }]
    });

    The scrollbar appears, but when the page is too small it doesn't scroll the whole width of the table, so you can still only see part of it.

    Thursday, April 4, 2019 5:19 PM

Answers

  • User36583972 posted

    Hi Shadow,

    he scrollbar appears, but when the page is too small it doesn't scroll the whole width of the table, so you can still only see part of it.

    I test scrollX on my side. It can scroll horizontally when needed.

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css" />
        <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
        <script src=' https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js' type='text/javascript'></script>
    
    
     $(document).ready(function () {
                $('#example').DataTable({
                    data: dataSet,
                    "ordering": true,
                    scrollX: true,
                    columns: [
                        { title: "Name" },
                        { title: "Position" },
                        { title: "Office" },
                        { title: "Hre" },
                        { title: "Tile" },
                        { title: "Office" },
                        { title: "Dgat" },
                        { title: "MAKR" }
                    ],
                });
            });
    
               <table id="example" width="100%"  class="stripe row-border order-column" style="width: 100%">
                </table>

    Scroll - horizontal and vertical
    https://datatables.net/examples/basic_init/scroll_xy.html


    Best Regards

    Yong Lu



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 5, 2019 7:36 AM

All replies

  • User36583972 posted

    Hi Shadow,

    he scrollbar appears, but when the page is too small it doesn't scroll the whole width of the table, so you can still only see part of it.

    I test scrollX on my side. It can scroll horizontally when needed.

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css" />
        <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
        <script src=' https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js' type='text/javascript'></script>
    
    
     $(document).ready(function () {
                $('#example').DataTable({
                    data: dataSet,
                    "ordering": true,
                    scrollX: true,
                    columns: [
                        { title: "Name" },
                        { title: "Position" },
                        { title: "Office" },
                        { title: "Hre" },
                        { title: "Tile" },
                        { title: "Office" },
                        { title: "Dgat" },
                        { title: "MAKR" }
                    ],
                });
            });
    
               <table id="example" width="100%"  class="stripe row-border order-column" style="width: 100%">
                </table>

    Scroll - horizontal and vertical
    https://datatables.net/examples/basic_init/scroll_xy.html


    Best Regards

    Yong Lu



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 5, 2019 7:36 AM
  • User1352447851 posted

    I had a <class "row"> tag either side of the table that was breaking things. All fixed now.

    Tuesday, April 9, 2019 9:06 AM