jQuery DataTable排序图标未在标题上显示

Question

如下图，我如何在表的标题行中显示排序图标，而是滤波行？

我使用了jQuery DataTable，它自动将这些排序图标添加在错误的位置。

错误的位置排序图标

这是我的jQuery代码

    let table = $('#datatable_users');
    let oTable = table.dataTable({
        "language": {
            "aria": {
                "sortAscending": ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            },
            "emptyTable": "No data available in table",
            "info": "Showing _START_ to _END_ of _TOTAL_ entries",
            "infoEmpty": "No entries found",
            "infoFiltered": "(filtered1 from _MAX_ total entries)",
            "lengthMenu": "_MENU_ entries",
            "search": "Search:",
            "zeroRecords": "No matching records found"
        },
        rowReorder: {},
        "order": [
            [0, 'asc']
        ],
        "lengthMenu": [
            [5, 10, 15, 20, -1],
            [5, 10, 15, 20, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 10,
        "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
    });

这是我的HTML代码

<table class="table table-striped table-bordered table-hover table-checkable" id="datatable_users">
<thead>
<tr role="row" class="heading">
    <th width="5%"> ID</th>
    <th> Name</th>
    <th> Phone</th>
    <th> Email</th>
    <th> IsActive</th>
    <th> Join</th>
    <th> IsNew</th>
    <th> Limit/Day</th>
    <th> Booked</th>
    <th width="5%"> #</th>
</tr>
<tr role="row" class="filter">
    <td><input type="text" class="form-control form-filter input-sm" name="id"/>
    </td>
    <td> #</td>
    <td>
        <input type="text" class="form-control form-filter input-sm" name="phone"/>
    </td>
    <td>
        <input type="text" class="form-control form-filter input-sm" name="email"/>
    </td>
    <td>
        <select name="isActive" class="form-control form-filter input-sm">
            <option value="">Select...</option>
            <option value="pending">active</option>
            <option value="closed">Blocked</option>
        </select>
    </td>
    <td>
        <div class="input-group date date-picker margin-bottom-5"
             data-date-format="dd/mm/yyyy">
            <input type="text" class="form-control form-filter input-sm" readOnly
                   name="order_date_from" placeholder="From"/>
            <span class="input-group-btn">
                                <button class="btn btn-sm default" type="button">
                                    <i class="fa fa-calendar"></i>
                                </button>
                            </span>
        </div>
        <div class="input-group date date-picker" data-date-format="dd/mm/yyyy">
            <input type="text" class="form-control form-filter input-sm" readOnly
                   name="order_date_to" placeholder="To"/>
            <span class="input-group-btn">
                                <button class="btn btn-sm default" type="button">
                                    <i class="fa fa-calendar"></i>
                                </button>
                            </span>
        </div>
    </td>
    <td>
        <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
            <input type="checkbox" class="group-checkable"
                   data-set="#sample_2 .checkboxes"/>
            <span></span>
        </label>
    </td>
    <td>#</td>
    <td>#</td>
    <td>
        <div class="margin-bottom-5">
            <button
                class="btn btn-sm green btn-outline filter-submit margin-bottom">
                <i class="fa fa-search"></i> Search
            </button>
        </div>
        <button class="btn btn-sm red btn-outline filter-cancel">
            <i class="fa fa-times"></i> Reset
        </button>
    </td>
</tr>
</thead>
<tbody>
    ....
</tbody>

谢谢。

Answer 1

是的，最终我发现了我错过的小配置。它是" OrderCellstop"。我只是将其设置为真，一切正常。