Wikis Wikis - 1 month ago 15
Javascript Question

Multi-select checkboxes with tablesorter

I have a Python script which generates an HTML table. The final column of the table contains checkboxes. I want to use the Shift key to select multiple checkboxes. So, I've incorporated this Javascript.

However, I'm sorting the table columns after loading using tablesorter (and after calling the above Javascript). Furthermore, the user can also sort columns by clicking on column headers. This results in the wrong checkboxes being selected after the user uses Shift-click.

So far I have tried:


  • moving the select multiple checkboxes javascript to after the sorting (which seems logical to me), but then the sorting functionality does not work

  • the other javascript answers to that question (How can I shift-select multiple checkboxes like GMail?) but then multi-select does not work

  • other Googled code (like this) - but again multi-select does not work



The code:

<script src='shift-click-select.js'></script>
<script src='jquery-latest.js'></script>
<script src='jquery.tablesorter.min.js'></script>
<script>
//Javascript function to sort table "my_table" by default on first column (0,0) and then on second column (1) in ascending order (0).
$(function() {
$("#my_table").tablesorter({sortList:[[0,0],[1,0]]});
});
</script>
<table id="my_table" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<td><input type="checkbox" name="%s" class="chkbox" /></td>
...
</table>


note: shift-click-select.js is from answer mention above.

My guess is that I might need to re-number the checkboxes every time the table is resorted, but I'm hoping there is an easier way?

Answer

I suspect that you copied the code from this post almost exactly:

<script type="text/javascript">
    var lastChecked = null;

    $(document).ready(function() {
        var $chkboxes = $('.chkbox');
        $chkboxes.click(function(e) {
            if(!lastChecked) {
                lastChecked = this;
                return;
            }

            if(e.shiftKey) {
                var start = $chkboxes.index(this);
                var end = $chkboxes.index(lastChecked);

                $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).attr('checked', lastChecked.checked);

            }

            lastChecked = this;
        });
    });
</script>

The problem you're probably experiencing is caused by the var $chkboxes = $('.chkbox'); invoked on the document being ready. That's declaring a list of .chkbox objects in their initial order when the page loads. tablesorter then changes the order.

If what I'm assuming is correct, then getting it to work properly would be as simple as changing:

var $chkboxes = $('.chkbox');
$chkboxes.click(function(e) ...

to:

$('.chkbox').click(function(e) {
    var $chkboxes = $('.chkbox');

This way the checkbox order is determined on each click rather than once on page load.

It would help if we got to see the contents of your shift-click-select.js.