ねえ、列を並べ替えるために 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'
});