CODEWITHSUNDEEP
jquerydatatables
La Carbonell
La Carbonell

Reputation: 2056

Datatable does not filter

I have a JQuery that does not filter at all, even I have the "bFilter" : true, when I init the table

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="">


<script type="text/javascript">
    $(document).ready(function() {

        var table = $('#manageDevicesTable').DataTable({
            "dom" : '<"top">rt<"bottom"lp><"clear">',
            "autoWidth" : false,
            "paging" : true,
            "bFilter" : true,
            "pageLength" : 20,
            "aaSorting" : [],
            "bSortCellsTop" : true,
            "columnDefs" : [ {
                "targets" : 'nosort',
                "orderable" : false
            }, ]
        });
    });
</script>



<head></head>


<body>


    <table id="manageDevicesTable" class="m-0">
        <thead>
            <tr>
                <th width="19%">Company name</th>
                <th width="15%">Mobile Number</th>
                <th width="20%">Application status</th>
                <th width="10%">App. submission date</th>
                <th width="15%">Criteria</th>
            </tr>

            <tr class="thefilters">

                <td><input name="" size="" maxlength="" id="" value=""
                    type="text" /></td>
                <td><input name="" size="" maxlength="" id="" value=""
                    type="text" /></td>

                <td><select id="statusSelectId"
                    onchange="javascript:newWindowLocationAssignStatus(this.value);">
                        <option value="all">ALL</option>




                        <option value="AWARDED">AWARDED</option>






                        <option value="NO_PENDING_OPERATIONS">&nbsp;&nbsp;No
                            pending operations</option>







                        <option value="IN_PROGRESS_EXTENSION">&nbsp;&nbsp;With an
                            In Progress Extension</option>







                        <option value="WAITING_FOR_WITHDRAW">&nbsp;&nbsp;Waiting
                            for Ecolabel License Withdrawal</option>







                        <option value="MODIFICATION_IN_PROGRESS">&nbsp;&nbsp;With
                            modification in progress</option>







                        <option value="RENEWAL_REQUEST">&nbsp;&nbsp;With a
                            pending renewal request</option>








                        <option value="CANCELLED">CANCELLED</option>






                        <option value="MOBILE_CANCELLED_EXPIRY_CRITERIA">&nbsp;&nbsp;Expiry
                            of License Criteria</option>







                        <option value="MOBILE_CANCELLED_HOLDER_WITHDRAWAL">&nbsp;&nbsp;Award
                            Holder Withdrawal</option>







                        <option value="MOBILE_CANCELLED_NON_PAYMENT_FEES">&nbsp;&nbsp;Non
                            Payment of Fees</option>







                        <option value="MOBILE_CANCELLED_OTHER">&nbsp;&nbsp;Other</option>








                        <option value="IN_PROGRESS">IN PROGRESS</option>







                        <option value="REFUSED">REFUSED</option>




                </select></td>

                <td><input name="" size="" maxlength="" id="" value=""
                    type="text" /></td>
                <td><input name="" size="" maxlength="" id="" value=""
                    type="text" /></td>

            </tr>

        </thead>
        <tbody>

            <tr id="20562"
                onclick="window.location.href = '/digsaw/devices/application/20562'">

                <td>Total Lubrifiants</td>

                <td><font style="text-transform: uppercase;"> ANDROID
                </font></td>


                <td bgcolor="#CDFBD0"><font style="text-transform: uppercase;">
                        <b>AWARDED</b>
                </font> <br> <font style="text-transform: lowercase;"> With an
                        In Progress Extension </font></td>
                <td>27/9/2016</td>

                <td>N/A</td>

            </tr>

            <tr id="1429"
                onclick="window.location.href = '/digsaw/devices/application/1429'">

                <td>NOVAMEX</td>

                <td><font style="text-transform: uppercase;"> IOS
                </font></td>


                <td bgcolor="#CDFBD0"><font style="text-transform: uppercase;">
                        <b>AWARDED</b>
                </font> <br> <font style="text-transform: lowercase;"> With an
                        In Progress Extension </font></td>
                <td>15/10/2014</td>

                <td><font style="text-transform: uppercase;">
                        WINDOWS </font></td>

            </tr>

        </tbody>
    </table>




</body>
</html>

Upvotes: 0

Views: 73

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58860

You need to include f character in value for dom option to enable search bar. For example:

"dom": '<"top">frt<"bottom"lp><"clear">'

Other filters in your header would require additional programming, see Individual column searching (select inputs) and Individual column searching (text inputs).

Upvotes: 2

Related Questions