Search and Sort on columns (td) with select element inside
Search and Sort on columns (td) with select element inside
I'm wondering if is possible to make the plugin works on td with select elements inside. Actually if I have a textarea or a simple input text, it works nicely but it does not work on select/option element, I can't search or order those particular columns. Can someone help me achieve this?
$(document).ready(function () {
$('#myGridView').DataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 50
});
});
This snippet works fine but only only on those td without select elements like this one:
<td>
<textarea name="txtDocComments" rows="2" cols="20" id="txtDocComments" class="clsdoccomment" style="overflow:auto;">Test....test...</textarea>
</td>
but if td looks like this one, never works:
<td>
<select name="AnswerOption" id="rbAnswerOption" class="clsdocansweroption" repeatdirection="Horizontal">
<option value="0">Select</option>
<option selected="selected" value="1">Yes</option>
<option value="2">No</option>
<option value="3">N/A</option>
</select>
</td>
Answers
This was a tough one, at least for me
I was able to workout one of of doing this. However someone with more Javascript experience may be able to provide a better option. Here is the example:
http://live.datatables.net/nehozara/1/edit
What I found is that with
columns.render
there is no access to the HTML table's cells so getting theselected
option is not possible. To workaround this I updated the cell's HTML by moving theselected="selected"
attribute to the selected option. Then I update the Datatables cell with the updated HTML and force a table redraw viacell().invalidate()
. Duringcolumns.render
Datatables has the updated HTML in thedata
parameter and jQuery can get the selected option from this.Hope this helps you get started.
Kevin