0

tablesorter + metadataプラグインを使用して、ソート可能なテーブルを作成しています。
ボタンのラベルに対応した値によってソートしたいのですが、ボタンを押した際にその値を変更した後にソートを行っても、ソート順が正しく表示されません。

どのようにすれば正しくボタンのラベルに対応した値でソートできるようになるでしょうか?

<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery.js"></script>
        <script src="js/jquery.tablesorter.js"></script>
        <script src="js/jquery.tablesorter.widgets.js"></script>
        <script src="js/jquery.metadata.js"></script>
        <script>
            $(function() {
                $('#table').tablesorter({
                    debug: true
                });
                $('button').click(function() {
                    if ($(this).text() == "A") {
                        $(this).text("B").parent().removeClass("{sortValue:1}").addClass("{sortValue:2}");
                    } else {
                        $(this).text("A").parent().removeClass("{sortValue:2}").addClass("{sortValue:1}");
                    }
                    $('#table').trigger("update");
                });
            });
        </script>
    </head>
    <body>
        <table id="table" class="tablesorter">
            <thead>
                <tr><th class="{sorter:'metadata'}">ボタン</th><th>値</th></tr>
            </thead>
            <tbody>
                <tr><td class="{sortValue:1}"><button>A</button></td><td>1</td></tr>
                <tr><td class="{sortValue:2}"><button>B</button></td><td>2</td></tr>
                <tr><td class="{sortValue:2}"><button>B</button></td><td>3</td></tr>
                <tr><td class="{sortValue:2}"><button>B</button></td><td>4</td></tr>
                <tr><td class="{sortValue:1}"><button>A</button></td><td>5</td></tr>
            </tbody>
        </table>
    </body>
</html>

1 件の回答 1

1

このようになれば、問題ないになります

$(function() {
$('.tablesorter').tablesorter({
	debug: false
});
});

function btClick(bt){
if (bt.textContent == "A") {
	bt.parentElement.outerHTML='<td class="{sortValue:2}"><button onclick="btClick(this)">B</button></td>';
} else {
	bt.parentElement.outerHTML='<td class="{sortValue:1}"><button onclick="btClick(this)">A</button></td>';
}
$('.tablesorter').trigger("update");
}
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.2/js/jquery.tablesorter.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.2/js/jquery.tablesorter.widgets.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.2/js/extras/jquery.metadata.min.js"></script>
</head>
<body>
	<table id="table" class="tablesorter">
		<thead>
			<tr><th class="{sorter:'metadata'}">ボタン</th><th>値</th></tr>
		</thead>
		<tbody>
			<tr><td class="{sortValue:1}"><button onclick="btClick(this)">A</button></td><td>1</td></tr>
			<tr><td class="{sortValue:2}"><button onclick="btClick(this)">B</button></td><td>2</td></tr>
			<tr><td class="{sortValue:2}"><button onclick="btClick(this)">B</button></td><td>3</td></tr>
			<tr><td class="{sortValue:2}"><button onclick="btClick(this)">B</button></td><td>4</td></tr>
			<tr><td class="{sortValue:1}"><button onclick="btClick(this)">A</button></td><td>5</td></tr>
		</tbody>
	</table>
</body>
</html>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。