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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.