How to disable Jquerydatatables auto search?

Asked

Viewed 2,284 times

2

I am using Jquery Datatables, and need to remove the auto search that it has, leaving a "Search" button beside

Someone’s already done it?

jquery

  • It wasn’t really disabling, but as it bothered me the number of requests it generated with each keyup, so I added a timeout, if it serves you I put as answer.

  • Jader, my idea was the following, remove the current search, add a new input with "Search" button and set the filter in onClick from that button

  • Find the function: function _fnFeatureHtmlFilter ( oSettings ) is all there... (in the full version, because in the minified changes the function names)

  • @Jader has how to put this timeout in the datatable search?

3 answers

2

You can use the bfilter: 

 $(document).ready(function() {
        $('#example').dataTable({ "bFilter": false});
    });

Another way to do this is by using'sDom':’t'. Where parameter’t' means "the table", it removes header, footer, field search, pagination and other components. Leaving only the table.

Take a look at this example.

html:

<html>
    <title>exemplo</title>
        <head>          
            <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
            <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">                
        </head>
    <body>
        <div class="container">
        <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
            <thead>
                <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Presto</td>
                    <td>Opera 9.0</td>
                    <td>Win 95+ / OSX.3+</td><td>-</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Presto</td>
                    <td>Opera 9.0</td>
                    <td>Win 95+ / OSX.3+</td><td>-</td>
                    <td>A</td>
                </tr>
            </tbody>
        </table>
        </div>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js">
    </script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
    </body>
</html>

js:

$(document).ready(function() {
    $('#example').dataTable({"sDom":"t"});
});

Example in jsfiddle:

http://jsfiddle.net/ewertonorg/t4meLqrp/3/

You can see a list of parameters in the link: http://legacy.datatables.net/usage/options#sDom

  • 1

    Hello. I see your answer is correct. But it would be nice also to put in the answer what this parameter means in the construction of the table (and even a reference to its documentation). The answer gets more complete and makes it easier to help less experienced users (and you gain more positive votes!). :)

  • 1

    Thanks for the tip Luiz Vieira. I made a small change in the answer and I hope it was easier to understand.

2


Removal of search and other inputs from Jquery Datatables is done through the dom attribute

I solved my problem using this:

 "dom": '<"top">rt<"bottom"ip><"clear">'

It only removes Input and not search functionality

For more details, see Documentation

-1

$(document).ready(function () { $('#example1').DataTable({ "filter": false }); });

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.