我希望在使用 Mottie Tablesorter v2.31 对列进行排序时删除星期几。
单元格的值如下:2023 年 9 月 15 日星期五上午 7:00。
这是我迄今为止根据 Mottie 中的文档得到的信息,但没有发生任何事情。
我还尝试添加警报等内容,看看它是否被击中,但我什么也没得到。
$(function () {
$("table").tablesorter({
theme: "bootstrap",
widthFixed: true,
// widget code contained in the jquery.tablesorter.widgets.js file
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
// the uitheme widget is NOT REQUIRED!
widgets: ["filter", "columns", "zebra", "filter_functions"],
widgetOptions: {
// using the default zebra striping class name, so it actually isn't included in the theme variable above
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
zebra: ["even", "odd"],
// class names added to columns when sorted
columns: ["primary", "secondary", "tertiary"],
// reset filters button
filter_reset: ".reset",
// extra css class name (string or array) added to the filter element (input or select)
filter_cssFilter: [
'form-control',
'form-control',
'form-control', // select needs custom class names :(
'form-control',
'form-control',
'form-control'
],
filter_functions: {
// function(e, n, f, i, $r, c, data) {} <- current parameters
5: function (e, n, f, i, $r, c, data) {
// Get the date value from the cell
var date = $(n).text().trim();
// Remove the day of the week from the date string
var formattedDate = date.substr(date.indexOf(",") + 2);
// Return the formatted date for filtering
return formattedDate;
} // planned change (version undetermined)
}
}
})
});
您可以解析字符串,然后按照您想要的方式将其放回原处
const formatDateString = dateString => {
let [_, day, mm, dd, yyyy, time] = dateString.match(/(\w+),\s*(\d{1,2})\/(\d{1,2})\/(\d{4})\s+at\s+(\d{1,2}:\d{2}[APMapm]{2})/);
return `${day} ${mm}/${yyyy} ${time}`;
};
$(function() {
$("table").tablesorter({
theme: "bootstrap",
widthFixed: true,
// widget code contained in the jquery.tablesorter.widgets.js file
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
// the uitheme widget is NOT REQUIRED!
widgets: ["filter", "columns", "zebra", "filter_functions"],
widgetOptions: {
// using the default zebra striping class name, so it actually isn't included in the theme variable above
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
zebra: ["even", "odd"],
// class names added to columns when sorted
columns: ["primary", "secondary", "tertiary"],
// reset filters button
filter_reset: ".reset",
// extra css class name (string or array) added to the filter element (input or select)
filter_cssFilter: [
'form-control',
'form-control',
'form-control', // select needs custom class names :(
'form-control',
'form-control',
'form-control'
],
filter_functions: {
// function(e, n, f, i, $r, c, data) {} <- current parameters
5: function(e, n, f, i, $r, c, data) {
// Get the date value from the cell
var date = $(n).text().trim();
console.log(date)
// Remove the day of the week from the date string
var formattedDate = date.substr(date.indexOf(",") + 2);
// Return the formatted date for filtering
return formattedDate;
} // planned change (version undetermined)
}
}
})
});
<!DOCTYPE html>
<html>
<head>
<title>Sample Table</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" integrity="sha512-qzgd5cYSZcosqpzpn7zF2ZId8f/8CHmFKZ8j7mU4OUXTNRd5g+ZHBPsgKEwoqxCtdQvExE5LprwwPAgoicguNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/dragtable.mod.min.css" integrity="sha512-nR2yAQRLPLBoJHLWmvXFWp+bg7tQ8Vl6AwxE5HgCMLQ3eRUQk0l4d/CmW4F4YOzUiNRgnlLLDGrutDOzy1ImIA==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/filter.formatter.min.css" integrity="sha512-5teN5RuH2Ez/zg+vjq7lzVSmPomDOlAkXXmiUtKwANhc452+urltjRJZQvp6N5F+SXnu/6HxJlLiXPkkD+3oSg==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Date</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monday, 9/4/2023 at 7:00AM</td>
<td>Event 1</td>
</tr>
<tr>
<td>2</td>
<td>Tuesday, 9/5/2023 at 8:00AM</td>
<td>Event 2</td>
</tr>
<tr>
<td>3</td>
<td>Wednesday, 9/6/2023 at 9:00AM</td>
<td>Event 3</td>
</tr>
<tr>
<td>4</td>
<td>Thursday, 9/7/2023 at 10:00AM</td>
<td>Event 4</td>
</tr>
<tr>
<td>5</td>
<td>Friday, 9/8/2023 at 7:00AM</td>
<td>Event 5</td>
</tr>
<tr>
<td>6</td>
<td>Saturday, 9/9/2023 at 12:00PM</td>
<td>Event 6</td>
</tr>
<tr>
<td>7</td>
<td>Sunday, 9/10/2023 at 1:00PM</td>
<td>Event 7</td>
</tr>
<tr>
<td>8</td>
<td>Monday, 9/11/2023 at 7:00AM</td>
<td>Event 8</td>
</tr>
<tr>
<td>9</td>
<td>Tuesday, 9/12/2023 at 3:00PM</td>
<td>Event 9</td>
</tr>
<tr>
<td>10</td>
<td>Wednesday, 9/13/2023 at 7:00AM</td>
<td>Event 10</td>
</tr>
<tr>
<td>11</td>
<td>Wednesday, 9/13/2023 at 9:00AM</td>
<td>Event 11</td>
</tr>
<tr>
<td>12</td>
<td>Wednesday, 9/13/2023 at 12:00PM</td>
<td>Event 12</td>
</tr>
<tr>
<td>13</td>
<td>Thursday, 9/14/2023 at 2:00PM</td>
<td>Event 13</td>
</tr>
<tr>
<td>14</td>
<td>Friday, 9/15/2023 at 7:00AM</td>
<td>Event 14</td>
</tr>
<tr>
<td>15</td>
<td>Saturday, 9/16/2023 at 4:00PM</td>
<td>Event 15</td>
</tr>
</tbody>
</table>
</body>
</html>