我有一个非常简单的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>
其他回答
到目前为止,我使用过的最简单的方法是:http://datatables.net/
令人惊讶的是简单的……只是确保如果你走DOM替换路线(IE,建立一个表,让DataTables重新格式化它),然后确保用<thead>和<tbody>格式化你的表,否则它将不起作用。这是唯一的问题。
它还支持AJAX等。就像所有真正优秀的代码一样,关闭它也非常容易。不过,你会对你用的东西感到惊讶的。我从一个只对一个字段进行排序的“裸”DataTable开始,然后意识到一些特性确实与我正在做的事情相关。客户喜欢这些新功能。
加分到数据表的完整ThemeRoller支持....
我在tablesorter上也有不错的运气,但它远没有那么简单,没有那么好的文档,而且只有一般的功能。
你可以使用jQuery插件(breedjs)提供排序,过滤和分页:
HTML:
<table>
<thead>
<tr>
<th sort='name'>Name</th>
<th>Phone</th>
<th sort='city'>City</th>
<th>Speciality</th>
</tr>
</thead>
<tbody>
<tr b-scope="people" b-loop="person in people">
<td b-sort="name">{{person.name}}</td>
<td>{{person.phone}}</td>
<td b-sort="city">{{person.city}}</td>
<td>{{person.speciality}}</td>
</tr>
</tbody>
</table>
JS:
$(function(){
var data = {
people: [
{name: 'c', phone: 123, city: 'b', speciality: 'a'},
{name: 'b', phone: 345, city: 'a', speciality: 'c'},
{name: 'a', phone: 234, city: 'c', speciality: 'b'},
]
};
breed.run({
scope: 'people',
input: data
});
$("th[sort]").click(function(){
breed.sort({
scope: 'people',
selector: $(this).attr('sort')
});
});
});
演奏小提琴的例子
我们刚刚开始使用这个灵巧的工具: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>
我的回答是“小心”。很多jQuery表排序插件只对传递给浏览器的内容进行排序。在许多情况下,您必须记住表是动态的数据集,并且可能包含无数行数据。
你提到了你只有4列,但更重要的是,你没有提到我们在这里讨论的行数。
如果从数据库传递5000行到浏览器,知道实际的数据库表包含100,000行,我的问题是:使表可排序有什么意义?为了进行适当的排序,您必须将查询发送回数据库,并让数据库(实际上是为对数据进行排序而设计的工具)为您进行排序。
直接回答你的问题,我遇到过的最好的排序插件是Ingrid。我不喜欢这个附加组件的原因有很多(你称之为“不必要的铃铛和哨子……”),但它在排序方面最好的特性之一是它使用ajax,并且不假设在它进行排序之前已经将所有数据传递给它。
我意识到这个答案对于您的需求来说可能有些过分(并且晚了2年),但是当我所在领域的开发人员忽视这一点时,我确实很恼火。所以我希望有人能注意到。
我现在感觉好多了。
另一种对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>