如何从下拉列表中对表格进行排序 [英] How do I sort table from dropdown list
问题描述
如何为此创建简单的排序功能.我知道有像tablesorter这样的插件.但是它不会从下拉列表中对其进行排序.还是可以修改插件,以便可以从下拉列表中进行排序.预先谢谢你.
How do I create a simple sorting function for this. I know there is plugin like tablesorter. But it doesn't sort it from a dropdown list. Or is the plugin can be modified so that it can sort from a dropdown list. Thank you in advance.
HTML:
<form action="#" method="post">
<input type="text" id="UserID" name="UserID" readonly="readonly">
<input type="text" id="UserName" name="UserName" placeholder="Name">
<input type="text" id="UserOccupation" name="UserOccupation" placeholder="Occupation">
<button type="button" name="button">Add</button><br>
</form>
Sort By:
<select>
<option>ID</option>
<option>Name</option>
<option>Occupation</option>
</select>
<table id="table" class="tablesorter">
<thead>
<tr >
<th>ID</th>
<th>Name</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JavaScript:
Javascript:
$(document).ready(function() {
//Set id field to 1
var id = $('#UserID');
id.val("1");
//Add 1 to the id in textbox
function incID(){
var str = id.val();
var int = parseInt(str);
var idVal = int + 1;
id.val(idVal.toString());
}
//When button clicked
$('button').on('click', function(){
//create a new object
var obj = new Object();
//pass value dynamically from input box
obj.id = $('#UserID').val();
obj.name = $('#UserName').val();
obj.occupation = $("#UserOccupation").val();
//display data to the table
var addrow = "<tr><td>" + obj.id + "</td><td>" + obj.name + "</td><td>"+ obj.occupation +"</td></tr>";
$("table tbody").append(addrow);
//Add 1 to id field
incID();
});
});
推荐答案
自己对表进行排序非常容易,您所要做的就是使用javascript的sort方法对行进行排序(
Sorting the table is fairly easy to do yourself, all you'd have to do is sort the rows using javascript's sort method (http://www.w3schools.com/jsref/jsref_sort.asp) and re-adding the rows to the table.
您可以为不同的数据类型创建排序方法,例如:
You could create sorting methods for different data-types like:
function sortByNumber(rows, selector, ascending) {
rows.sort(function(a, b) {
var numberA = parseInt($(selector, a).text(), 10);
var numberB = parseInt($(selector, b).text(), 10);
if (ascending)
return numberA - numberB;
else
return numberB - numberA;
});
return rows;
}
function sortByText(rows, selector, ascending) {
rows.sort(function(a, b) {
var textA = $(selector, a).text();
var textB = $(selector, b).text();
if (ascending)
return textA.localeCompare(textB);
else
return textB.localeCompare(textA);
});
return rows;
}
(位于 https://jsfiddle.net/kg000ta7/的示例)
但是,如果您计划在表中包含很多行或列,那么诸如tablesorter之类的插件可能会表现更好.
However, if you plan to have a lot of rows or columns in your table, a plugin like tablesorter will probably perform better.
根据文档,您可以通过触发"sorton"事件来对表sorter进行手动排序:
According to the documentation you are able to manually sort tablesorter by triggering the 'sorton' event: http://tablesorter.com/docs/example-trigger-sort.html
$('select').on('change', function() {
var sorting;
switch (field) {
case 'ID':
sorting = [[0,0]];
break;
case 'Name':
sorting = [[1,0]];
break;
case 'Occupation':
sorting = [[2,0]];
break;
default:
console.error('Undefined sort field ' + field);
break;
}
$("table").trigger("sorton",[sorting]);
return false;
});
这篇关于如何从下拉列表中对表格进行排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!