jQuery FixedHeader plugin

I am using the DataTables.net jquery plugin and trying to implement "ColVis", "ColReorder" and "FixedHeader" extensions on one table.  The "ColVis" and "ColReorder" seem to work fine but not the "FixedHeader" extension.

Here's the error I get: SCRIPT445: Object doesn't support this action.
 The error points to this line "window.fc = new $.fn.dataTable.FixedColumns( table, {"

Here's the site:  http://isaac.issharepoint.com/ICTT/Shared%20Documents/modalTable.aspx

You should be able to move columns around in any order and be able to show/hide columns by clicking the button.

Here's the code.
<!DOCTYPE html>
 
<link rel="stylesheet" type="text/css" href="/ICTT/SiteAssets/media/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="/ICTT/SiteAssets/ColReorder/css/dataTables.colReorder.min.css" />
<link rel="stylesheet" type="text/css" href="/ICTT/SiteAssets/FixedHeader/css/dataTables.fixedHeader.css" />
<link rel="stylesheet" type="text/css" href="/ICTT/SiteAssets/ColVis/css/dataTables.colVis.css" />
 
<script type="text/javascript" src="/ICTT/SiteAssets/media/js/jquery.js"></script>
<script type="text/javascript" src="/ICTT/SiteAssets/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/ICTT/SiteAssets/ColReorder/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="/ICTT/SiteAssets/ColReorder/js/dataTables.fixedHeader.js"></script>
<script type="text/javascript" src="/ICTT/SiteAssets/ColVis/js/dataTables.colVis.js"></script>
 
<html>
<head>
    <title></title>
 
<script>
    $(document).ready(function(){
        window.table = $('#example').DataTable({       
        "sDom": 'RC<"isaac">lfrtip',
        scrollX: true,
        scrollCollapse: true,
        colReorder: {
            fixedColumnsLeft: 1,
            fixedColumnsRight: 1
        }
        });
 
        window.fc = new $.fn.dataTable.FixedColumns( table, {
            leftColumns: 1,
            rightColumns: 1
        });
        getListItems('/ICTT','IceCreamTrucks','complete', 'failure');
    });
 
 
function getListItems(url, listname, complete, failure) {
 
    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
function complete(data) {
 
var tblData= $('#example').DataTable();
 
for(var i =0; i < data.d.results.length; i++) {
var tblData = $('#example').DataTable();
 
   var rowNode = tblData
    .row.add([ data.d.results[i].Title, data.d.results[i].Town, data.d.results[i].County, data.d.results[i].NumberOfTrucks ]).draw();
}
 
 
$("#dtData").append(tblData);
 
 
 //alert("Completed successfully.");
 }
function failure(data) {
 alert("Operation failed.");
 }
 
}
 
 
</script>
</head>
<body>
 
<input type="button" value="Close" onclick="window.frameElement.cancelPopUp(); return false;" />
<table id="example" class="display nowrap dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
    <thead>
        <tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 137px;">State</th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 215px;">Town</th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 102px;">County</th>
            <th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 42px;">Number of Trucks</th>
        </tr>
    </thead>
    <!-- <tfoot>
        <tr>
            <th rowspan="1" colspan="1">Name</th>
            <th rowspan="1" colspan="1">Position</th>
            <th rowspan="1" colspan="1">Office</th>
            <th class="dt-body-right" rowspan="1" colspan="1">Age</th>
        </tr> -->
    </tfoot>
    <tbody id="dtData">
 
    </tbody>
</table>
 
</body>
 
</html>

Open in new window

LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?
 
Rainer JeschorCommented:
Hi,
sorry it was really late last night (1 AM) so I didn't see the last response.
It took me some time but the answer is really easy: it is just a typo :-)
The function is named FixedHeader (uppercase F).

Please use
new $.fn.dataTable.FixedHeader( table );

Open in new window

and it should work.
HTH
Rainer
0
 
Rainer JeschorCommented:
Hi,
can you please double check the path to the fixedHeader.js file?
I get a 404 - Not found error - perhaps that's the reason of unsupported method.
HTH
Rainer
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Just added the correct path but same error.
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
Rainer JeschorCommented:
Ok,
you are referencing fixedHeader BUT in your code you use fixedColumns function - this is a different script extension.
So either reference the fixedColumns JS OR replace the function with the fixedHeader one.
HTH
Rainer
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Wow.  Good catch!
I made the neccessary changes and now I get "SCRIPT445: Object doesn't support this action"
It points to this line:  new $.fn.dataTable.fixedHeader( table );
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
No worries.  I appreciate the help.

I made the change but the behavior is weird. Check it out.
http://isaac.issharepoint.com/ICTT/Shared%20Documents/modalTable.aspx
0
 
Rainer JeschorCommented:
Hi,
at least I cannot see any error - but the getlistitems call requires authentication - and I have no login/pwd to test.
Sorry.
Rainer
0
 
Rainer JeschorCommented:
If you want to share credentials, you could send me a private message through EE.
I will be offline for the next hours - first cinema visit with the twins  :-)
0
 
Rainer JeschorCommented:
Hi,
thanks for the creds.
Hm, looks OK for me (without knowing all the details). What do you mean with weird behavior?
In which client browser / OS?
I just get a JavaScript error in regards to the function MoveSiteTitle - but if I can remember that is not a critical error.
Thanks.
Rainer
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
The behavior is different than what's on the site

As you will see, as you scroll the header stays fixed at the top and you don't see duplicates.

https://datatables.net/extensions/fixedheader/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.