CODEWITHSUNDEEP
javascriptjquerydatatables
Crash
Crash

Reputation: 219

Trouble with DataTables

I am having trouble using the jQuery library DataTables. I have followed their documentation, and have run into an odd problem. To begin with, I was trying to use the FixedColumn feature, but even the example that they offer doesn't run (at least not the one in the jsBin setup linked from http://datatables.net/extras/fixedcolumns/#). My primary concern, though, is that I am unable to get any functionality at all from DataTables. I have created a simplified version of the site I am trying to work on just to locate the problem, and the simplified code works in jsBin (to an extent) but not at all on my own system. The simplified code is included below. Does anyone know what might be causing this problem?

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script>
    $(document).ready(function () {
        var travelTableScroll = $('#travelTable').dataTable();

        new FixedColumns(travelTableScroll);
    });
    </script>
</head>

<body>
    <table id="travelTable" class="display">
        <thead>
            <tr>
                <th>Employee</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
                <th>April</th>
                <th>May</th>
                <th>June</th>
                <th>July</th>
                <th>August</th>
                <th>September</th>
                <th>October</th>
                <th>November</th>
                <th>December</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
                <th>April</th>
                <th>May</th>
                <th>June</th>
                <th>July</th>
                <th>August</th>
                <th>September</th>
                <th>October</th>
                <th>November</th>
                <th>December</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

UPDATE: Well, I have tried adding the proper number of cells to each row, as suggested below. Also, I included the link to FixedColumns (I had assumed that it was a part of DataTables and didn't need to be included separately, but I guess not). However, I am still not getting any functionality. I'm not sure if it's the same problem or not (I had somehow forgotten about the existence of console output over the past year- I've been away from web design for a long time), but now I am getting the error TypeError: $(...).dataTable is not a function. I have done some looking on Google, and the possible causes seem to be that either DataTables is not loaded or that jQuery has been loaded twice. I can't figure out where the issue is coming from, but the only link / script lines before the one in question are as follows:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>

FINAL Update: I found the source of this last problem- turns out that, since I am using a .NET framework from the dreaded Microsoft's Visual Studio editor, I hadn't seen the layout file fully, and there was a line in there that imported some other version of jQuery. Apparently that was the issue, because once I removed it the tables began rendering properly. Thanks for all the help!

Upvotes: 4

Views: 3488

Answers (4)

davidkonrad
davidkonrad

Reputation: 85588

First, the number of <td>'s inside <tbody> must match the number of <th>'s inside <thead> exactly. You have a lot of rows with only one column. DataTables will fail its initialization (as you can see in the console) Thats why you are unable to get any functionality at all from DataTables.

To create test rows in an easy way, use a function like this before initializing dataTables

function getTestRow() {
    var testRow = '';
    for (var i=0;i<$('#travelTable th').length;i++) {
        var rand = Math.floor((Math.random()*100)+1);
        testRow+='<td>col '+rand+'</td>';
    }
    testRow='<tr>'+testRow+'</tr>';
    return testRow;
}

//$(document).ready(function () { ..
for (var i=0;i<100;i++) {
    $('#travelTable tbody').append(getTestRow());
}

Now the DataTable will initialize correct.

Second, in order to use FixedColumns, you must at least include FixedColumns to your sourcecode :-)

<script type="text/javascript" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>

Of course, with link to your local version of datatables. There is a bug in FixedColumns at line 99, "bOldIE": ($.browser.msie ... outcomment that line. I guess that is why the jsbin example doesnt work either (FixedColumns is not defined)

Using FixedColumns :

var travelTableScroll = $('#travelTable').dataTable({
    sScrollX: "100%",
    sScrollXInner: "150%"
});
new FixedColumns(travelTableScroll);

Working version of your code above :

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>
<script>
function getTestRow() {
    var testRow = '';
    for (var i=0;i<$('#travelTable th').length;i++) {
        var rand = Math.floor((Math.random()*100)+1);
        testRow+='<td>col '+rand+'</td>';
    }
    testRow='<tr>'+testRow+'</tr>';
    return testRow;
}

$(document).ready(function () {
    //insert some test rows
    for (var i=0;i<100;i++) {
        $('#travelTable tbody').append(getTestRow());
    }

    //initialize
    var travelTableScroll = $('#travelTable').dataTable({
        sScrollX: "100%",
        sScrollXInner: "150%"
    });
    new FixedColumns(travelTableScroll);
});
</script>
</head>

<body>
    <table id="travelTable" class="display">
        <thead>
            <tr>
                <th>Employee</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
                <th>April</th>
                <th>May</th>
                <th>June</th>
                <th>July</th>
                <th>August</th>
                <th>September</th>
                <th>October</th>
                <th>November</th>
                <th>December</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
                <th>April</th>
                <th>May</th>
                <th>June</th>
                <th>July</th>
                <th>August</th>
                <th>September</th>
                <th>October</th>
                <th>November</th>
                <th>December</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

enter image description here

Upvotes: 2

cuterthanbacon
cuterthanbacon

Reputation: 1

you have initialize with scroll options

eg. "sScrollY": "300px", "sScrollX": "100%", "sScrollXInner": "150%", "bScrollCollapse": true, "bPaginate": false

var oTable = $('#travelTable').dataTable( { "sScrollX": "100%", "sScrollXInner": "110%", "bScrollCollapse": true}); new FixedColumns(oTable); [link]http://jsfiddle.net/kmcadams/bgf8g/ ` You have to include the fixed column extra js script

Upvotes: 0

DarkAjax
DarkAjax

Reputation: 16223

I don't know why the code in DataTables' webiste is like that, but the fixed header is obtained by setting the sScrollY property (usually along with bPaginate):

var oTable = $('#travelTable').dataTable( {
    "sScrollY": "300px",
    "bPaginate": false
} );

Also as Lil Piggy mentions, keep in mind the number of columns on <thead> HAS to match the ones in <tbody>

JSBin DEMO

Upvotes: 0

cuterthanbacon
cuterthanbacon

Reputation: 1

a jsfiddle of this would be great - Shouldnt you initialize with some x and y scrollling options?

eg. "sScrollY": "300px", "sScrollX": "100%", "sScrollXInner": "150%", "bScrollCollapse": true, "bPaginate": false

Upvotes: 0

Related Questions