我有一个非常简单的HTML表,有4列:
Facility Name, Phone #, City, Specialty
我希望用户只能按设施名称和城市进行排序。
我如何使用jQuery编码这个?
我有一个非常简单的HTML表,有4列:
Facility Name, Phone #, City, Specialty
我希望用户只能按设施名称和城市进行排序。
我如何使用jQuery编码这个?
当前回答
另一种对HTML表进行排序的方法。(基于W3.JS HTML Sort)
/* Facility Name */ $('#bioTable th:eq(0)').addClass("control-label pointer"); /* Phone # */ $('#bioTable th:eq(1)').addClass("not-allowed"); /* City */ $('#bioTable th:eq(2)').addClass("control-label pointer"); /* Specialty */ $('#bioTable th:eq(3)').addClass("not-allowed"); var collection = [{ "FacilityName": "MinION", "Phone": "999-8888", "City": "France", "Specialty": "Genetic Prediction" }, { "FacilityName": "GridION X5", "Phone": "999-8812", "City": "Singapore", "Specialty": "DNA Assembly" }, { "FacilityName": "PromethION", "Phone": "929-8888", "City": "San Francisco", "Specialty": "DNA Testing" }, { "FacilityName": "iSeq 100 System", "Phone": "999-8008", "City": "Christchurch", "Specialty": "gDNA-mRNA sequencing" }] $tbody = $("#bioTable").append('<tbody></tbody>'); for (var i = 0; i < collection.length; i++) { $tbody = $tbody.append('<tr class="item"><td>' + collection[i]["FacilityName"] + '</td><td>' + collection[i]["Phone"] + '</td><td>' + collection[i]["City"] + '</td><td>' + collection[i]["Specialty"] + '</td></tr>'); } .control-label:after { content: "*"; color: red; } .pointer { cursor: pointer; } .not-allowed { cursor: not-allowed; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.w3schools.com/lib/w3.js"></script> <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> <p>Click the <strong>table headers</strong> to sort the table accordingly:</p> <table id="bioTable" class="w3-table-all"> <thead> <tr> <th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(1)')">Facility Name</th> <th>Phone #</th> <th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(3)')">City</th> <th>Specialty</th> </tr> </thead> </table>
其他回答
@Nick Grealy的回答很好,但它没有考虑到表头单元格可能的行跨度属性(可能其他答案也没有这样做)。下面是对@Nick Grealy的回答的改进,解决了这个问题。也是基于这个答案(谢谢@Andrew Orlov)。
我也替换了$。isNumeric函数带有自定义的函数(感谢@zad),以使其适用于较旧的jQuery版本。
要激活它,在<table>标记中添加class="sortable"。
$(document).ready(function() {
$('table.sortable th').click(function(){
var table = $(this).parents('table').eq(0);
var column_index = get_column_index(this);
var rows = table.find('tbody tr').toArray().sort(comparer(column_index));
this.asc = !this.asc;
if (!this.asc){rows = rows.reverse()};
for (var i = 0; i < rows.length; i++){table.append(rows[i])};
})
});
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index);
return isNumber(valA) && isNumber(valB) ? valA - valB : valA.localeCompare(valB);
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() };
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function get_column_index(element) {
var clickedEl = $(element);
var myCol = clickedEl.closest("th").index();
var myRow = clickedEl.closest("tr").index();
var rowspans = $("th[rowspan]");
rowspans.each(function () {
var rs = $(this);
var rsIndex = rs.closest("tr").index();
var rsQuantity = parseInt(rs.attr("rowspan"));
if (myRow > rsIndex && myRow <= rsIndex + rsQuantity - 1) {
myCol++;
}
});
// alert('Row: ' + myRow + ', Column: ' + myCol);
return myCol;
};
我的投票!jquery. sortelelements .js和简单的jquery 非常简单,非常简单,谢谢nandhp…
$('th').live('click', function(){
var th = $(this), thIndex = th.index(), var table = $(this).parent().parent();
switch($(this).attr('inverse')){
case 'false': inverse = true; break;
case 'true:': inverse = false; break;
default: inverse = false; break;
}
th.attr('inverse',inverse)
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
Dei uma melhorada do código 一条鳕鱼更好! 函数为所有表在所有Th在所有时间…看它! 演示
到目前为止,我使用过的最简单的方法是:http://datatables.net/
令人惊讶的是简单的……只是确保如果你走DOM替换路线(IE,建立一个表,让DataTables重新格式化它),然后确保用<thead>和<tbody>格式化你的表,否则它将不起作用。这是唯一的问题。
它还支持AJAX等。就像所有真正优秀的代码一样,关闭它也非常容易。不过,你会对你用的东西感到惊讶的。我从一个只对一个字段进行排序的“裸”DataTable开始,然后意识到一些特性确实与我正在做的事情相关。客户喜欢这些新功能。
加分到数据表的完整ThemeRoller支持....
我在tablesorter上也有不错的运气,但它远没有那么简单,没有那么好的文档,而且只有一般的功能。
我喜欢这个公认的答案,但是,很少有人要求对html进行排序,而且不需要添加图标来指示排序方向。我采取了接受答案的用法示例,并通过简单地添加bootstrap到我的项目来快速修复,并添加以下代码:
<div></div>
在每个<th>,这样你就有一个地方来设置图标。
setIcon(逆);
从公认答案的用法,在线下:
th。点击(函数(){
并通过添加setIcon方法:
function setIcon(element, inverse) {
var iconSpan = $(element).find('div');
if (inverse == false) {
$(iconSpan).removeClass();
$(iconSpan).addClass('icon-white icon-arrow-up');
} else {
$(iconSpan).removeClass();
$(iconSpan).addClass('icon-white icon-arrow-down');
}
$(element).siblings().find('div').removeClass();
}
这里是一个演示。-你需要在Firefox或IE中运行演示,或者禁用Chrome的mime类型检查来运行演示。它依赖于sortElements Plugin,由接受的答案链接,作为一个外部资源。提醒一下!
我们刚刚开始使用这个灵巧的工具:https://plugins.jquery.com/tablesorter/
有一个关于它的使用的视频: http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx
$('#tableRoster').tablesorter({
headers: {
0: { sorter: false },
4: { sorter: false }
}
});
用一个简单的表格
<table id="tableRoster">
<thead>
<tr>
<th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
<th>User</th>
<th>Verified</th>
<th>Recently Accessed</th>
<th> </th>
</tr>
</thead>