表排序有两行标题
我的表格结构如下：
这是我的HTML：
Location Full Name Amount Asset Patron ID User Date/Time Salem Bob galvin $3400 assert1 1148 sjauser 11/12 10:39 AM chennai sally n safer $400 sdfsdgt1 4747 sjauser 11/12 10:39 AM Mazdgfdg afdagadg 789769 qwqeqe 47467 sjauser 11/12 10:39 AM hurtyry afadfadg $12000 afadsf 25426546 sjauser 11/12 10:39 AM
当我点击“金额”标题时，应该对金额值（$ 3400，$ 400，$ 12000）进行排序等。就像那个日期/时间字段也应该根据值排序。
我使用了Tablesorter插件，但该插件没有对所有列进行排序。 它不排序此表中的最后一列和第二行标题。 我也使用了Tinysort插件，但它在排序时改变了表结构本身。
我无法更改表结构，因为这是我们客户最大的要求。 请提供一些关于这个排序问题的指南，这对我来说非常有用。
我们可以申请的任何定制分类意味着请建议我该怎么做。
据推测，您希望每个条目的两行保持组合在一起，在这种情况下，Tablesorter不是为了满足您的需要而设计的。 但是，如果你准备将每对行放入自己的行中，那么Tinysort可以工作：
Location Full Name Amount Asset Patron ID User Date/Time Salem Bob galvin $3400 assert1 1148 sjauser 11/12 10:39 AM chennai sally n safer $400 sdfsdgt1 4747 sjauser 11/12 10:39 AM ...
由于Tinysort显然可以对任何类型的元素进行排序，因此您应该能够告诉它对tbody元素进行排序而不是对行进行排序。 您的脚本可以执行类似的操作，基于Tinysort文档中的表示例：
$(document).ready(function() { var aAsc = []; $("#jackpotwatch>thead th").each(function(nr) { $(this).click(function() { aAsc[nr] = aAsc[nr] == 'asc' ? 'desc' : 'asc'; $("#jackpotwatch>tbody").tsort('td:eq(' + nr + ')', {order: aAsc[nr]}); }); }); });
这取决于标题行中与每个tbody的行中的单元格数量完全相同。
在这里查看演示 。
我没有适合您的插件，但我针对您的具体情况提出了以下方法：
/** * This approach assumes that records are always comprised of 2 rows. It is possible to make this configurable. */ ;(function() { //Get the table var table = $("#jackpotwatch"); //Make head header in the THEAD sortable. $("thead th", table).on("click", onSortableClicked); //Handle the sortable clicked event. function onSortableClicked(e) { //Find the column position. var c = -1, child = e.target; while ((child = child.previousSibling) != null) if (child.nodeType == 3) ++c; //Find the row position. var r = -1, child = e.target.parentNode; while ((child = child.previousSibling) != null) if (child.nodeType == 3) ++r; var subject = $("tbody", table); var replacement = sort(subject, r, c); subject.replaceWith(replacement); } function sort(subject, r, c) { var rows = $("tr", subject); //Get all the rows from the tbody. var sorted = document.createElement("tbody"); var vals = []; for (var i = 0; i < rows.length; i+=2) { var record = [rows.get(i), rows.get(i+1)]; //Record is two rows. var sub = record[r].children[c].innerText; //This is our sort subject. vals.push({"sub": sub, "record": record}); } vals.sort(compare); for (var i = 0; i < vals.length; ++i) { var val = vals[i]; sorted.appendChild(val.record[0]); sorted.appendChild(val.record[1]); } return sorted; } function compare(a, b) { var atext = a.sub.toLowerCase(); var btext = b.sub.toLowerCase(); return atext < btext ? -1 : atext > btext ? 1 : 0; } })();
这使得THEAD元素中的每个TH元素都可以排序。 它基于文本的，小写的，比较来对其进行排序。
硬编码只能处理2行集的记录，但可以扩展以允许配置构成单个记录的行数，甚至可以通过计算THEAD行数来自动推导出这一行。
我在以下HTML上使用了这个：
Location Full Name Amount Asset Patron ID User Date/Time Salem Bob galvin $3400 assert1 1148 sjauser 11/12 10:39 AM chennai sally n safer $400 sdfsdgt1 4747 sjauser 11/12 10:39 AM Mazdgfdg afdagadg 789769 qwqeqe 47467 sjauser 11/12 10:39 AM hurtyry afadfadg $12000 afadsf 25426546 sjauser 11/12 10:39 AM
确保将脚本放在HTML之后，或放在ready事件处理程序中：
$(document).ready(function() { //Sorting code from above goes here. });