how can i apply smartsearch filter on when checkbox is checked otherwise not?

tejas3006 · December 2014

My code look like this :

HTML CODE

<div id="mainContent">
    <div class="row">
        <div class="col-sm-11" style="margin-top:5px;margin-left:5px">
            <div class="panel panel-default">
                <div class="panel-heading"><center><b>Active Node</b></center></div>
                <div class="panel-body">
                    <div class="col-sm-12">
                        <table class="col-sm-12">
                            <tbody>
                                <tr id="filter_global">
                                    <td> <b> Smart Search :</b>
                                        <input type="checkbox" id="smartSearch">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-12">
                        <div class="table-responsive">
                            <table id="activeNodeList" class="table table-striped table-bordered table-hover text-center">
                                <thead>
                                    <th><b><center>IP Address&nbsp;&nbsp;</center></b></th>
                                    <th><b><center>Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</center></b></th>
                                    <th><b><center>MAC Address</center></b></th>
                                    <th><b><center>Serial</center></b></th>
                                    <th><b><center>Uptime</center></b></th>
                                    <th><b><center>Software Version</center></b></th>
                                    <th><b><center>Temperature&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</center></b></th>
                                    <th></th>
                                </thead>
                                <tbody id="myTable"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Script :

<script type="text/javascript" src=@routes.Assets.at("javascripts/bootstrap/plugins/dataTables/jquery.dataTables.js")></script>
    <script type="text/javascript" src=@routes.Assets.at("javascripts/bootstrap/plugins/dataTables/dataTables.search-highlight.js")></script>
    <script type="text/javascript">
        $(document).ready(function() {

        json = (@Html(jsonData)).nodes;
        while (node = json.pop()) {
        $('#activeNodeList tbody').append("<tr><td>" + node.ip_address + "</td><td><a href='/nodeByIndex/" + node.index + "'>" + node.name + "</a></td><td>" + node.mac_address + "</td><td>" + node.sr_no + "</td><td>" + node.uptime + "</td><td>" + node.software_version + "</td><td>" + node.temperature + "&deg; C</td><td><a href='/config/"+ node.ip_address +"' class='btn btn-outline btn-primary btn-xs' style='margin:0px;text-decoration:none'>" + "Configure" + "</a></td></tr>");
        }

    $(document).ready(function() {
        $('#activeNodeList').dataTable();
    });

    $('input[type="checkbox"]').change(function(event) {

        var isChecked = $('#smartSearch').is(':checked');
        if (isChecked == false)
        {
            alert(isChecked);
            $('#activeNodeList').dataTable ({
            "search": {"smart": false}
            "search": {"smart": false}
            });
        }
        else
        {
            $('#activeNodeList').dataTable ({
            "search": {"smart": true}
            });
        }
    });

    $('#activeNodeList').dataTable().fnSearchHighlighting();
    } );

    </script>

Here i want to do when my check box is checked then smartsearch will be on otherwise not. id for checkbox is "smartSearch".
Can you help me to do so ??

tejas3006 · December 2014

sorry for HTML CODE..actually it looks like this...

<html>
<head>
<title>Active node list</title>
</head>
<body>
<div id="mainContent">
    <div class="row">
        <div class="col-sm-11" style="margin-top:5px;margin-left:5px">
            <div class="panel panel-default">
                <div class="panel-heading"><center><b>Active Node</b></center></div>
                <div class="panel-body">
                    <div class="col-sm-12">
                        <table class="col-sm-12" border="2">
                            <tbody>
                                <tr id="filter_global">
                                    <td> <b> Smart Search :</b>
                                        <input type="checkbox" id="smartSearch">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-12">
                        <div class="table-responsive">
                            <table id="activeNodeList" class="table table-striped table-bordered table-hover text-center">
                                <thead>
                                    <th><b><center>IP Address&nbsp;&nbsp;</center></b></th>
                                    <th><b><center>Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</center></b></th>
                                    <th><b><center>MAC Address</center></b></th>
                                    <th><b><center>Serial</center></b></th>
                                    <th><b><center>Uptime</center></b></th>
                                    <th><b><center>Software Version</center></b></th>
                                    <th><b><center>Temperature&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</center></b></th>
                                    <th></th>
                                </thead>
                                <tbody id="myTable"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

tejas3006 · December 2014

<script type="text/javascript" src=@routes.Assets.at("javascripts/bootstrap/plugins/dataTables/jquery.dataTables.js")></script>
    <script type="text/javascript" src=@routes.Assets.at("javascripts/bootstrap/plugins/dataTables/dataTables.search-highlight.js")></script>
    <script type="text/javascript">
        $(document).ready(function() {

        json = (@Html(jsonData)).nodes;
        while (node = json.pop()) {
        $('#activeNodeList tbody').append("<tr><td>" + node.ip_address + "</td><td><a href='/nodeByIndex/" + node.index + "'>" + node.name + "</a></td><td>" + node.mac_address + "</td><td>" + node.sr_no + "</td><td>" + node.uptime + "</td><td>" + node.software_version + "</td><td>" + node.temperature + "&deg; C</td><td><a href='/config/"+ node.ip_address +"' class='btn btn-outline btn-primary btn-xs' style='margin:0px;text-decoration:none'>" + "Configure" + "</a></td></tr>");
        }

    $(document).ready(function() {
        $('#activeNodeList').dataTable();
    });

    $('input[type="checkbox"]').change(function(event) {

        var isChecked = $('#smartSearch').is(':checked');
        if (isChecked == false)
        {
            alert(isChecked);
            $('#activeNodeList').dataTable ({
            "search": {"smart": false}
            });
        }
        else
        {
            $('#activeNodeList').dataTable ({
            "search": {"smart": true}
            });
        }
    });

    $('#activeNodeList').dataTable().fnSearchHighlighting();
    } );

    </script>

tejas3006 · January 2015

i have done..!!!

<table class="col-sm-12">
     <tbody>
          <tr id="filter_global" class="col-sm-12">
               <td class="col-sm-6"> <b> Use Smart Search :</b>
                    <input type="checkbox" class="global_filter" id="global_smart">
              </td>
             <td align="center" class="col-sm-6"> <b> Search :</b>
                  <input type="text" class="global_filter" id="global_filter">
            </td>
        </tr>
     </tbody>
</table>


function filterGlobal () {
            $('#activeNodeList').DataTable().search(
                $('#global_filter').val(),
                $('#global_regex').prop('checked'),
                $('#global_smart').prop('checked')
            ).draw();
        }

$('#activeNodeList').dataTable( {
        "dom": '<"col-sm-12"<"col-sm-6"l>><"col-sm-12"t><"col-sm-12"i><"col-sm-12 text-center"p>',
        "search": {"smart": false},
        "columnDefs": [ { orderable: false, targets: [ -1 ] } ]
    } );

        $('input.global_filter').on( 'keyup click', function () {
            filterGlobal();
        } );

how can i apply smartsearch filter on when checkbox is checked otherwise not?

how can i apply smartsearch filter on when checkbox is checked otherwise not?

Answers

Howdy, Stranger!

Categories

DataTables

how can i apply smartsearch filter on when checkbox is checked otherwise not?

how can i apply smartsearch filter on when checkbox is checked otherwise not?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables