嘿，我估计您正在寻找表格排序器插件来对列进行排序并在此处查看工作演示：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'
});