jQuery dataTable筛选器/搜索不起作用 [英] jquery dataTable filter/search not working

问题描述

我是jquery的新手，并且使用过jqueryData表，在搜索过程中遇到问题，
搜索适用于前两列(例如，如果我使用"QE5855"或3453457进行搜索，则工作正常)， 但是它没有搜索第三列(例如，如果我输入的美国"或美国"表未得到排序)，请帮帮我.

I am new to jquery and I have used the jqueryData Table, I am facing problem in during search,
Search is working for first two columns (ex., if I search using 'QE5855' or 3453457 its working fine), But its not searching for the third column (ex., if I enter 'United' or 'united states' table is not getting sorted) , Please help me.

<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>

推荐答案

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

I'm not sure which version of Datatable are you using but I hope this helps. I should to say that I didn't test it, so the example is just the main idea where I think the problem is.

在您的JS代码上，您可以指示要检索表上数据的来源，在这种情况下，我使用的是C#，因此我使用的是"Url.Action".您应该在sAjaxSource中进行指示.例子是这样的...

On your JS code you can indicate the source from you want to retrieve the data on the table, in this case I'm using C# so I use "Url.Action". You should to indicate that in sAjaxSource. Example is something like this...

 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子句，数据表应该能够自行处理搜索和过滤.

On aoColumns "mData" means the way than you al mapping the date that are you getting of your method so you should exactly the name of the var that contains that value in your model. After that you don't need to use a for clause and the datatable should to be able to handled the searching and filter for it self.

示例

  <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>

这篇关于jQuery dataTable筛选器/搜索不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！