首页 > 解决方案 > CakePHP 3.6.14:引导表按 html 而非文本排序

问题描述

我正在bootstrap table使用cakephp. 每个单元格的内容都是一个链接,所以为了显示文本而不是我在标签中使用的 htmldata-escape="false"代码<table>

但是现在当我尝试排序时,排序没有按预期工作,因为它根据链接的 html 代码而不是显示的文本对行进行排序。

这是我的桌子:

<table class="table responsive" id="table" data-toggle="table"
    data-search="true"
    data-filter-control="true" 
    data-show-export="true"
    data-click-to-select="true"
    data-toolbar="#toolbar"
    data-escape="false">
    <thead>
        <tr>
              <th data-field="name" data-filter-control="input" data-sortable="true" scope="col"><?= __('Title') ?></th>
        </tr>
    </thead>
    <tbody>
       <?php foreach ($tasks as $task):?>
           <tr>
              <td><?= $task->has('name') ? $this->Html->link($task->name, ['controller' => 'Tasks', 'action' => 'edit', $task->id]) : '' ?></td>
           </tr>
       <?php endforeach; ?>
   </tbody>
</table>

标签: phphtmlcakephpbootstrap-table

解决方案


您可以使用您自己的带有“data-sorter”属性的 javascript 排序器。

<th data-field="name" data-filter-control="input" data-sortable="true" data-sorter="linksSorter" scope="col"><?= __('Title') ?></th>

然后例如:

function linksSorter(a, b) {
    var a = $(a).text();
    var b = $(b).text();
    if (a < b) return -1;
    if (a > b) return 1;

    return 0;
}

推荐阅读