How to hide custom filter textbox on responsive mode?

How to hide custom filter textbox on responsive mode?

Shrikant2705Shrikant2705 Posts: 3Questions: 1Answers: 0

Hi,
I have below code with custom filter textbox in header, but on responsive mode textbox filters are not disappears, only header title set to display none. Please help!!

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>  
  <script>
        $(document).ready(function () {

            // Setup - add a text input to each footer cell
            $('#example thead tr:eq(1) th').each(function () {
                var title = $('#example thead tr:eq(0) th').eq($(this).index()).text();               
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');               
            });

            var table = $('#example').DataTable({
                "orderCellsTop": true,
                "responsive": true,
                "columnDefs": [
                                { "responsivePriority": 1, "targets": 0 },
                                { "responsivePriority": 2, "targets": -1 }
                                ]
            });
  
            //// Apply the search
            table.columns().every(function (index) {
                $('#example thead tr:eq(1) th:eq(' + index + ') input').on('keyup change', function () {
                    table.column($(this).parent().index() + ':visible')
                        .search(this.value)
                        .draw();
                });
            });
           
        })

    </script>
 <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Extn.</th>
                    <th>E-mail</th>
                </tr>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Extn.</th>
                    <th>E-mail</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger</td>
                    <td>Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                    <td>5421</td>
                    <td>t.nixon@datatables.net</td>
                </tr>
                <tr>
                    <td>Garrett</td>
                    <td>Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                    <td>8422</td>
                    <td>g.winters@datatables.net</td>
                </tr>
                <tr>
                    <td>Ashton</td>
                    <td>Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                    <td>1562</td>
                    <td>a.cox@datatables.net</td>
                </tr>
                <tr>
                    <td>Cedric</td>
                    <td>Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                    <td>6224</td>
                    <td>c.kelly@datatables.net</td>
                </tr>
                <tr>
                    <td>Airi</td>
                    <td>Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$162,700</td>
                    <td>5407</td>
                    <td>a.satou@datatables.net</td>
                </tr>
            </tbody>
        </table>

Answers

  • Shrikant2705Shrikant2705 Posts: 3Questions: 1Answers: 0

    Its looks like a bug for me.. Has anyone experienced the same or have implemented any solutions?

  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67

    not sure whats wrong with your code, but just saying that yadcf support responsive datatables out of the box, see second table in the showacase , play wit the page size to see it

    p.s

    reset the first column filter (press [x]) to see values...

  • Shrikant2705Shrikant2705 Posts: 3Questions: 1Answers: 0

    Hi
    thanks for reply and alternate solution.
    With my code, if you check with F12 developer option for responsiveness then it work as
    expected that means '+' sign appears in first column with details but columns which are hide in mobile view, their filter textbox still remains on same position. please check attached image on my post above.

    Thanks

  • emadinaemadina Posts: 6Questions: 2Answers: 1

    Hi,
    I solved this problem by implementing the workaround.
    Basically using the event listener of the responsive extension.
    Find the affected columns (the first thead), then copy the value to the same column index on the second thead (my custom filter).

    I gave the id to my second thead "#searchColumns".

    table.on( 'responsive-resize', function ( e, datatable, columns ) {
        var count = columns.reduce( function (a, b, index) {
          $("#searchColumns th:eq("+index+")").attr("style",$("#searchColumns").prev().find("th:eq("+index+")").attr("style"));
          return b === false ? a+1 : a;
        }, 0 );
      } );
    
This discussion has been closed.