jquery - 基于搜索结果的jquery ajax订单表

Question

我有一个具有搜索功能的 6 列数据表。当有人开始在“搜索”框中键入内容时，该表仅显示与预期匹配的表项。其中一列具有以字母“Y”开头的某些值，我希望当有人搜索时，所有结果都已排序，以便首先显示以 Y 开头的表项，然后是与搜索查询匹配的所有其他项但不要以 Y 开头。

希望使用类似这种现成功能的东西（但对更好的想法持开放态度）

function setupTable() { 
    var table = $('#locTable').DataTable({
            ajax: '/locations/data',
            "lengthChange": false,
            "processing": true,
            "scrollY": "400px",
            "paging": true,
            language: {
            searchPlaceholder: "Enter Location",
            search: "",    
        },

        "columnDefs": [    
            { "searchable": false, "targets": [2, 3, 5] },    
            {    
                "render": function (data, type, row) {    
                    return (Math.round(data * 100) / 100).toFixed(2);;    
                }, "targets": [2, 3]    
            },
            { "type": "airport-first", "targets": 1 }    
        ],    
        searchDelay: 350,    
        "pageLength": 100,    
        "dom": '<fi<tr><"bottom"p>>',

        "language": {    
            "processing": "<i class='fa fa-cog fa-spin fa-3x fa-fw'></i><span class='sr-only'>Loading...</span>",    
        }    
    });    
    return table; 

}

   $.fn.dataTable.ext.type.order['airport-first-asc'] = function (ac) {
        //somehow get data and return if starts with Y?            
        if (ac.startsWith("Y")) {
            return 2;
        }
        return 1;
    };
    $.fn.dataTable.ext.type.order['airport-first-desc'] = function (ac) {
            //return everything else that doesn't start with Y??
        if (ac.startsWith("Y")) {
            return 1;
        }
        return 2;        
    };

编辑＃1：

如何将 $.fn.dataTable.ext.type.order 与表中的搜索功能连接起来？仅当我单击表格标题列时才会激活...这些 fn 应该返回什么？https://datatables.net/examples/plug-ins/sorting_manual.html中的 1 和 2 是什么意思？?

谢谢！

数据如下所示（将其缩减为 2 列，在第 1 列（名称）上进行过滤，并在以 Y 开头的第 2 列代码上排序以转到过滤列表的顶部）。所以搜索阳光应该会导致：

SUNSHINEA   YBSS
SUNSHINEA   SWQQ
SUNSHINEA   WSQQ
SUNSHINEA   TTWW

html:

<input id="searchInput" value="Type To Filter">
<br/>
<table>
    <thead>
       
    </thead>
    <tbody id="fbody">
        <tr>
            <td>ABERDEEN</td>
            <td>ADSS</td>
        </tr>
        <tr>
            <td>ABERDEEN</td>
            <td>AWAS</td>
        </tr>
        <tr>
            <td>ABERDEEN</td>
            <td>TEEE</td>
        </tr>
        <tr>
            <td>ABERDEEN</td>
            <td>YABN</td>
        </tr>
        <tr>
            <td>ABERDEEN</td>
            <td>ZXSS</td>
        </tr>
         <tr>
            <td>SUNSHINEA</td>
            <td>SWQQ</td>
        </tr>
        <tr>
            <td>SUNSHINEA</td>
            <td>WSQQ</td>
        </tr>
        <tr>
            <td>SUNSHINEA</td>
            <td>TTWW</td>
        </tr>
        <tr>
            <td>SUNSHINEA</td>
            <td>YBSS</td>
        </tr>
    </tbody>
</table>

标签： jquerydatatable