We Keep Coding

DataTables individual column search

I'm trying to implement individual column searh, but it seems to not be working.
When i have the fields under eah column which have been created accordinly to the documentation.
$('.table tfoot th').each(function(){
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" name="'+title+'" />' );
});
It will create 3 different fields, for each of my columns, when i type anything on them, a request is triggered to my server, everything is fine.
I was looking into the request header and found out that all sSearch_# were filled, as you can see on the image below.
As you can see, when i typed on the first field (first column) it triggered sSearch_0, sSearch_1 and sSearch_2. It should have triggered just sSearch_0 because i typed on the first column.
I have no idea how to fix this.
updating
<table class="permissions table table-bordered">
<thead>
<th>Path</th>
<th>Group/User</th>
<th>Permission</th>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Path</th>
<th>Group/User</th>
<th>Permission</th>
</tr>
</tfoot>

DataTables: TypeError: i is undefined

I have a table like the following
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??

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.

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.

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.

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.

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).

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.

I want to get the values in header of the table using angular js

I have a html page where i create a table, and in that table i can drag and drop any element. Now i want to add some validation on table based on the values dropped in header. This is my html page.
<div id="table" ng-controller="dictionaryElementsController">
<table>
<thead>
<th>
<div ondrop="angular.element(document.getElementById('table')).scope().drop(event)"
ondragover="angular.element(document.getElementById('table')).scope().allowDrop(event)">
<strong style="color: black;">(I)</strong><enter data>
</div>
</th>
</thead>
</table>
Now is there any way to find out that the value drop is in th, tr or td.? So that i can put validations according to the value dropped in th.

Remove table row that contains a table

I have html that displays a table similar to:
<table>
<tr>
<th>col1</th>
<th>col2</ht>
</tr>
<tr>
<td>0001</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2" id="detailsTable">
<table>
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>xxxxxx</td>
<td>xxxxxxx</td>
</tr>
</table>
</td>
</tr>
There is a column of expand and contract buttons on the outer table so that the nested table is only shown when the user clicks to expand.
The expansion works and the table gets displayed. However when when I try and remove the row from the outer table that contains the child table it doesn't work.
I had code like:
var rowIndex = $(this).parent().parent().prevAll().length;
$("table[id$=gvParentAccounts] tr").eq(rowIndex + 1).remove();
If the row only contains text it works as I'd like and removes the row, however if like in this case the row contains a table it is unable to remove the row as required.
I'm using ASP.Net and jQuery for this.
Thanks
Alan.

How about:
$(this).parent().parent().remove();
I'm not sure if this is exactly what you have, but here's a JSFiddle demonstrating that it works:
http://jsfiddle.net/9TQG9/1/
EDIT: Actually this:
$(this).parents("tr").eq(0).remove();
would be much nicer and more reliable. See here:
http://jsfiddle.net/9TQG9/2/

dynamically close and open table rows

I have a table on my site that contains the options for different products. I didn't put it there, the ecommerce platform did. It lists the options in a row in the table. The table looks like this:
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
<td> </td>
<td><select><option>Sizes here</option></select></td>
</tr>
</tbody>
</table>
</div>
Then if there were another option it would be in an additional row with the same markup.
This renders with the label (size in this case) out in front of the <select> box. I want the label above the <select> box and I figured the easiest way to accomplish this would be to close the <tr> and open a new one. Any ideas on how to do this?
EDIT: I should mention that the ecommerce platform generates the html and I do not have access to the source code

Assuming that it follows that exact structure, try this:
$(".attributes select").each(function(){
$label = $(this).parent().prev().prev();
$label.parent().before("<tr></tr>");
$label.parent().prev().append($label.clone());
$label.remove();
$(this).parent().prev().remove();
});
Here's an example: Demo

Like so?
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
</tr>
<tr>
<td><select><option>Sizes here</option></select></td>
</tr>
</tbody>
</table>
</div>

I think you have to do it in two steps:
remove the elements:
$('.attributes').find('tr:first-child').remove();
$('.attributes').find('tr:first-child').remove();
2.append them back in the same place
$('.attributes').find('tr:first-child').before('<tr><td>Sizes here</td></tr>');