我有一个表排序器功能，该功能仅在某些列上起作用，并且仅在我单击所拥有的内容时才对第一列进行正确排序。但是，如果我单击“第一个”和“最后一个”，它将以一种难以理解的方式对表格进行排序。
我是javascript的新手，即使我能够解决一些问题，也无法使其100％正常工作。
这是我的小提琴：https://jsfiddle.net/m_tibo/0t83no14/4/
这是我的功能：
// TABLESORTER
function accordionTable(i, elem) {
var table = $(elem),
tbody = table.find('tbody'),
th_index = 0,
th_sortType = "int";
function mapTDs(i, elem) {
var txt = $("td", elem).eq(th_index).text();
$(elem).attr("data-sort", txt);
}
function sortAsc(a, b) {
var aData = $(a).attr("data-sort"),
bData = $(b).attr("data-sort");
if (th_sortType == "string") {
return +bData < +aData ? 1 : -1; // Integer
} else {
return bData < aData ? 1 : -1; // String or else
}
}
//header sort
table.on("click", "th", function() {
th_sortType = $(this).data('sort');
th_index = $(this).index();
tbody = table.find('tbody').each(mapTDs);
tbody.sort(sortAsc).detach().appendTo(table);
});
}
$('table').each(accordionTable);
我从函数中期望的是对每列上的表进行升序和降序排序。 非常感谢您的帮助。
答案 0 :(得分：0)
您可以尝试以下一种方法： https://jsfiddle.net/Mottie/wty134u7/
$('table').tablesorter({
// *** APPEARANCE ***
// Add a theme - try 'blackice', 'blue', 'dark', 'default'
// 'dropbox', 'green', 'grey' or 'ice'
// to use 'bootstrap' or 'jui', you'll need to add the "uitheme"
// widget and also set it to the same name
// this option only adds a table class name "tablesorter-{theme}"
theme: 'blackice',
// fix the column widths
widthFixed: false,
// Show an indeterminate timer icon in the header when the table
// is sorted or filtered
showProcessing: false,
// header layout template (HTML ok); {content} = innerHTML,
// {icon} = <i/> (class from cssIcon)
headerTemplate: '{content}',
// return the modified template string
onRenderTemplate: null, // function(index, template){ return template; },
// called after each header cell is rendered, use index to target the column
// customize header HTML
onRenderHeader: function (index) {
// the span wrapper is added by default
$(this).find('div.tablesorter-header-inner').addClass('roundedCorners');
},
// *** FUNCTIONALITY ***
// prevent text selection in header
cancelSelection: true,
// other options: "ddmmyyyy" & "yyyymmdd"
dateFormat: "mmddyyyy",
// The key used to select more than one column for multi-column
// sorting.
sortMultiSortKey: "shiftKey",
// key used to remove sorting on a column
sortResetKey: 'ctrlKey',
// false for German "1.234.567,89" or French "1 234 567,89"
usNumberFormat: true,
// If true, parsing of all table cell data will be delayed
// until the user initializes a sort
delayInit: false,
// if true, server-side sorting should be performed because
// client-side sorting will be disabled, but the ui and events
// will still be used.
serverSideSorting: false,
// *** SORT OPTIONS ***
// These are detected by default,
// but you can change or disable them
// these can also be set using data-attributes or class names
headers: {
// set "sorter : false" (no quotes) to disable the column
0: {
sorter: "text"
},
1: {
sorter: "text"
},
3: {
sorter: "digit"
}
},
// ignore case while sorting
ignoreCase: true,
// forces the user to have this/these column(s) sorted first
sortForce: null,
// initial sort order of the columns, example sortList: [[0,0],[1,0]],
// [[columnIndex, sortDirection], ... ]
sortList: [
[0, 0],
[1, 0],
[2, 0]
],
// default sort that is added to the end of the users sort
// selection.
sortAppend: null,
// starting sort direction "asc" or "desc"
sortInitialOrder: "asc",
// Replace equivalent character (accented characters) to allow
// for alphanumeric sorting
sortLocaleCompare: false,
// third click on the header will reset column to default - unsorted
sortReset: false,
// restart sort to "sortInitialOrder" when clicking on previously
// unsorted columns
sortRestart: false,
// sort empty cell to bottom, top, none, zero
emptyTo: "bottom",
// sort strings in numerical column as max, min, top, bottom, zero
stringTo: "max",
// 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();
}
},
// use custom text sorter
// function(a,b){ return a.sort(b); } // basic sort
textSorter: null,
// *** WIDGETS ***
// apply widgets on tablesorter initialization
initWidgets: true,
// include zebra and any other widgets, options:
// 'columns', 'filter', 'stickyHeaders' & 'resizable'
// 'uitheme' is another widget, but requires loading
// a different skin and a jQuery UI theme.
widgets: ['zebra', 'columns'],
widgetOptions: {
// zebra widget: adding zebra striping, using content and
// default styles - the ui css removes the background
// from default even and odd class names included for this
// demo to allow switching themes
// [ "even", "odd" ]
zebra: [
"ui-widget-content even",
"ui-state-default odd"],
// uitheme widget: * Updated! in tablesorter v2.4 **
// Instead of the array of icon class names, this option now
// contains the name of the theme. Currently jQuery UI ("jui")
// and Bootstrap ("bootstrap") themes are supported. To modify
// the class names used, extend from the themes variable
// look for the "$.extend($.tablesorter.themes.jui" code below
uitheme: 'jui',
// columns widget: change the default column class names
// primary is the 1st column sorted, secondary is the 2nd, etc
columns: [
"primary",
"secondary",
"tertiary"],
// columns widget: If true, the class names from the columns
// option will also be added to the table tfoot.
columns_tfoot: true,
// columns widget: If true, the class names from the columns
// option will also be added to the table thead.
columns_thead: true,
// filter widget: If there are child rows in the table (rows with
// class name from "cssChildRow" option) and this option is true
// and a match is found anywhere in the child row, then it will make
// that row visible; default is false
filter_childRows: false,
// filter widget: If true, a filter will be added to the top of
// each table column.
filter_columnFilters: true,
// filter widget: css class applied to the table row containing the
// filters & the inputs within that row
filter_cssFilter: "tablesorter-filter",
// filter widget: Customize the filter widget by adding a select
// dropdown with content, custom options or custom filter functions
filter_functions: null,
// filter widget: Set this option to true to hide the filter row
// initially. The rows is revealed by hovering over the filter
// row or giving any filter input/select focus.
filter_hideFilters: false,
// filter widget: Set this option to false to keep the searches
// case sensitive
filter_ignoreCase: true,
// filter widget: jQuery selector string of an element used to
// reset the filters.
filter_reset: null,
// Delay in milliseconds before the filter widget starts searching;
// This option prevents searching for every character while typing
// and should make searching large tables faster.
filter_searchDelay: 300,
// Set this option to true if filtering is performed on the server-side.
filter_serversideFiltering: false,
// filter widget: Set this option to true to use the filter to find
// text from the start of the column. So typing in "a" will find
// "albert" but not "frank", both have a's; default is false
filter_startsWith: false,
// filter widget: If true, ALL filter searches will only use parsed
// data. To only use parsed data in specific columns, set this option
// to false and add class name "filter-parsed" to the header
filter_useParsedData: false,
// Resizable widget: If this option is set to false, resized column
// widths will not be saved. Previous saved values will be restored
// on page reload
resizable: true,
// saveSort widget: If this option is set to false, new sorts will
// not be saved. Any previous saved sort will be restored on page
// reload.
saveSort: true,
// stickyHeaders widget: css class name applied to the sticky header
stickyHeaders: "tablesorter-stickyHeader"
},
// *** CALLBACKS ***
// function called after tablesorter has completed initialization
initialized: function (table) {},
// *** CSS CLASS NAMES ***
tableClass: 'tablesorter',
cssAsc: "tablesorter-headerSortUp",
cssDesc: "tablesorter-headerSortDown",
cssHeader: "tablesorter-header",
cssHeaderRow: "tablesorter-headerRow",
cssIcon: "tablesorter-icon",
cssChildRow: "tablesorter-childRow",
cssInfoBlock: "tablesorter-infoOnly",
cssProcessing: "tablesorter-processing",
// *** SELECTORS ***
// jQuery selectors used to find the header cells.
selectorHeaders: '> thead th, > thead td',
// jQuery selector of content within selectorHeaders
// that is clickable to trigger a sort.
selectorSort: "th, td",
// rows with this class name will be removed automatically
// before updating the table cache - used by "update",
// "addRows" and "appendCache"
selectorRemove: "tr.remove-me",
// *** DEBUGING ***
// send messages to console
debug: false
}）。tablesorterPager（{
container: $(".pager"),
ajaxUrl: null,
ajaxProcessing: function(ajax) {
if (ajax && ajax.hasOwnProperty('data')) {
return [ajax.data, ajax.total_rows];
}
},
output: '{startRow} to {endRow} ({totalRows})',
updateArrows: true,
page: 0,
size: 10,
fixedHeight: true,
removeRows: false,
cssNext: '.next',
// previous page arrow
cssPrev: '.prev',
// go to first page arrow
cssFirst: '.first',
// go to last page arrow
cssLast: '.last',
// select dropdown to allow choosing a page
cssGoto: '.gotoPage',
// location of where the "output" is displayed
cssPageDisplay: '.pagedisplay',
// dropdown that sets the "size" option
cssPageSize: '.pagesize',
// 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'
});
// Extend the themes to change any of the default class names ** NEW **
$.extend($.tablesorter.themes.jui, {
// change default jQuery uitheme icons - find the full list of icons
// here: http://jqueryui.com/themeroller/ (hover over them for their name)
table: 'ui-widget ui-widget-content ui-corner-all', // table classes
header: 'ui-widget-header ui-corner-all ui-state-default', // header classes
icons: 'ui-icon', // icon class added to the <i> in the header
sortNone: 'ui-icon-carat-2-n-s',
sortAsc: 'ui-icon-carat-1-n',
sortDesc: 'ui-icon-carat-1-s',
active: 'ui-state-active', // applied when column is sorted
hover: 'ui-state-hover', // hover class
filterRow: '',
even: 'ui-widget-content', // even row zebra striping
odd: 'ui-state-default' // odd row zebra striping
});
It works perfectly