Question

我正在使用DataTables在我的用户界面中显示数据。我已将其配置为显示每列的搜索框。但现在排序箭头不再是顶部了。

目前看起来如何： Image（我没有足够的声誉发布图像sry。）

如何让他们回到顶端？

HTML：

<div id="container">
    <div id="demo">
        <h2>Index</h2>
        <table id="example" class="display">
            <thead>
                <tr>
                    <th>MovieId</th>
                    <th>Title</th>
                    <th>TagLine</th>
                    <th>AirDate</th>
                </tr>
                <tr>
                    <td></td>
                    <td>Title</td>
                    <td>TagLine</td>
                    <td>AirDate</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

JS-代码：

$(document).ready(function () {
    $('#example thead td').each(function () {
        var title = $('#example thead td').eq($(this).index()).text();
        if (title == "") {
            return;
        }

        $(this).html('<input type="text" placeholder="SearchText ' + title + '" />');
    });

    var table = $('#example').DataTable({
        "sAjaxSource": "http://localhost:51794/Movie/AjaxHandler",
        "bProcessing": true,
        "bServerSide": true,
        "sDom": 'ltipr',
        "aoColumns": [
            {
                "sName": "MovieId",
                "bSortable": false,
                "bSearchable": false,
                "bVisible": false
            },
            { "sName": "Title" },
            { "sName": "TagLine" },
            { "sName": "AirDate" }
        ]
    });

    $("#example thead input").on('keyup change', function () {
        table
            .column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();
    });
});

Answer 1

我建议您将过滤器放在标题行上方，问题就解决了。

ScreenShot ：

<thead>
    <tr>
        <td></td>
        <td>Position</td>
        <td>Office</td>
        <td>Age</td>
        <td>Start date</td>
        <td>Salary</td>

    </tr>


    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>

    </tr>


</thead>

Answer 2

添加选项

"bSortCellsTop": true

到您的数据表初始化代码。

http://legacy.datatables.net/usage/options#bSortCellsTop

数据表：如何在顶部获取排序箭头

2 个答案: