Rectangle 27 54

It's important that your THEAD not be empty in table.As dataTable requires you to specify the number of columns of the expected data . As per your data it should be

<table id="datatable">
    <thead>
        <tr>
            <th>Subscriber ID</th>
            <th>Install Location</th>
            <th>Subscriber Name</th>
            <th>some data</th>
        </tr>
    </thead>
</table>

What if I have a requirement that involves configuring columns and the number of said columns at Runtime? How can I implement code for the aforementioned requirement?

This helped me to cure my problem of data not printed. Well it also helped me to cure one more problem of mine for datatable where i wrote "Sort":false, then it was able to view the list in descending order that came from controller as Model.OrderByDescending(x=>x.Action==0).ThenBy(x=>x.Action).

javascript - JQuery Datatables : Cannot read property 'aDataSort' of u...

javascript jquery jquery-datatables
Rectangle 27 43

The problem is that the number of <th> tags need to match the number of columns in the configuration (the array with the key "columns"). If there are fewer <th> tags than columns specified, you get this slightly cryptical error message.

(the correct answer is already present as a comment but I'm repeating it as an answer so it's easier to find - I didn't see the comments)

javascript - DataTables: Cannot read property style of undefined - Sta...

javascript jquery node.js datatables
Rectangle 27 1

You said any suggestions wold be helpful, so currently I resolved my DataTables "cannot read property 'style' of undefined" problem but my problem was basically using wrong indexes at data table initiation phase's columnDefs section. I got 9 columns and the indexes are 0, 1, 2, .. , 8 but I was using indexes for 9 and 10 so after fixing the wrong index issue the fault has disappeared. I hope this helps.

In short, you got to watch your columns amount and indexes if consistent everywhere.

jQuery('#table').DataTable({
        "ajax": {
            url: "something_url",
            type: 'POST'
        },
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "columns": [
            { "data": "cl1" },
            { "data": "cl2" },
            { "data": "cl3" },
            { "data": "cl4" },
            { "data": "cl5" },
            { "data": "cl6" },
            { "data": "cl7" },
            { "data": "cl8" },
            { "data": "cl9" }
        ],
        columnDefs: [
            { orderable: false, targets: [ 5, 7, 8 ] } //This part is ok now
        ]
    });

javascript - DataTables: Cannot read property style of undefined - Sta...

javascript jquery node.js datatables
Rectangle 27 8

Also had this issue, This array was out of range:

order: [1, 'asc'],

This one always gets me. Is there a way to default the array to 0, if the array is out of range?

@JGreasley You can set it as an empty array: order: []

javascript - JQuery Datatables : Cannot read property 'aDataSort' of u...

javascript jquery jquery-datatables
Rectangle 27 13

You are trying to initialize multiple table with the same options, the most important one is aoColumns, array holding column definitions. Your aoColumns array holds 3 items only, however the number of columns differ in each tables, that is why you receive an error.

aoColumns: If specified, then the length of this array must be equal to the number of columns in the original HTML table. Use 'null' where you wish to use only the default values and automatically detected options.

You need to assign unique id to the first table and initialize each table separately as shown below.

$(document).ready(function() {
   $('#table_first').dataTable( {
       'bSort': false,
       'aoColumns': [
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
       ],
       "scrollY":        "200px",
       "scrollCollapse": false,
       "info":           true,
       "paging":         true
   });

    $('#p_history').dataTable( {
       'bSort': false,
       'aoColumns': [
             { sWidth: "45%", bSearchable: false, bSortable: false },
             { sWidth: "45%", bSearchable: false, bSortable: false },
             { sWidth: "10%", bSearchable: false, bSortable: false }
       ],
       "scrollY":        "200px",
       "scrollCollapse": false,
       "info":           true,
       "paging":         true
   } );

} );
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>

<table class="table table-striped table-bordered datatable" id="table_first">
    <thead>
        <tr>
            <th>  Issue      </th>
            <th>  Product      </th>
            <th>  Qty      </th>
            <th class="text-right"> Paid    </th>
            <th class="text-right"> Balance    </th>
            <th class="text-right"> Total    </th>
        </tr>   
    </thead><!-- table head -->
    <tbody>
        <tr>
            <td>May 20, 2015</a></td>
            <td>Normal Sim</td>
            <td>1000</td>
            <td><span class="pull-right">Rs18,893.00 </span></td>
            <td><span class="pull-right">Rs131,107.00 </span></td>
            <td><span class="pull-right">Rs150,000.00 </span></td>
        </tr>
        <tr>
            <td>voice/7?invoice_type=1">May 20, 2015</a></td>
            <td>Nokia 3310 </td>
            <td>10000</td>
            <td><span class="pull-right">Rs2,520,000.00 </span></td>
            <td><span class="pull-right">Rs12,480,000.00 </span></td>
            <td><span class="pull-right">Rs15,000,000.00 </span></td>
        </tr>
        <tr>
            <td>May 20, 2015</a></td>
            <td>Nokia 3310 </td>
            <td>1000</td>
            <td><span class="pull-right">Rs404,000.00 </span></td>
            <td><span class="pull-right">Rs1,096,000.00 </span></td>
            <td><span class="pull-right">Rs1,500,000.00 </span></td>
        </tr>
    </tbody>
</table>

<table class="table table-striped table-bordered datatable" id="p_history">
    <thead>
        <tr>
            <th>Issue</th>
            <th>Paid</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 15,000.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 12.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 123.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 123.00 </td>
            <td></td>
        </tr>
    </tbody>
</table>

javascript - Uncaught TypeError: Cannot read property 'mData' of undef...

javascript php jquery jquery-datatables
Rectangle 27 2

i have also this problem ,the following changes solved my problem .

$(document).ready(function() {
     $('.datatable').dataTable( {
            bSort: false,
            aoColumns: [ { sWidth: "45%" }, { sWidth: "45%" }, { sWidth: "10%", bSearchable: false, bSortable: false } ],
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true
    } );
} );

the aoColumns array describes the width of each column and its sortable properties.

javascript - JQuery Datatables : Cannot read property 'aDataSort' of u...

javascript jquery jquery-datatables
Rectangle 27 2

I got a solution for the above issue.

Before creating a new data table, I removed it's container div and created a new one. It helps to remove the previously created data tables and it's related html tags of same signature.

I think this would be the reason for that error....

javascript - Cannot read property 'mData' of undefined in jquery datat...

javascript jquery datatables
Rectangle 27 2

Your initialization code is correct. I suspect you're using newer DataTables 1.10.x library (by presence of autoWidth option).

Error Cannot read property 'fnGetData' of undefined can occur when you're trying to call older version (1.9.x) method fnGetData() on API instance of newer 1.10.x version of DataTables, for example:

var data = $('#example').DataTables().fnGetData();
fnGetData()
var data = $('#example').dataTable().fnGetData();

javascript - Datatables Cannot read property 'fnGetData' of undefined ...

javascript jquery datatables jquery-datatables
Rectangle 27 2

response[i]
response[i][j]
undefined
null

If so, replace them with "".

javascript - DataTables: Cannot read property style of undefined - Sta...

javascript jquery node.js datatables
Rectangle 27 2

You need to initialize your table as $("#logTable").dataTable() with lower case d to get access to previous version API or with $("#logTable").DataTable() with upper case D to get access to newer API.

Initialize your table using DataTable() not dataTable() as shown below:

Alternatively, if you need to have access to older API and initialize with dataTable(), you can call newer API methods as shown below:

var table = $('table.container-fluid').dataTable({
    // ... skipped ...
});

table.api().ajax.url(newURL).load();

Hey, thanks for the reply, but that did not help. I am still getting the same error.

@davidnoronha, You have another error in your code, there is no reload() method, use ajax.reload() instead.

alright, will check the following API issue

@davidnoronha, there is no need for ajax.reload at all, since you are using ajax.url().load() which is the same thing in your case.

@davidnoronha, this is unrelated but you also have server-side processing enabled with serverSide: true. In this mode sorting, searching and ordering should be performed on the server. Is this what you're doing?

javascript - Uncaught TypeError: Cannot read property 'url' of undefin...

javascript jquery ajax datatables
Rectangle 27 1

It can also happen when drawing a new (other) table. I solved this by first removing the previous table:

$("#prod_tabel_ph").remove();

javascript - DataTables: Cannot read property style of undefined - Sta...

javascript jquery node.js datatables
Rectangle 27 2

$(document).ready(function() {
        $('#tblEmployee').DataTable({
            "sAjaxSource": '/Employee/GetEmployees',
            "sAjaxDataProp": "",
            "aoColumns": [
                 { "mDataProp": "sEmpName" },
                 { "mDataProp": "sGender" }
            ]
        });
    });

It works as well. Thank you.. :)

javascript - jquery.dataTables.min.js:48 Uncaught TypeError: Cannot re...

javascript jquery ajax asp.net-mvc datatables
Rectangle 27 1

Unable to get property 'length' of undefined or null reference
Cannot read property 'length' of undefined

Use ajax.dataSrc option to specify data property (account) in your Ajax response containing the data.

Your code was also missing proper columns.data options.

Change your initialization options as follows:

$('#resultDiv1').dataTable({
    // ... skipped other options ...
    "ajax": {
       "url": url,
       "dataSrc": "account"
    },
    "columns": [
        {"data": "id"},
        {"data": "rel"},
        {"data": "fin"},
        {"data": "date"}
    ]
});

javascript - jQuery DataTables: Uncaught TypeError: Cannot read proper...

javascript jquery jquery-plugins datatables
Rectangle 27 1

you can see oSettings.sAjaxDataProp = "aaData" in the watch window, so you should be looking for an Object named "aaData" to iterate through. But you are using "aData" which is by default undefined.

It's those subtle differences that'll get you every time! :-)

javascript - jQuery Datatable Uncaught TypeError: Cannot read property...

javascript jquery json datatables
Rectangle 27 0

Your "sAjaxDataProp" : "" is set to an empty string, which causes this error.

dataTables expects to have a string here to tell under which key your server returned data can be found. This defaults to aaData, so your json should include this key amongst all others that might be returned or needed by pagination etc.

Now the values are in myData. so you need to tell dataTables where to find the actual data by setting:

javascript - DataTables Cannot read property 'length' of undefined - S...

javascript jquery asp.net datatables jquery-datatables
Rectangle 27 0

Do you have a URL that you can post so that we can take a look?

Cannot read propertyparentNodeof undefined is a javascript error that happens because you are trying to get the parentNode of something that doesn't exist.

The other error seems quite obvious? The number of TD elements in a TR is not in line with the rest of the table. Look at the HTML and check if the number of TD & TH elements in the THEAD, TFOOT and TBODY are all the same count. "DataTables does not support rowspan / colspan in the table body"

Please post a URL or HTML/JS snippet of the table, preferrably on http://www.jsfiddle.net

I can't give a URL to the actual site as it is a private website, and it would be hard to show you anything via jsfiddle as it is using PHP as well.

Your output is HTML.. Copy that into jsfiddle. The PHP code here is not important. Just copy the HTML of the table into JS fiddle and the javascript code that you use to build the table.

But, the table contains sensitive data. Would only trying to give part of it in jsfiddle work, or do you need the whole thing?

Can you not take out the sensitive data? Make the table only 10 rows long, or 5. Doesn't have to be big. Just need to see the structure. And your javascript that initializes the table

Here is the jsfiddle for the html. I have to still do some exploring to find exactly which part of the Javascript is used: jsfiddle.net/SSR2u

php - Datatables: Uncaught TypeError: Cannot read property 'parentNode...

php javascript jquery console datatables
Rectangle 27 0

dataTables does not accept colspans in <tbody>. Place the last row (the row with links) in a <tfoot> instead :

<tfoot>
    <tr class="control">
        <td colspan="2"><a href="#">Show details</a></td>
        <td colspan="2"><a href="#">Hide details</a></td>
    </tr>
</tfoot>

javascript - Uncaught TypeError: Cannot read property 'className' of u...

javascript jquery jquery-plugins datatables jquery-datatables
Rectangle 27 0

You are mixing old legacy datatables api with new version of datatables.

I didn't manage to use "Demo PLNKR" example due to cross domain policy of that JSON data source :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://itunes.apple.com/search?term=apple&_=1421706895095. This can be fixed by moving the resource to the same domain or enabling CORS.

sAjaxSource
ajax
aoColumns
columns
mData
data

Take care of JSON format Ajax response that you are getting, map that properly with data column field example. If you are using itunes result it will be something like this :

"ajax": {
    "url" : "https://itunes.apple.com/search?term=apple",
    "dataSrc" : "results"
},
"columns": [
 {"data": "artistName"},
 {"data": "collectionName"},
 {"data": "trackName"},
 {"data": "collectionCensoredName"},
 {"data": "trackCensoredName"},
 {"data": "artistViewUrl"},
 ...
]

What exactly I have to Change and where?

javascript - DataTables - _fnAjaxDataSrc - Cannot read property 'lengt...

javascript jquery jquery-plugins datatables
Rectangle 27 0

The solution is pretty simple.

<table id="TASK_LIST_GRID" class="table table-striped table-bordered table-hover dataTable no-footer" width="100%" role="grid" aria-describedby="TASK_LIST_GRID_info">
  <thead>
    <tr role="row">
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Solution</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Status</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Category</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Type</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Due Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Create Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Owner</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Comments</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Mnemonic</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Domain</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Approve</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Dismiss</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
                    data : response,
                    columns : columns.AdoptionTaskInfo.columns,
                    paging: true
                });
                
                //Note: columns : columns.AdoptionTaskInfo.columns has at least a column not definded in the <thead>

Note: columns : columns.AdoptionTaskInfo.columns has at least a column not defined in the table head

javascript - DataTables: Cannot read property style of undefined - Sta...

javascript jquery node.js datatables
Rectangle 27 0

Your "sAjaxDataProp" : "" is set to an empty string, which causes this error.

dataTables expects to have a string here to tell under which key your server returned data can be found. This defaults to aaData, so your json should include this key amongst all others that might be returned or needed by pagination etc.

{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"myData": [
    [
        "1",
        "sameek",
        "sam",
        "sam",
        "sameek@test.com",
        "1",
        ""
    ],

Now the values are in myData. so you need to tell dataTables where to find the actual data by setting:

"sAjaxDataProp" : "myData"

javascript - DataTables Cannot read property 'length' of undefined - S...

javascript jquery asp.net datatables jquery-datatables