I've been working with dataTables for a short period of time and I have a DataTable with two columns:

TableVehUsage = $("#TableVehUsage ").DataTable({
    data: [],
    ordering: true,
    paginate: false,
    "info": false,
    fixedHeader: {header: true},
    columns: [
        { data: "Vehicle", title: "Vehicle" },
        { data: "Serial", title: "Serial" }
    ],
    "columnDefs": [
        {
            "targets": 0,
            "render": function (data, type, full, meta) {
                // If it is rendering the cell contents
                if (type === 'display') {
                    switch (data) {
                        case "-":
                            return "-";
                        default:
                            if (full.IsOnSale == true)
                                return '<span style="color:red" onclick="ToParentTab(' + full.Id + ')">' + data + '</span>';
                            else
                                return '<span onclick="ToParentTab(' + full.Id + ')">' + data + '</span>';
                    }
                }
                return (isNaN(data)) ? -1 : +data;
            }
        } }]
});

I have some situation when all the data don't fit in the page and the user needs to scroll down to see all the info. I've tried to use Fixed Header by adding to my javascript the line fixedHeader: {header: true} and in the html:

<script src=".1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href=".1.2/css/fixedHeader.dataTables.min.css">

But is not working for me :(

What am I doing wrong?

I've been working with dataTables for a short period of time and I have a DataTable with two columns:

TableVehUsage = $("#TableVehUsage ").DataTable({
    data: [],
    ordering: true,
    paginate: false,
    "info": false,
    fixedHeader: {header: true},
    columns: [
        { data: "Vehicle", title: "Vehicle" },
        { data: "Serial", title: "Serial" }
    ],
    "columnDefs": [
        {
            "targets": 0,
            "render": function (data, type, full, meta) {
                // If it is rendering the cell contents
                if (type === 'display') {
                    switch (data) {
                        case "-":
                            return "-";
                        default:
                            if (full.IsOnSale == true)
                                return '<span style="color:red" onclick="ToParentTab(' + full.Id + ')">' + data + '</span>';
                            else
                                return '<span onclick="ToParentTab(' + full.Id + ')">' + data + '</span>';
                    }
                }
                return (isNaN(data)) ? -1 : +data;
            }
        } }]
});

I have some situation when all the data don't fit in the page and the user needs to scroll down to see all the info. I've tried to use Fixed Header by adding to my javascript the line fixedHeader: {header: true} and in the html:

<script src="https://cdn.datatables/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">

But is not working for me :(

What am I doing wrong?

• javascript
• html
• datatable

4 Answers 4

I found a DataTable plugin that may be of help. Information on it is located at https://datatables/extensions/scroller/

Using this, my definition looks like this:

  var table1 = $('#example').DataTable({ paging: true,   
      scrollY:        200,
      deferRender:    true,
      scroller:       true });

I made a jsFiddle at https://jsfiddle/bindrid/oywvh1ek/6/

Try adding your data in a different variable with only the 'value' part of the key-value pair in it. For example, in the case of {"vehicle":"Audi"}, your 'data' variable should have only ["Audi"] in it.

The below code worked perfectly for me.

         $("<your_table_name>").DataTable({
                data:data,
                fixedHeader:true,
                "scrollX": true,
                "scrollY": "200px",
                "scrollCollapse": true,
                columns: [
                        { title: 'Vehicle' },
                        { title: 'Serial' }
                    ]
            });

I had a problem where my fixedHeader was working until I got about halfway down the page, then it disappeared. Here is what I did to get it working:

At the top of my JS file:

$(document).ready(function () {
    DrawDataTable();

    //This enables the table header to stick to the top of the page when the user is scrolling
    var employeeData = $('#employee-table').DataTable();
    employeeData.fixedHeader.adjust();
});

Then in the same JS file, in my jQuery ajax call, I had to add the line of code that says "fixedHeader": true

Finally, in my HTML file, I had to include the following in my <head> section:

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables/v/dt/dt-1.12.1/fh-3.2.4/r-2.3.0/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables/v/dt/dt-1.12.1/fh-3.2.4/r-2.3.0/datatables.min.js"></script>

Do not forget that you will also need to include whatever Bootstrap, JavaScript or jQuery scripts or style sheets in the head as well.

If you have a navbar it may be covering the fixed header try doing this:

fixedHeader: {
                header: true,
                headerOffset: $('.app-header').outerHeight() //your header id or class name
            },