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

th3t1ck · January 2019

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...

kthorngren · January 2019

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

Kevin

allan · January 2019

I do love position: sticky .

Allan

th3t1ck · January 2019

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.

kthorngren · 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

th3t1ck · January 2019

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.?

allan · January 2019

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

th3t1ck · January 2019

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>

kthorngren · January 2019

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

th3t1ck · January 2019

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

kthorngren · January 2019

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

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

kthorngren · January 2019

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

th3t1ck · January 2019

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

th3t1ck · January 2019

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

allan · January 2019

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

jQuery isn't being included on the page, so the console is showing an error about that.
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.
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

th3t1ck · January 2019

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>

th3t1ck · January 2019

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

th3t1ck · January 2019

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?

th3t1ck · January 2019

Should have been...

<div class='table-responsive'>

Any ideas?

allan · January 2019

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

th3t1ck · January 2019

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

th3t1ck · January 2019

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

th3t1ck · January 2019

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

kthorngren · January 2019

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

th3t1ck · 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?

kthorngren · January 2019

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

th3t1ck · January 2019

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.

kthorngren · January 2019

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

th3t1ck · January 2019

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.

th3t1ck · January 2019

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

kthorngren · January 2019

Glad to be of help!

Kevin

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?

Answers

Howdy, Stranger!

Categories

DataTables

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?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables