ton*_*ega 172 sorting jquery html-table
我有一个非常简单的HTML表,有4列:
Facility Name, Phone #, City, Specialty
我希望用户能够按设施名称和仅城市进行排序.
我如何使用jQuery编写代码？
Nic*_*aly 171
我偶然发现了这一点,并认为我会投入2美分.单击列标题以升序排序,再次单击降序排序.
$('th').click(function(){
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).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 $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Country</th><th>Date</th><th>Size</th></tr>
<tr><td>France</td><td>2001-01-01</td><td>25</td></tr>
<tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr>
<tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr>
<tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>Jam*_*mes 147
如果你想避免所有的花里胡哨,那么我可以建议这个简单的sortElements插件.用法:
var table = $('table');
$('.sortable th')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
if( $.text([a]) == $.text([b]) )
return 0;
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;
});
});
还有一个演示.(单击"city"和"facility"列标题进行排序)
bpe*_*n76 39
到目前为止,我使用的最简单的是:http: //datatables.net/
非常简单......只要确保你去DOM替换路线(IE,构建一个表并让DataTables重新格式化它),然后确保使用<thead>和/ <tbody>或它将无法正常工作.这是唯一的问题.
还有对AJAX等的支持.与所有非常好的代码片段一样,它也非常容易完全关闭.不过,你会对你可能会使用的东西感到惊讶.我开始使用"裸"DataTable,它只对一个字段进行了排序,然后意识到某些功能与我正在做的事情非常相关.客户喜欢新功能.
奖励指向DataTables以获得完整的ThemeRoller支持....
我也对乒乓球运动员运气不错,但它并不是那么容易,也没有很好的记录,并且只有很好的功能.
Rav*_*Ram 18
我们刚开始使用这个光滑的工具: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>
car*_*rse 13
我的回答是"小心".许多jQuery表排序附加组件只对您传递给浏览器的内容进行排序.在许多情况下,您必须记住表是动态数据集,并且可能包含数以万计的数据行.
你确实提到你只有4列,但更重要的是,你没有提到我们在这里谈论了多少行.
如果从数据库向浏览器传递5000行,知道实际的数据库表包含100,000行,我的问题是:使表可排序的重点是什么？为了进行正确的排序,您必须将查询发送回数据库,并让数据库(实际设计用于排序数据的工具)为您进行排序.
直接回答你的问题,我遇到的最好的排序插件是Ingrid.有很多原因让我不喜欢这个附加组件("不必要的花里胡哨......"就像你所说的那样),但它在排序方面最好的一个特点就是它使用了ajax,并且没有假设您在排序之前已经将所有数据传递给它.
我认识到这个答案对于你的要求来说可能是过度杀戮(并且迟了2年),但是当我的领域的开发人员忽略了这一点时,我确实感到恼火.所以我希望别人能够接受它.
我现在感觉好多了.
小智 6
我喜欢这个接受的答案,但是,你很少得到排序html的要求而不必添加指示排序方向的图标.我接受了接受答案的用法示例并通过简单地向我的项目添加bootstrap并添加以下代码来快速修复:
<div></div>
在每个内部,<th>以便您有一个设置图标的地方.
setIcon(this, inverse);
从接受的答案的用法,在线下:
th.click(function () {
并通过添加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插件,由接受的答案链接,作为外部资源.只是一个抬头!
这是对表进行排序的一种好方法：
$(document).ready(function () {
$('th').each(function (col) {
$(this).hover(
function () {
$(this).addClass('focus');
},
function () {
$(this).removeClass('focus');
}
);
$(this).click(function () {
if ($(this).is('.asc')) {
$(this).removeClass('asc');
$(this).addClass('desc selected');
sortOrder = -1;
} else {
$(this).addClass('asc selected');
$(this).removeClass('desc');
sortOrder = 1;
}
$(this).siblings().removeClass('asc selected');
$(this).siblings().removeClass('desc selected');
var arrData = $('table').find('tbody >tr:has(td)').get();
arrData.sort(function (a, b) {
var val1 = $(a).children('td').eq(col).text().toUpperCase();
var val2 = $(b).children('td').eq(col).text().toUpperCase();
if ($.isNumeric(val1) && $.isNumeric(val2))
return sortOrder == 1 ? val1 - val2 : val2 - val1;
else
return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
});
$.each(arrData, function (index, row) {
$('tbody').append(row);
});
});
});
}); table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><th>id</th><th>name</th><th>age</th></tr>
<tr><td>1</td><td>Julian</td><td>31</td></tr>
<tr><td>2</td><td>Bert</td><td>12</td></tr>
<tr><td>3</td><td>Xavier</td><td>25</td></tr>
<tr><td>4</td><td>Mindy</td><td>32</td></tr>
<tr><td>5</td><td>David</td><td>40</td></tr>
</table>小提琴可以在这里找到：https :
//jsfiddle.net/e3s84Luw/
可以在这里找到说明：https : //www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code
| 归档时间： |
|
| 查看次数： |
224674 次 |
| 最近记录： |