Footer search is not working when some of the footer column search is not required.

Footer search is not working when some of the footer column search is not required.

resurresur Posts: 3Questions: 1Answers: 0
edited July 2017 in Free community support

Hi,

I have 9 columns in my data table. i want to enable the footer search and top search to look for content only in the 3 columns as others are constant static text. Other 6 columns are not required for search. If i add footer search for other column which is not necessary for me it works for both top search and footer search. If i remove the footer search for the 6 columns, both top search and footer search doesn't work.

Uploaded the html file in https://ufile.io/ovavb

and pasted below as well.

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

 
    <meta charset=utf-8 />
<!--
Created using JS Bin
http://live.datatables.net

Copyright (c) 2017 by anonymous (http://live.datatables.net/hocihiso/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
    <title>DataTables - JS Bin</title>
  
<style id="jsbin-css">
tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }
</style>
</head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Date</th>
            <th>Title</th>
            <th>Minister</th>
            <th>Watch</th>
            <th>Listen</th>
            <th>Mp3</th>
            <th>PDF</th>
            <th>CD</th>
            <th>DVD</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Date</th>
            <th>Title</th>
            <th>Minister</th>

          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>2011</td>
            <td>The Test1</td>
            <td>Bro.Test1</td>
            <td><a href="">Watch</a></td>
            <td><a>Listen</a></td>
            <td><a>Mp3</a></td>
            <td><a>PDF</a></td>
            <td>CD</td>
            <td><a >DVD</a></td>
          </tr>
          <tr>
            <td>2012</td>
            <td>The Test2</td>
            <td>Bro.Test2</td>
            <td><a >Watch</a></td>
            <td><a>Listen</a></td>
            <td><a>Mp3</a></td>
            <td><a>PDF</a></td>
            <td><a>CD</a></td>
            <td><a>DVD</a></td>
          </tr> 

        </tbody>
      </table>
    </div>
  <script>
$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
</script>
</body>
</html>

Please kindly help me on how to fix it

Thanks.

Answers

  • resurresur Posts: 3Questions: 1Answers: 0

    Does anybody have any solution to this problem?

This discussion has been closed.