引导表：按日期字段排序

Posted 2023-05-08

【中文标题】引导表：按日期字段排序

【英文标题】：Bootstrap Table: sort by date field

【发布时间】：2019-08-05 12:29:12

【问题描述】：

我正在使用这个Bootstrap table plugin。但是按日期排序不能正常工作。

代码如下：

<table class=" table-striped" id="table" data-toggle="table"
    data-search="true"
    data-filter-control="true"
    data-click-to-select="true"
    data-escape="false">

    <thead>
        <tr>
            <th data-field="expiry_date" data-sortable="true" scope="col"><?= 'expiry date' ?></th>
        </tr>
    </thead>

日期格式如下：d/m/y (17/7/14)

如何修复它以便正确排序日期？

【问题讨论】：

出于好奇，你为什么要用 php <?= 'expiry date' ?> 回显这个字符串？既然是硬编码字符串，为什么不直接用 html 硬编码呢？

【参考方案1】：

您必须使用带有“data-sorter”属性的自定义排序器，例如data-sorter="datesSorter"

然后满足您的需求：

function datesSorter(a, b) 
  if (new Date(a) < new Date(b)) return 1;
  if (new Date(a) > new Date(b)) return -1;
  return 0;

【讨论】：

我得到这个错误：Uncaught TypeError: a.toDate is not a function

我只是给你一个例子，在这个例子中 toDate() 指的是 Moment.js 将字符串转换为日期的方法。

那么你更多的是寻找如何比较日期而不是在引导表中实现排序器。

@PHPnoob - 编写答案时，除非确实有必要，否则应避免添加额外的依赖项。如果你这样做了，你绝对应该在你的回答中提到这一点，否则对于 OP 和未来的访问者来说，这将比帮助更令人困惑。

@MagnusEriksson 我指定这是一个示例，让他知道该怎么做，我认为这很清楚，可以理解。无论如何，我只是编辑了我的答案。

【参考方案2】：

把日期转换成这样的数字放在<td>内容的开头

<span style="display:none">strtotime($date)</span>

【参考方案3】：

我使用一个语法较短的函数，'data-sorter' option:

<table
  id="table"
  data-toggle="table"
  data-
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="date" data-sortable="true" data-sorter="dateSorter">Item Date</th>
    </tr>
  </thead>
</table>

<script>
    function dateSorter(a, b)
        return(new Date(a).getTime() - new Date(b).getTime());
    
</script>

【参考方案4】：

您必须使用带有“data-sorter”属性的自定义排序器，例如 data-sorter="datesSorter"。

然后满足您的需求：

function datesSorter(a, b) 
    return Date.parse(a) - Date.parse(b);

【参考方案5】：

我让它像这样工作...... 我添加了一个新列（数字）并将其设置为隐藏。您可以通过将该日期转换为数字来轻松做到这一点。

$('#mainTable').bootstrapTable(
    sortStable: true,
    pagination: true,
    pageSize: 100,
    toolbar:"#toolbar",
    search: true,
    searchOnEnterKey: false,
    sortOrder: "desc",sortOrder: "desc",

    // here we determine the column that will sort the table
    sortName: "rel0",
    columns: [
        
            // this is the hidden numeric column that works as sorter 
            field: 'rel0',
            title: 'rel0',                  
            visible:false,                             
        ,
        
            // this is the visible column
            field: 'rel',
            title: 'Date / hour',
        ,
    ],
    data: objetoData
);