开发者

JQuery tablesorter conflicts with checkall toggle

I am trying to create a table that is sortable using JQuery tablesorter and also with a select all/none checkbox toggle for the individual row checkboxes. Tablesorter is disabling the toggle.

On a similar post I read "tablesorter is destroying/recreating the original Dom element" - that said I'm s开发者_Go百科till not sure how to fix it.

My code is:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel='stylesheet' href='css/simple.css' type='text/css'/>
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='js/tablesorter.js'></script>
    <script type='text/javascript'>
        function checkAll(checkname, exby) {
        for (i = 0; i < checkname.length; i++)
        checkname[i].checked = exby.checked? true:false
        }
    </script>
    <script type="text/javascript">$(document).ready(function() {$("#dataGrid").tablesorter({ widgets: ['zebra'] });});</script>
    <title>test</title>
  </head>

<body>
<form id='dataGridForm' name='mylist' action='test.php' method='post'>
<table id='dataGrid' class='tablesorter'>
<thead>
<tr>
<th><input type="checkbox" name="all" onClick="checkAll(document.getElementsByName('checkGroup[]'),this)"></th>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="checkGroup[]" value="1"></td><td>1</td><td>4</td></tr>
<tr><td><input type="checkbox" name="checkGroup[]" value="2"></td><td>2</td><td>3</td></tr>
<tr><td><input type="checkbox" name="checkGroup[]" value="3"></td><td>3</td><td>2</td></tr>
<tr><td><input type="checkbox" name="checkGroup[]" value="4"></td><td>4</td><td>1</td></tr>
</tbody>
</table>
<div>
<input id='submit' type='submit' name='submit' value='submit'/></div>
</form>

  </body>
</html>

any ideas would be appreciated.


Add header option like below:

$("#dataGrid").tablesorter({ widgets: ['zebra'], headers:{0:{sorter:false}} });


it looks like you're switching them on if off and off if on....

use this

function toggleAll(selector){
    $(selector).each(function(){
        this.checked = !this.checked;
    })
}

then use a jquery selector which would give you all the checkboxes necessary.

onclick="toggleAll('input[type:checkbox]')"

(untested)


I had to do a workaround which was to pull the checkall checkbox out of the tablesorter table - then it worked. however I still have no way of getting it to work while in the table.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜