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: 228Questions: 37Answers: 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...

«1

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

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

    Kevin

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    I do love position: sticky :).

    Allan

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 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: 20,139Questions: 26Answers: 4,734
    edited January 2019

    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: 228Questions: 37Answers: 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: 61,431Questions: 1Answers: 10,048 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: 228Questions: 37Answers: 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: 20,139Questions: 26Answers: 4,734

    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: 228Questions: 37Answers: 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: 20,139Questions: 26Answers: 4,734

    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: 20,139Questions: 26Answers: 4,734

    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: 228Questions: 37Answers: 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: 228Questions: 37Answers: 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: 61,431Questions: 1Answers: 10,048 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: 228Questions: 37Answers: 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: 228Questions: 37Answers: 1

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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 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: 228Questions: 37Answers: 1
    edited January 2019

    Should have been...

    <div class='table-responsive'>
    

    Any ideas?

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Ok. Let's see what I can do to get a link for you to examine.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Also another question. Is it possible to make the buttons responsive? They aren't at the moment.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    I almost have this working. My only problem now is that the table header doesn't stay fixed. Below is an example. I'm trying to get the menu, buttons, filter, pagination and table header to stick to the top when scrolling.

    live.datatables.net/huqaqopi/1/edit?html,css,js,output

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    You will need to use the headerOffset option:
    https://datatables.net/extensions/fixedheader/examples/options/offset.html

    Also the info and page length elements aren't fixed but that is due to them not being in the dom_wrapper div. I updated your example to have the info and page length fixed. Also set the opacity of that div to 50% so you can see what is happening. You will see the header is fixed at essentially the height of the dom_wrapper div. You can uncomment and mess around with the headerOffset value. The height likely will be variable.

    Kevin

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1
    edited January 2019

    Thank you Kevin. I tried the headerOffset and that works. As for the info and page length I am having trouble with the spacing of the elements. For instance if I do Bilf the info text is right up to the buttons and the page length is butted right up to the search filter. Is there something like padding I can do to put some space between elements?
    Also can the buttons be reponsive?
    The position sticky works fine in Firefox and Chrome but IE11 doesn't seem to respond to the position style. More research I'll have to do since all the users are using IE11. :'(

    You mention you fixed the info and page length for the dom_wrapper. Was there a link?

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    Sorry here is the link:
    http://live.datatables.net/qopifotu/1/edit

    According to these pages it seems position: sticky is not supported with IE:
    https://css-tricks.com/position-sticky-2/
    https://www.w3schools.com/howto/howto_css_sticky_element.asp

    The other questions I'm not sure about.

    Kevin

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Thanks again Kevin. Yeah I found the same info about IE. But position fixed works. I changed to position fixed for the menu and the dom_wrapper. Only problem is my table is now at the top and a few rows are hidden behind the menu and buttons.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    I made some changes to your dom option to look more like the BS4 example. It helped some.
    http://live.datatables.net/vicoxaxo/1/edit

    Also updated the example to use the BS 4 integration files. Didn't seem to make any changes with regards to sticky header.

    Kevin

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Thanks Kevin. I have it working in IE, Firefox, Safari and Chrome so far with the Position Fixed. I added another table with a height style just before the datatable table and now I can see all the rows. There is probably a more elegant way to do this but for now it works.
    Now if I could only get the buttons and other elements be responsive it would be perfect.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    I want to thank you Kevin and Allan for all your help and patience. I am learning alot from the both of you. :)

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    Glad to be of help!

    Kevin

This discussion has been closed.