Mottie Tablesorter 在日期列上自定义过滤器

问题描述 投票:0回答:1

我希望在使用 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)
            }

        }
    })

});
javascript tablesorter mottie
1个回答
0
投票

您可以解析字符串,然后按照您想要的方式将其放回原处

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>

© www.soinside.com 2019 - 2024. All rights reserved.