jquery dataTable过滤/搜索不起作用

时间:2016-06-10 15:05:27

标签: javascript jquery jquery-ui jquery-plugins datatables

我是jquery的新手,我使用了jqueryData表,我在搜索过程中遇到问题,
搜索适用于前两列(例如,如果我使用' QE5855'或3453457搜索其工作正常),  但是它没有搜索第三栏(例如,如果我进入“联合国”或“美国的桌子”并没有排序),请帮助我。

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

1 个答案:

答案 0 :(得分:3)

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

在你的JS代码中,你可以指明你想要检索表格数据的来源,在这种情况下,我使用C#,所以我使用&#34; Url.Action&#34;。你应该在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&#34; mData&#34;意味着你绘制方法的日期,而不是映射你获得方法的日期,因此你应该准确地知道模型中包含该值的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>