我需要一个可以处理重复列的javascript表分类器。该表以多列布局，因为它非常狭窄。例如：
<table>
<thead>
<tr> <th>name</th> <th>score</th> <th>name</th> <th>score</th> </tr>
</thead>
<tbody>
<tr> <td> n1 </td> <td> 4 </td> <td> n3 </td> <td> 2 </td> </tr>
<tr> <td> n2 </td> <td> 3 </td> <td> n4 </td> <td> 1 </td> </tr>
</tbody>
</table>
我希望该表能够在点击其中一个得分标题时对两个得分列的得分进行排序。当然，名字一样。在我的实际应用程序中，我可能有100行，每行只有几个字符（2列）宽，重组的表可能只有20行（=> 10列），因此更容易查看。
（实际上，我真正想要的是一个html表，它可以通过将长表和窄表分成宽表和短表来自动扩展自己，但这要求太多了。我不相信这存在。）< / p>
是否存在具有此类能力的js（更好的，jquery）tablesorter？
/ IAW
答案 0 :(得分：0)
嘿，我想你正在寻找什么样的tablesorter插件来对列进行排序，在这里查看工作演示： http://jsfiddle.net/f9VvL/
在给定的示例中，您可以单击分数，然后您可以看到正在进行排序。
如果你热衷于：http://tablesorter.com/docs/
对于样式，你可以使用css awesomness来做到这一点;
希望这有助于:)
<强>脚本
<script type='text/javascript' src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script type='text/javascript' src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script type='text/javascript' src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<link rel="stylesheet" type="text/css" href="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<强>码
$('table').tablesorter({
// *** Appearance ***
// fix the column widths
widthFixed: false,
// include zebra and any other widgets
widgets: ['zebra'],
// other options: "ddmmyyyy" & "yyyymmdd"
dateFormat: "mmddyyyy",
// *** Functionality ***
// starting sort direction "asc" or "desc"
sortInitialOrder: "asc",
// These are detected by default,
// but you can change or disable them
headers: {
// set "sorter : false" (no quotes) to disable the column
0: { sorter: "text" },
1: { sorter: "digit" },
2: { sorter: "text" },
3: { sorter: "url" }
},
// extract text from the table - this is how is
// it done by default
textExtraction: {
0: function(node) {
return $(node).text();
},
1: function(node) {
return $(node).text();
}
},
// forces the user to have this/these column(s) sorted first
sortForce: null,
// initial sort order of the columns
// [[columnIndex, sortDirection], ... ]
sortList: [],
// default sort that is added to the end of the users sort
// selection.
sortAppend: null,
// Use built-in javascript sort - may be faster, but does not
// sort alphanumerically
sortLocaleCompare: false,
// Setting this option to true will allow you to click on the
// table header a third time to reset the sort direction.
sortReset: false,
// Setting this option to true will start the sort with the
// sortInitialOrder when clicking on a previously unsorted column.
sortRestart: false,
// The key used to select more than one column for multi-column
// sorting.
sortMultiSortKey: "shiftKey",
// *** Customize header ***
onRenderHeader: function() {
// the span wrapper is added by default
$(this).find('span').addClass('roundedCorners');
},
// jQuery selectors used to find the header cells.
selectorHeaders: 'thead th',
// *** css classes to use ***
cssAsc: "headerSortUp",
cssChildRow: "expand-child",
cssDesc: "headerSortDown",
cssHeader: "header",
tableClass: 'tablesorter',
// *** widget css class settings ***
// column classes applied, and defined in the skin
widgetColumns: {
css: ["primary", "secondary", "tertiary"]
},
// find these jQuery UI class names by hovering over the
// Framework icons on this page:
// http://jqueryui.com/themeroller/
widgetUitheme: {
css: [
"ui-icon-arrowthick-2-n-s", // Unsorted icon
"ui-icon-arrowthick-1-s", // Sort up (down arrow)
"ui-icon-arrowthick-1-n" // Sort down (up arrow)
]
},
//
widgetZebra: {
css: ["even", "odd"]
},
// *** prevent text selection in header ***
cancelSelection: true,
// *** send messages to console ***
debug: false
}).tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".pager"),
// use this format: "http:/mydatabase.com?page={page}&size={size}"
// where {page} is replaced by the page number and {size} is replaced
// by the number of records to show
ajaxUrl: null,
// process ajax so that the data object is returned along with
// the total number of rows
ajaxProcessing: function(ajax) {
if (ajax && ajax.hasOwnProperty('data')) {
// example ajax:
// {
// "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }],
// "total_rows" : 100
// }
// return [ "data", "total_rows" ];
return [ajax.data, ajax.total_rows];
}
},
// output string - default is '{page}/{totalPages}';
// possible variables:
// {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at
// either extreme is visible - default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 0,
// Number of visible rows - default is 10
size: 10,
// if true, the table will remain the same height no matter
// how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: false,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed
// if you plan to add/remove rows with the pager enabled.
removeRows: false,
// css class names of pager arrows
cssNext: '.next',
// next page arrow
cssPrev: '.prev',
// previous page arrow
cssFirst: '.first',
// go to first page arrow
cssLast: '.last',
// go to last page arrow
cssPageDisplay: '.pagedisplay',
// location of the "output"
cssPageSize: '.pagesize',
// dropdown that sets the "size" option
// class added to arrows when at the extremes
// (i.e. prev/first arrows are "disabled" when on the first page)
// Note there is no period "." in front of this class name
cssDisabled: 'disabled'
});