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.

for starters, properly close the `tr`. Also, is that a properly working comment around the input line? As for `button type="checkbox"`, I think it's not a supported type for a button element. — yezzz, Jun 01 '16 at 15:32
The comment is a working input checkbox, but when I use it the table stops sorting. Do you have any suggestions ? — develop1, Jun 01 '16 at 15:47
what I meant is, is the comment tag working, ie the input does NOT render in the example, otherwise you'd have a duplicate id issue if both the input and the button are rendered. — yezzz, Jun 01 '16 at 16:02
you probably can't use the button, so try the input, wrapped in a div. A working fiddle with html, css and scripts would be useful for testing. — yezzz, Jun 01 '16 at 16:03
Please share the rendered HTML and the javascript being used to initialize the sorting plugin. — Mottie, Jun 01 '16 at 16:10
Either the input or the button are being used never at the same time. — develop1, Jun 01 '16 at 16:21

score 0 · Accepted Answer · edited Jun 02 '16 at 00:48

0

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>

edited Jun 02 '16 at 00:48

Tirth Patel

5,443
3
27
39

answered Jun 01 '16 at 16:39

develop1

747
1
10
32

Jquery tablesorting not working with input checkbox

1 Answers1