Search and Sort on columns (td) with select element inside

Search and Sort on columns (td) with select element inside

dubvelisdubvelis Posts: 3Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947
    edited February 2018

    This was a tough one, at least for me :smile:

    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 the selected option is not possible. To workaround this I updated the cell's HTML by moving the selected="selected" attribute to the selected option. Then I update the Datatables cell with the updated HTML and force a table redraw via cell().invalidate(). During columns.render Datatables has the updated HTML in the data parameter and jQuery can get the selected option from this.

    Hope this helps you get started.

    Kevin

This discussion has been closed.