Uncaught TypeError: Cannot read property 'className' of undefined for datatable

Question

I have the following codes for my table class="table table-striped table-bordered bootstrap-datatable datatable datatable" I would like to use the datatable functionality like the searching, paging etc. Thus I added the datatable in the class list.

I have also included a link to the <script src='js/jquery.dataTables.min.js'></script> But I get this error. Which class name its missing how to add that ? Uncaught TypeError: Cannot read property 'className' of undefined and it points to this lines in the .js file.

(n.className+=" "+m.sClass),k?d._anHidden[g]=null:(d._anHidden[g]=n,n.parentNode.removeChild(n)),m.fnCreatedCell&&m.fnCreatedCell.call(a.oInstance,n,w(a,b,g,"display"),d._aData,b,g)}}if(0!==a.aoRowCreatedCallback.length){b=0;for(c=a.aoData.length;b<c;b++)d=a.aoData[b],C(a,"aoRowCreatedCallback",null,[d.nTr,d._aData,b])}}function K(a,b){return b._DT_RowIndex!==n?b._DT_RowIndex:null}function da(a,b,c){for(var b=L(a,b),d=0,a=a.aoColumns.length;d<a;d++)if(b[d]===c)return d;

Currently this how my table structure looks like

<div class="box-content">
                            <table class="table table-striped table-bordered bootstrap-datatable datatable datatable" style='table-layout: fixed;'>
                          <thead>
                              <tr>
                                  <th style='width: 10%;'>No.</th>
                                  <th style='width: 35%;'>Name</th> 
                                  <th style='width: 25%;'>Contact Number</th>                                
                                  <th style='width: 20%;'>Stats</th>
                              </tr>
                          </thead>  

Answer 1

are you sure the page is loaded with the given classname prior to this script being executed? In other words, try putting this script at the bottom of the page to verify that it's not loading before the DOM does.