Jquery tablesorting not working with input checkbox

Question

I am using Jquery table-sorter and it works in all cases except when one of the columns is a input check-box. When a input check-box is present none of the columns in the table sort.I have tried changing the input to a button but than I am not able to check the check-box (I think that might have something to do with the label tag) but the columns do sort.

I have searched everywhere for a solution but can't find one, any help will be greatly appreciated.

<div class="container">
        <div class="row">
            <div class="cols s12">

                <div id="searchtable1">     
                    <table class="sortable responsive-table bordered highlight">        
                    <thead>         
                        <tr>
                            <th ></th>                      
                            <th >Username</th>
                            <th >First Name</th>
                            <th >Last Name</th>                     
                        </tr>   
                    </thead>                        
                    <tbody>   
                        <tr id="${count}">
                            <td>
                                <%-- <input type="checkbox" value="1" id="checkbox1" name="checkbox1"> --%>
                                <button type="checkbox" value="1" id="checkbox1" name="checkbox1"></button>
                                <label for="checkbox1"></label>

                            </td>
                            <td></td>
                            <td></td>     
                            <td></td> 
                        </tr>
                    </tbody> 
                </table>
            </div>
        </div>
    </div>
</div>


<script language="JavaScript" type="text/javascript">
    $(document).ready(function () {
        $('#searchtable1').dataTable().sort();
    });
</script>

This is a jsp page and I am using the CSS materialize style sheet.

If you can let me know why the button checkbox isn't working or why the input checkbox isn't sorting the table that would be great.

Answer 1

After many hours of misery, the problem is in the CSS materialize style sheet. It wasn't working because the <td></td> where not on the same line. So the correct code and spacing is:

<tr id="${count}">
    <td><input type="checkbox" value="1" id="checkbox1" name="checkbox1"><label for="checkbox1"></label></td>
    <td></td>
    <td></td>     
    <td></td> 
</tr>