Cannot Read Property 'mdata' of Undefined Datatable

Questions:

I have a issue with Datatables. I also went through this link which didnt yield me whatsoever event.I accept inlcuded all the prerequisites where am parsing data directly into the DOM. Kindly assistance me to fix this issue.

Script

          $(document).ready(function() {   $('.viewCentricPage .teamCentric').dataTable({     "bJQueryUI": true,     "sPaginationType": "full_numbers",     "bPaginate": fake,     "bFilter": true,     "bSort": true,     "aaSorting": [       [ane, "asc"]     ],     "aoColumnDefs": [{       "bSortable": simulated,       "aTargets": [0]     }, {       "bSortable": true,       "aTargets": [1]     }, {       "bSortable": false,       "aTargets": [2]     }],   }); });                  

Answers:

FYI dataTables requires a well formed table. Information technology must comprise <thead> and <tbody> tags, otherwise it throws this mistake. Also cheque to make sure all your rows including header row take the same number of columns.

The post-obit will throw error (no <thead> and <tbody> tags)

            <table id="sample-table">     <tr>         <th>title-one</thursday>         <thursday>title-2</th>     </tr>     <tr>         <td>data-1</td>         <td>data-2</td>     </tr> </table>                      

The following will also throw an mistake (diff number of columns)

            <table id="sample-table">     <thead>         <tr>             <th>championship-one</thursday>             <th>championship-2</th>         </tr>     </thead>     <tbody>         <tr>             <td>data-i</td>             <td>data-ii</td>             <td>information-3</td>         </tr>     </tbody> </table>                      

For more than info read more here

Questions:

Answers:

A common crusade for Cannot read holding 'fnSetData' of undefined is the mismatched number of columns, like in this erroneous code:

            <thead>                 <!-- thead required -->     <tr>                <!-- tr required -->         <thursday>Rep</thursday>    <!-- td instead of th will too piece of work -->         <thursday>Titel</th>                         <!-- th missing hither -->     </tr> </thead> <tbody>     <tr>         <td>Rep</td>         <td>Titel</td>         <td>Missing corresponding th</td>     </tr> </tbody>                      

While the post-obit code with 1 <th> per <td> (number of columns must match) works:

            <thead>     <tr>         <th>Rep</th>       <!-- 1st column -->         <th>Titel</th>     <!-- 2nd column -->         <th>Added th</thursday>  <!-- 3rd cavalcade; th added here -->     </tr> </thead> <tbody>     <tr>         <td>Rep</td>             <!-- 1st column -->         <td>Titel</td>           <!-- 2d cavalcade -->         <td>thursday now nowadays</td>  <!-- third column -->     </tr> </tbody>                      

The error also appears when using a well-formed thead with a colspan simply without a second row.

For a table with 7 colums, the following does non work and we see "Cannot read holding 'mData' of undefined" in the javascript console:

            <thead>     <tr>         <th>Rep</th>         <th>Titel</th>         <th colspan="v">Download</th>     </tr> </thead>                      

While this works:

            <thead>     <tr>         <th rowspan="2">Rep</th>         <thursday rowspan="2">Titel</th>         <thursday colspan="v">Download</th>     </tr>     <tr>         <th>pdf</th>         <th>nwc</thursday>         <th>nwctxt</th>         <th>mid</th>         <th>xml</thursday>     </tr> </thead>                      

Questions:

Answers:

I had this same problem using DOM data in a Rails view created via the scaffold generator. By default the view omits th elements for the last 3 columns (which contain links to show, hibernate, and destroy records). I found that if I added in titles for those columns in a th element inside the thead that information technology fixed the problem.

I tin can't say if this is the aforementioned problem you're having since I can't see your html. If it is not the aforementioned problem, you tin apply the chrome debugger to figure out which cavalcade it is erroring out on by clicking on the error in the console (which will accept you to the code it is declining on), then adding a conditional breakpoint (col==undefined). When it stops you lot can cheque the variable i to encounter which column it is currently on which tin can help you figure out what is different most that column from the others. Hope that helps!

Questions:

Answers:

This tin besides occur if you accept table arguments for things similar 'aoColumns':[..] which don't lucifer the correct number of columns. Problems similar this can ordinarily occur when re-create pasting lawmaking from other pages to quick offset your datatables integration.

Example:

This won't piece of work:

            <table id="dtable">     <thead>         <tr>             <th>col 1</th>             <th>col 2</th>         </tr>     </thead>     <tbody>         <td>data 1</td>         <td>information ii</td>     </tbody> </tabular array> <script>         var dTable = $('#dtable');         dTable.DataTable({             'society': [[ 1, 'desc' ]],             'aoColumns': [                 null,                 null,                 nada,                 null,                 null,                 null,                 {                     'bSortable': false                 }             ]         }); </script>                      

But this will piece of work:

            <table id="dtable">     <thead>         <tr>             <th>col ane</thursday>             <th>col 2</th>         </tr>     </thead>     <tbody>         <td>information i</td>         <td>information two</td>     </tbody> </table> <script>         var dTable = $('#dtable');         dTable.DataTable({             'order': [[ 0, 'desc' ]],             'aoColumns': [                 zero,                 {                     'bSortable': false                 }             ]         }); </script>                      

Questions:

Answers:

You have to remove your colspan and the number of thursday and td needs to match.

Questions:

Answers:

in my example this error occured if i use table without header

                          <thead>                    <tr>                        <th>example</th>                   </tr>               </thead>                      

Questions:

Answers:

In my case, and using ASP.Cyberspace GridView, UpdatePanel and with DropDownList (with Called plugin where I reset value to zero using a Javascript line), I got this mistake and tried everything with no hope for days. The problem was that the code of my dropdown in code behind was as follows and when I select a value twice to apply its action to selected grid rows I get that fault. I thought for days information technology's a Javascript result (again, in my instance) and finally the set up was giving zero for the drowpdown value with the update process:

                          private void ddlTasks_SelectedIndexChanged(object sender, Organization.EventArgs due east)   {      if (ddlTasks.SelectedValue != 0) {         ChangeStatus(ddlTasks.SelectedValue);         ddlTasks.SelectedValue = "0"; //// **This stock-still my effect**      }       dvItemsGrid.DataSource = CreateDatasource();      dvItemsGrid.DataBind();      dvItemsGrid.UseAccessibleHeader = truthful;      dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;    }                      

This was my fault:

                          $('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").called();                      

Questions:

Answers:

I had encountered the aforementioned issue but I was generating table Dynamically. In my case, my table had missing <thead> and <tbody> tags.

here is my lawmaking snippet if it helped somebody

                          //table string    var strDiv = '<tabular array id="tbl" course="striped center responsive-table">';     //add headers    var strTable = ' <thead><tr id="tableHeader"><th>Customer Proper name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organisation</th><thursday>Client Department</thursday><thursday>Customer ContactNo</thursday><th>Client Mobile</th><th>Cluster Name</th><th>Product Name</thursday><thursday> Installed Version</thursday><th>Requirements</th><th>Challenges</th><thursday>Future Expansion</thursday><th>Comments</th></tr> </thead> <tbody>';     //add data   $.each(information, office (cardinal, GetCustomerFeedbackBE) {                             strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';                         });  //add together end of tbody  strTable = strTable + '</tbody></table>';  //insert table into a div                     $('#divCFB_D').html(strDiv);    $('#tbl').html(strTable);       //finally add export buttons     $('#tbl').DataTable({                             dom: 'Bfrtip',                             buttons: [                                 'copy', 'csv', 'excel', 'pdf', 'print'                             ]                         });                      

Questions:

Answers:

In addition to inconsistent and numbers, a missing item inside datatable scripts columns part can crusade this too. Correcting that fixed my datatables search bar.

I'm talking most this office;

            "columns": [   null,   .   .   .   nil            ],                      

I struggled with this fault till I was pointed that this part had ane less "null" than my total thead count.

Questions:

Answers:

I plant some "solution".

This code doesn't work:

            <table> <thead>     <tr>         <th colspan="three">Test</th>     </tr> </thead> <tbody>     <tr>         <td>1</td>         <td>2</td>         <td>3</td>     </tr> </tbody>                      

Merely this is ok:

            <table> <thead>     <tr>         <thursday colspan="2">Test</th>         <th></th>     </tr> </thead> <tbody>     <tr>         <td>1</td>         <td>2</td>         <td>three</td>     </tr> </tbody>                      

I call up, that the problem is, that the last TH can't have aspect colspan.

seaypeturber.blogspot.com

Source: https://exceptionshub.com/datatables-cannot-read-property-mdata-of-undefined.html