I have two header rows in the table with 10+ columns. In the second header row,I have select drop-downs for almost all the columns. I am using bootstrap multiselect for the select fields and tablesorter for sorting the rows on every column. Initially, the table has no rows and table data is dynamically generated through ajax. So I am calling tablesorter in the ajax function. Before the tablesorter is called, I am able to select from the drop-downs, but once it is called after fetching the initial data, if I want to select another option, I am not able to do so. The drop-downs are not working. The below is an example of what my table looks like:
<table>
<thead>
<tr>
<th>Vehicle</th>
<th>Design</th>
.
.
</tr>
<tr>
<th class="sorter-false"><select multiple="multiple" name="vehicle"><options here></select></th>
<th class="sorter-false"><select multiple="multiple" name="design"><options here></select></th>
.
.
</tr>
</thead>
<tbody>
<tr><td></td><td></td>....</tr>
<tr><td></td><td></td>....</tr>
--
</tbody>
</table>
In the js, I tried including sorter:select like below
$("#table").tablesorter({
theme : 'blue',
headers: {
0: { sorter: "select" }
}
})
In the tag, I included the following files
<script src="resources/js/bootstrap-multiselect.js"></script>
<script src="resources/js/jquery.tablesorter.js"></script>
<script src="resources/js/parser-input-select.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap-multiselect.css">
<link rel="stylesheet" type="text/css" href="resources/css/tablesorter-styles.css"> /*Changed name */
I want to disable sorting on the second header row which consists of select drop-downs and sort based on only first header row. Upon clicking the select's, I want to see dropdowns. Please let me know where I am going wrong.
For the second row, add a class name of "tablesorter-ignoreRow" (set by the cssIgnoreRow option).
<tr class="tablesorter-ignoreRow">...</tr>
You won't even need to add a class="sorter-false" to each cell.