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: 66Questions: 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,586Questions: 19Answers: 1,009

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

    Kevin

  • allanallan Posts: 48,698Questions: 1Answers: 7,081 Site admin

    I do love position: sticky :).

    Allan

  • th3t1ckth3t1ck Posts: 66Questions: 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,586Questions: 19Answers: 1,009
    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: 66Questions: 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,698Questions: 1Answers: 7,081 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

  • th3t1ckth3t1ck Posts: 66Questions: 12Answers: 1

    How do I reference all the javascript and css? For instance...

    <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/FixedHeader-3.1.4/css/fixedHeader.bootstrap4.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">
    
    <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/FixedHeader-3.1.4/js/fixedHeader.bootstrap4.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>
    
  • kthorngrenkthorngren Posts: 4,586Questions: 19Answers: 1,009

    You would use the CDN for JS and CSS. Most you can generate most of them using the Download Builder. If needed you can uncheck the "Concatenate" option and change the versions. I think Font Awesome is the only one not found in the Download Builder.

    Kevin

  • th3t1ckth3t1ck Posts: 66Questions: 12Answers: 1

    Got it. I was just looking at the CDN :smiley:
    I have a CodePen account now. My only question is since I bought Editor is there a way to link to it?

  • kthorngrenkthorngren Posts: 4,586Questions: 19Answers: 1,009

    Not sure you can do that. I don't think you will be able to use it via CDN. I did modify my example with the extensions (including Editor) you are using. You can load the Editor in the live.datatables.net environment.
    http://live.datatables.net/dimurude/1/edit

    It still is working correctly. Or at least as correctly as I described above :smile:

    I did notice that you are missing some BS4 integration files like buttons.bootstrap4.min.js, editor.bootstrap4.min.js and you need to change the respective CSS to the BS4 CSS. Might not fix the problem though.

    Kevin

  • kthorngrenkthorngren Posts: 4,586Questions: 19Answers: 1,009

    Just realized the paging option wasn't part of the dom_wrapper. Moved the div termination from Bfl>iprt to Bflip>rt. Not sure if that helps with your overall problem.
    http://live.datatables.net/zevewesa/1/edit

    Kevin

  • th3t1ckth3t1ck Posts: 66Questions: 12Answers: 1

    Thank you Kevin. I did notice the BS4 css/js I am missing when I started using the CDN. I'll fix that shortly and see if it helps. As for codepen, I can't seem to get the buttons to appear. https://codepen.io/th3t1ck/pen/oJrPpZ

  • th3t1ckth3t1ck Posts: 66Questions: 12Answers: 1

    Well I copied all the js/css you used in the example but replaced editor with my own and now I get the following errors...

    responsive.bootstrap4.min.js:5 Uncaught TypeError: Cannot read property 'display' of undefined
        at responsive.bootstrap4.min.js:5
        at responsive.bootstrap4.min.js:5
        at responsive.bootstrap4.min.js:5
    (anonymous) @ responsive.bootstrap4.min.js:5
    (anonymous) @ responsive.bootstrap4.min.js:5
    (anonymous) @ responsive.bootstrap4.min.js:5
    buttons.bootstrap4.min.js:5 Uncaught TypeError: Cannot read property 'defaults' of undefined
        at buttons.bootstrap4.min.js:5
        at buttons.bootstrap4.min.js:5
        at buttons.bootstrap4.min.js:5
    (anonymous) @ buttons.bootstrap4.min.js:5
    (anonymous) @ buttons.bootstrap4.min.js:5
    (anonymous) @ buttons.bootstrap4.min.js:5
    editor.bootstrap4.min.js:8 Uncaught TypeError: Cannot read property 'defaults' of undefined
        at editor.bootstrap4.min.js:8
        at editor.bootstrap4.min.js:8
        at editor.bootstrap4.min.js:8
    
  • allanallan Posts: 48,698Questions: 1Answers: 7,081 Site admin

    There are a couple of issues with the codepen you linked to above:

    1. jQuery isn't being included on the page, so the console is showing an error about that.
    2. When it is included, there is an error "editor is not defined" which is correct, you are using { extend: 'create', editor: editor } but there is no editor variable.
    3. Removing those buttons results in the error "Unknown button type: pdfHtml5`. Adding that and the print button type and colvis, and it shows the buttons:

    https://codepen.io/anon/pen/dabmXg

    You'd be better using the download builder to make sure you get all the files you need.

    Allan

  • th3t1ckth3t1ck Posts: 66Questions: 12Answers: 1

    Ah yes. I overlooked those editor entries.
    I used the download builder and included the following...

    Styling Framework = Bootstrap4
    Packages = jquery3
    Bootstrap4
    Data Tables
    Editor
    Extensions = Buttons
    Column Visibility
    HTML 5 export
    JSZip
    pdfmake
    Print view
    FixedHeader
    Responsive
    Select

    Still the buttons won't cooperate and stay still. These are the only css/js I have now.

    <link rel="stylesheet" type="text/css" href="DataTables2/datatables.min.css"/>
    <link rel="stylesheet" type="text/css" href="fontawesome5/web-fonts-with-css/css/fontawesome-all.min.css">
    
    <script type="text/javascript" src="DataTables2/datatables.min.js"></script>
    <script type="text/javascript" src="fontawesome5/fontawesome-all.js"></script>
    
  • th3t1ckth3t1ck Posts: 66Questions: 12Answers: 1

    So I'm making some progress. I am adding to the code you and Kevin provided. So far so good.

  • th3t1ckth3t1ck Posts: 66Questions: 12Answers: 1

    I found the problem. I didn't want to keep pestering you guys. For some reason this line is causing the buttons to not fix to the header...

    <

    div class='table-responsive'>

    Any ideas?

  • th3t1ckth3t1ck Posts: 66Questions: 12Answers: 1
    edited 6:30AM

    Should have been...

    <div class='table-responsive'>
    

    Any ideas?

  • allanallan Posts: 48,698Questions: 1Answers: 7,081 Site admin

    Not immediately - probably something to do with the positioning of the elements, but I'd need a link to your page to be able to debug it and say for sure.

    Thanks,
    Allan

Sign In or Register to comment.