javascript - jquery dataTable 过滤器/搜索不工作

Question

我是 jquery 的新手，我使用过 jqueryData 表，我在搜索过程中遇到问题，
搜索对前两列有效(例如，如果我使用“QE5855”或 3453457 搜索它工作正常)， 但它没有搜索第三列(例如，如果我输入“United”或“united states”表未排序)，请帮助我。

<table id="agentDetails">
    <tr style="">
        <th width="22%">User Id</th>
        <th width="20%">Parent Id</th>
        <th width="35%">Country</th>
    </tr>
    <%
        for(UserDataModel getEachEmpDetails:phoneIdSiteMappingList){
    %>
        <tr>
            <td> <div><%=getEachEmpDetails.getUserUid %> </div> </td> // data is like 'QE5855'
            <td><div><%=getEachEmpDetails.getParentUid %> </div> </td> //data is like '3453457'
            <td><div><%=getEachEmpDetails.getCountry %> </div> </td>// data is like 'United States'
        </tr>   
    <%
        }
    <%

<script type="text/javascript">
    $( document ).ready(function() {
        var table = $("#agentDetails").DataTable({
             "bSort": false, 
            "iDisplayLength": 10 ,
            "sPaginationType": "full_numbers",
            "bSearchable":true,
            "bPaginate": true,
                "bFilter": true,
                 "sDom": '<"top"fip>',
                 "bStateSave": false,
                "oLanguage": {
                    "sInfo": "Showing _START_ to _END_ of _TOTAL_ messages",
                    "sInfoEmpty": "Showing 0 to 0 of 0 messages",
                    "sEmptyTable": " ",
                    "sSearch": "&nbsp&nbsp&nbsp",
                    "oPaginate": {
                        "sPrevious": "<",
                        "sNext": ">",
                        "sFirst":"",
                        "sLast":""
                    },
                    dom: 'T<"clear">lfrtip',
                    tableTools: {
                        "sRowSelect": "single"
                    }
                }
        }); 

    });
<script>

Answer 1

我不确定您使用的是哪个版本的Datatable，但我希望这对您有所帮助。我应该说我没有测试它，所以这个例子只是我认为问题所在的主要思想。

在您的 JS 代码中，您可以指明要从中检索表中数据的来源，在本例中，我使用的是 C#，因此我使用“Url.Action”。您应该在 sAjaxSource 中指出这一点。例子是这样的......

 var oTable;
        $(function() {
            oTable = $('#agentDetails')
                .dataTable({
                "bServerSide": true,
                "bProcessing": true,
                "bSort": true,
                "sAjaxSource": "@Url.Action("Method")",
                "sPaginationType": "full_numbers",
                "bSearchable":true,
                "bFilter": true,
                "sDom": '<"top"fip>',
                "bInfo": true,
                "bLengthChange": false,
                "aoColumns": [
                    { "mData": "UserId" },
                    { "mData": "ParentId", "width": "22%", "bSortable": true},
                    { "mData": "Country", "width": "35%" },

                ],

        });

在 aoColumns 上，“mData”表示您映射方法获取的日期的方式，因此您应该准确地使用模型中包含该值的 var 的名称。之后您不需要使用 for 子句，数据表应该能够自行处理搜索和过滤。

例子

  <table id="agentDetails" >
                        <thead>
                            <tr>
                                <th>User Id</th>
                                <th>Parent Id</th>
                                <th>Country</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>

                            </tr>
                        </tbody>
 </table>