Question

这是HTML代码

 <table id="datatable-language" class="table table-hover datatable-highlight">
                        <thead>
                        <tr>
                            <th></th>
                            <th>image</th>
                            <th>category_name</th>
                            <th>status</th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                    </table>

这是数据表中的JS代码

columns: [
                    {
                        title: `<input type="checkbox" class="styled" onchange='toggleSelectAll(this);'>`,
                        orderable: false,
                        data: "category_id",
                        width: "50px"
                    },
                    {
                        data: "image",
                        render: function (data, type, row) {
                            return `<img src="${row['image']}" height="50px">`;
                        },
                        width: "100px"
                    },
                    {
                        data: "name",
                        ordering: true,
                        render: function (data, type, row) {
                            return `<a href="{{ link('catalog/category/update?category_id=') }}${row['category_id']}">${row['name']}</a>`;
                        }
                    },
                    {
                        data: "cstatus",
                        width: "30px"
                    },
                    {
                        width: "30px",
                        data: "category_id"
                    },
                    {
                        width: "10px",
                        data: "category_id"
                    },
                ],
columnDefs: [
                    {
                        targets: 1,
                        orderable: true
                    },
                    {
                        targets: 2,
                        orderable: true
                    },
                    {
                        orderable: false,
                        className: 'select-checkbox',
                        targets: 0
                    },
                    {
                        targets: 3,
                        render: function (data, type, row) {
                            var status = (data == "1" ? 'checked="checked"' : '');
                            return statusSwitch(row.category_id, status);
                        }
                    },
                    {
                        targets: 4,
                        orderable: false,
                        selectable: false,
                        visible: true,
                        render: function (data, type, row) {
                            return `<a data-popup="tooltip" title="${locales['text_preview']}" target="_blank" href="{{ linkfront('product/category', 'path=') }}${row['category_id']}" class='text-default'><i class='fa fa-eye fa-lg valign-middle'></i></a>`;
                        }
                    },
                    {
                        targets: 5,
                        orderable: false,
                        render: function (data, type, row) {
                            return `<ul class="icons-list pull-right">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                            <i class="icon-menu9"></i>
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li><a href='{{ link('catalog/category/update') }}?category_id=${row['category_id']}'><i class='icon-pencil7'></i> ${locales['button_edit']}</a></li>
                                            <li><a onclick="removeItem(${row['category_id']})"><i class='icon-trash'></i> ${locales['button_delete']}</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            `;
                        }
                    }
                ]

如您所见，我将可排序属性设置为true，并且category_name仍然不起作用。 config是否缺少属性？！那是什么问题呢？其余代码完全没有意义。我附上了用于配置表格的代码段

Answer 1

 {
  data: "name",
  ordering: true,
  render: function (data, type, row) {
    return `<a href="{{ link('catalog/category/update?category_id=') }}${row['category_id']}">${row['name']}</a>;
  }

你写这个将data:"name"更改为data:"category_name"

并返回

<a href="{{ link('catalog/category/update?category_id=') }}${row['category_id']}">${row['name']}</a>;

在这里将名称更改为category_name

Answer 2

看看columns.render文档> https://datatables.net/reference/option/columns.render，尤其是类型参数。

您的问题是DT将对呈现标记的列进行排序，而不是对name值本身进行排序。因此，传回name值进行排序，对其他所有内容进行标记：

render: function (data, type, row) {
    return type == 'sort'
      ? row['name']
      : `<a href="{{ link('catalog/category/update?category_id=') }}${row['category_id']}">${row['name']}</a>;
 }

类别名称列的DataTables排序不起作用

2 个答案: