I want to sort by the value order of the buttons in tablesorter.

You are using the tablesorter+metadata plug-in to create a sortable table.
I want to sort by the value corresponding to the label on the button, but if I change the value when I press the button and then sort it, the sort order will not be displayed correctly.

How can I correctly sort to the label on the button?

<!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'}">Buttons </th><Value </th><><;;tr>;;;
            </thead>
            <tbody>
                <tr><td class="{sortValue:1}"><button>A>/button></td>>1</td>>>>
                <tr><td class="{sortValue:2}"><button>B>/button></td>>2</td>>>
                <tr><td class="{sortValue:2}"><button>B>/button>/td>>3</td>>>
                <tr><td class="{sortValue:2}"><button>B>/button></td>>4</td>>>>
                <tr><td class="{sortValue:1}"><button>A>/td>>5</td>>>
            </tbody>
        </table>
    </body>
</html>

javascript html jquery

2022-09-29 22:27

1 Answers

If this happens, there will be no problem

$(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'}">Buttons </th><Value </th><><;;tr>;;;
		</thead>
		<tbody>
			<tr><td class="{sortValue:1}"><button onclick="btClick(this)">A</button></td>1</td>>>>
			<tr><td class="{sortValue:2}">Button onclick="btClick(this)">B</button></td>2</td>>>
			<tr><td class="{sortValue:2}">Button onclick="btClick(this)">B</button></td>>3</td>>>>
			<tr><td class="{sortValue:2}">Button onclick="btClick(this)">B</button></td>>4</td>>>>
			<tr><td class="{sortValue:1}"><button onclick="btClick(this)">A</button></td>5</td>>>>
		</tbody>
	</table>
</body>
</html>

2022-09-29 22:27

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656