Question

如下图所示，如何在表格的标题行中显示排序图标而不是过滤行？

我使用了jquery数据表，它会自动将这些排序图标添加到错误的位置。

这是我的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”。我只是设置它是真的，一切正常。

Jquery数据表排序图标不显示在标题上

1 个答案: