19

I have a table like the following Table

the table as rowspans because for some users I need to have 2 lines (Like you see at column 'D')

I am trying to use datatables:

<table class="table table-bordered table-hover table-striped" id="myTable">
(...)
</table>

And I call this at the begining of the code:

 <script>
    $( document ).ready(function() {
         $('#myTable').DataTable();
    });
</script>

But I have this error:

TypeError: i is undefined

And the table is not like a datatable type!

Maybe it doesn't work with rowspans? Any idea??

6
  • Could you tell us more about where the TypeError appears? Are you sure it is your code or is the plugin erroring out? Where does i appear? Nov 23, 2016 at 15:08
  • Can you post the html for the table, and what version of jquery and datatables are you using?
    – Clyde Lobo
    Nov 23, 2016 at 15:11
  • 1
    datatables does not support rowspan and colspan. datatables.net/forums/discussion/31366/…
    – Dan Wilson
    Nov 23, 2016 at 15:17
  • hmm This was my fear @DanWilson. So I need to re-think my problem and discard datatables.
    – Erbi Silva
    Nov 23, 2016 at 17:05
  • 1
    You can use hack like this to achieve colspan : Hack for colspan in datatable Jun 17, 2018 at 13:53

6 Answers 6

17

FWIW you can also get this error if you don't have the same number of <td></td> elements in every row. Make sure you aren't adding any rows with nav buttons or links or anything like that that may not be formatted the same way as the other rows.

7

jQuery DataTables plug-in doesn't support ROWSPAN attribute by default. However there is a RowsGroup plugin for jQuery DataTables that groups cells together to make them look like as if ROWSPAN attribute is used.

See this example for code and demonstration.

See jQuery DataTables – ROWSPAN in table body TBODY for more details.

3

For future referer.

It is because you are using Rowspan or colspan which is not supportable.

If you want to use colspan you can use it outside </tbody>.

Thanks.

0
3

This problem happens if your table is not well formed, for example you should have <table> <thead> <th> <tbody> <tr> <td>

And then the id of the table should not overlap with id of any thing else on the same page. Other wise you will get errors like i is udefined or c is undefined.

2

I'd say your table is not a data table because you have undefined data and the 'i' referred to is the internal iterator of the DataTable loop, the use of rowspans is the problem - I would redesign your table to have an entire row for each piece of data (in your example 250 would require an entire row with duplicate values for all other columns except D) - it is wholly possible to use css to hide values that are duplicated for the same visual effect, this would allow datatable filtering to still work on those rows (although you may need some hooks to reveal hidden data when these 'extra' rows are filtered).

1
  • Your comment I believes comes closest to addressing the fundamental cause. My experience which led me here was due to some initialisation columnDefs that used a wrong column index which was greater than the number of columns in the table. Fair to say that dataTables may encounter this error whenever you reference a nonexistent cell, column or row.
    – nucc1
    Sep 3, 2018 at 9:52
2

I was facing the same issue. The main reason for the error is due to using the colspan & rowspan. Because the jQuery DataTables plug-in does not support them and hence causing the error.

TypeError: i is undefined

So, If you are using any colspan or rowspan within any <tr></tr> inside the <tbody></tbody> then make sure that each <tr></tr> having the same no of <td></td> for each row. If not, then repeat the <td style='display:none'></td> to match the same no e.g

<table border='1' cellspacing='2'>
   <thead>
      <tr>
         <td>A</td>
         <td>B</td>
         <td>C</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td rowspan="2">1</td>
         <td rowspan="2">name</td>
         <td>200</td>
         <td style='display:none'></td>
         <td style='display:none'></td>
      </tr>
      <tr>
         <td >300</td>
         <td style='display:none'></td>
         <td style='display:none'></td>
      </tr>
   </tbody>
</table>

I think by following the above suggestion will help you sure.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.