Is it possible to fix the buttons, search, paginations, etc. at the header?

Is it possible to fix the buttons, search, paginations, etc. at the header?

th3t1ckth3t1ck Posts: 58Questions: 12Answers: 1

I'm trying to figure out if this is possible. When a user scrolls up or down the datatable the following is always visible at the head...

Answers

  • kthorngrenkthorngren Posts: 4,556Questions: 19Answers: 999

    See if this example using position: sticky helps:
    http://live.datatables.net/rahetive/1/edit

    Kevin

  • allanallan Posts: 48,667Questions: 1Answers: 7,070 Site admin

    I do love position: sticky :).

    Allan

  • th3t1ckth3t1ck Posts: 58Questions: 12Answers: 1

    It works just the way I would like it to in your example but I can't get it working on my page. The header is fixed but that's all. Probably something simple I've overlooked.
    Here is the page source.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Support Requests</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="DataTables/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="DataTables/Bootstrap-4-4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="DataTables/Responsive-2.2.2/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="fontawesome5/web-fonts-with-css/css/fontawesome-all.min.css">
    <link rel="stylesheet" type="text/css" href="DataTables/Buttons-1.5.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="DataTables/Editor-1.8.1/css/editor.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="DataTables/Select-1.2.6/css/select.bootstrap4.min.css">
    <!-- <link rel="stylesheet" type="text/css" href="DataTables/FixedHeader-3.1.4/css/fixedHeader.bootstrap4.min"> -->
    
    <script src="DataTables/jQuery-3.3.1/jquery-3.3.1.min.js"></script>
    <script src="DataTables/jquery.dataTables.min.js"></script>
    <script src="DataTables/datatables.min.js"></script>
    <script src="DataTables/Bootstrap-4-4.1.1/js/bootstrap.min.js"></script>
    <script src="DataTables/Responsive-2.2.2/js/responsive.bootstrap4.min.js"></script>
    <script src="fontawesome5/fontawesome-all.js"></script>
    <script src="DataTables/Buttons-1.5.2/js/dataTables.buttons.min.js"></script>
    <script src="DataTables/Editor-1.8.1/js/dataTables.editor.min.js"></script>
    <script src="DataTables/Select-1.2.6/js/select.bootstrap4.min.js"></script>
    <!-- <script src="DataTables/FixedHeader-3.1.4/js/fixedHeader.bootstrap4.min"></script> --><style>
    table.styled_table {
      font-family: Helvetica;
        color: grey;
        background-color: #343a40;
      width: 100%;
    }
    table.db_restore {
      font-family: Helvetica;
        background-color: #e3eaf2;
        border-spacing: 50px;
        border-collapse: seperate;
      width: 100%;
    }
    td.db_restore {
      font-family: Helvetica;
        vertical-align: top;
        border-spacing: 50px;
        border-collapse: seperate;
    }
    th.db_restore, td.db_restore {
        padding: 5px;
        text-align: left;
            border-spacing: 50px;
            border-collapse: seperate;
    }
    h5.db_restore {
      font-family: Helvetica;
        text-decoration: underline;
    }
    table.db_maintenance {
      font-family: Helvetica;
        background-color: #e3eaf2;
        padding: 5px;
        border-spacing: 50px;
      width: 100%;
    }
    td.db_maintenance {
      font-family: Helvetica;
        border-spacing: 50px;
        vertical-align: top;
    }
    th.db_maintenance, td.db_restore {
        padding: 5px;
            border-spacing: 50px;
        text-align: left;
    }
    h5.db_maintenance {
      font-family: Helvetica;
        text-decoration: underline;
    }
    div.dom_wrapper {
      position: sticky;  /* Fix to the top */
      top: 0;
      padding: 2px;
      background: rgba(255, 255, 255, 1);  /* hide the scrolling table */
    }
    
    </style>
    <style class="init">
    #customForm {
        display: flex;
        flex-flow: row wrap;
    }
    #customForm fieldset {
        flex: 1;
        border: 1px solid #aaa;
        margin: 0.5em;
    }
    #customForm fieldset legend {
        padding: 5px 20px;
        border: 1px solid #aaa;
        font-weight: bold;
        font-size: 14px;
    }
    #customForm fieldset.support_requests_details {
        flex: 2 100%;
    }
    #customForm fieldset.support_requests_details legend {
        background: #4286f4;
    }
    #customForm div.DTE_Field {
        padding: 5px;
    }
    </style>
    </head>
    
    <body>
    <div class="table-responsive">
    
    <script>
        var table = $('#support_requests').DataTable( {
            dom: '<"dom_wrapper fh-fixedHeader top"Bfl>iprt<"bottom">p<"clear">',
            ajax: 'support_requests-con.php',
            columns: [
            { data: 'support_requests.date' },
            { data: 'support_requests.after_hours' },
        { data: 'support_requests.rdo' },
            { data: 'lk_categories.category' },
            { data: 'lk_chp_ranks.rank' },
            { data: 'lk_chp_locations.location' },
        { data: 'lk_chp_divisions.division' },
            { data: 'support_requests.summary'},
            { data: 'tbl_userid.user_id'},
            { data: 'tbl_fullname.full_name'}
    
            ],
             responsive: true,
             select: true,
             stateSave: true,
            buttons: [
                { extend: 'create',   editor: editor },
                { extend: 'edit',   editor: editor },
                { extend: 'remove', editor: editor },
                { text: 'Reload', action: function ( e, dt, node, config ) {dt.ajax.reload();}},
                { extend: 'pdfHtml5', orientation: 'landscape', filename: 'Support Requests' },
                { extend: 'copyHtml5', exportOptions: { orthogonal: 'export' } },
                { extend: 'excelHtml5', filename: 'Support Requests' },
                { extend: 'csvHtml5', filename: 'Support Requests' },
                 'colvis', 'print'
            ],
            'aLengthMenu': [[10, 25, 50, -1], [ 'Daily', 'Weekly', 'Monthly', 'All']],
            'iDisplayLength': 50,
            fixedHeader: true
        } );   
    } );
    </script>
    <div id="customForm">
      <fieldset class="support_requests_details">
        <legend><i class="fas fa-briefcase"></i> SUPPORT REQUEST DETAILS</legend>
                <div data-editor-template="support_requests.date"></div>
                <div data-editor-template="support_requests.after_hours"></div>
                <div data-editor-template="support_requests.rdo"></div>
                <div data-editor-template="support_requests.category"></div>
                <div data-editor-template="support_requests.rank"></div>
                <div data-editor-template="support_requests.area_office"></div>
                <div data-editor-template="support_requests.division"></div>
                <div data-editor-template="support_requests.summary"></div>
                <div data-editor-template="support_requests.user_id"></div>
                <div data-editor-template="support_requests.assigned"></div>
      </fieldset>
    </div>
    
     <table id="support_requests" class="table table-striped table-bordered dt-responsive no-wrap" width="100%">
            <thead>
                <tr>
                                    <th>Date</th>
                                    <th>After Hours</th>
                                    <th>RDO</th>
                                    <th>Category</th>
                                    <th>Requesting Employee's Rank</th>
                                    <th>Area Office</th>
                                    <th>Division</th>
                                    <th>Summary</th>
                                    <th>Assigned Employee ID</th>
                                    <th>Assigned Employee Name</th>
               </tr>
            </thead>
        </table>
      </div>
    </body>
    </html>
    

    Allan will probably notice a few things in here that he helped me with.

  • kthorngrenkthorngren Posts: 4,556Questions: 19Answers: 999
    edited January 15

    Don't see anything that stands out as an issue. Looks like you have FixedHeader CSS and JS files commented out. Is the header still fixed?

    I updated the example for Bootstrap 4.
    http://live.datatables.net/qaxejima/1/edit

    I used the dom option default config for Bootstrp 4. Also had to adjust the z-index to bring the dom_wrapper to the top, otherwise the THEAD would appear within the `do_wrapper area.

    NOTE: I changed the color of the dom_wrapper so you could see that, as it is, this solution is not 100%. If the table width causes the search input to be below the buttons then there is an area next to the dom_wrapper that shows the scrolling table.I'm not sure how to fix this.

    If you are unable to get this to work then we would probably need a link to your page or a test case replicating the issue. Feel free to update my example.

    Kevin

  • th3t1ckth3t1ck Posts: 58Questions: 12Answers: 1

    Still not working. I commented out the css and js for fixedHeader because it was working anyway. I think I downloaded multiple plug-ins when I bought the software. I uncommented them back out and still no change. The table header is fixed still, just not the button.
    Can I put a test page on live.datatables.com? If so is there anything special I need to do? Like upload style sheets, javascript, etc.?

  • allanallan Posts: 48,667Questions: 1Answers: 7,070 Site admin

    http://live.datatables.net lets you paste in the CSS, HTML and JS. Equally you could use CodePen, JSFiddle or any other similar site.

    Allan

Sign In or Register to comment.