Individual column searching (text inputs) my column width get altered after adding the tfoot

rbindu

My column width was perfect and was as per the column content and adjusted itself, however after I added Individual column searching (text inputs) given in the example in this website the search got enabled below the table for my coumns. But I found when that my coumn width altered and it of uniform width and table is very big now.

My code,

<?php require APPROOT . '/views/inc/header.php'; ?>
<section style="background-color: aqua ;">
  <?php flash('post_message'); ?>
  <div class="row ">
    <div class="col-md-6">
      <h1>Audit Packs</h1>
    </div>
    <div class="col-md-6">
      <a href="<?php echo URLROOT; ?>/posts/add" class="btn btn-primary pull-right">
        <i class="fa fa-pencil"></i> Add <abbr title="Add items in Pack">Pack</abbr>
      </a>
    </div>
  </div>
  </section>

<form action="<?php echo URLROOT; ?>/posts" method="post">
<button type="submit" value="Delete" name="delete_multiple_data" class="btn btn-danger pull-right">Delete Multiple Items</button>
<div class="table-responsive-md">
<table  id="mtab"class="display table-striped table-bordered" style="width:100%">
  
 <thead class="thead-dark">
 <tr class="table-active">
                       
                        <th>#</th>
                        <th>ID</th>
                        <th>Pack No</th>
                        <th>Pack Name</th>
                        <th>System Type</th>
                        <th>Document Type</th>
                        <th>Chosen Type</th>
                        <th>Files</th>
                        <th>Select</th>
                                        
 </tr>
 </thead>

<?php $n =0; ?>
<tbody> 

<?php foreach($data['posts'] as $post) : ?>  
<?php $n=$n+1; ?>    
  
      <tr>
      <td><?php echo $n; ?></td>
      <td><?php echo $post->id; ?></td>
      <td><?php echo $post->pckno; ?></td>
      <td><?php echo $post->pckname ?></td>
      <td><?php echo $post->Asystemtype; ?></td> 
      <td><?php echo $post->Adoctype; ?></td>
      <td><?php echo $post->Achoosetype; ?></td>      
      <td><a href="files/<?php echo $post->Afile1; ?>"><?php echo $post->Afile1; ?></a>
      <a href="files/<?php echo $post->Afile2; ?>"><?php echo $post->Afile2; ?></a>
      <a href="files/<?php echo $post->Afile3; ?>"><?php echo $post->Afile3; ?></a>
      <a href="files/<?php echo $post->Afile4; ?>"><?php echo $post->Afile4; ?></a></td>
      <td><input type="checkbox" name="delete[]" value="<?php echo $post->id; ?>"></td>
      </tr>
           
  <?php endforeach; ?>
  </tbody>
  <tfoot>
 <tr class="table-danger">
                       
                        <th>#</th>
                        <th>ID</th>
                        <th>Pack No</th>
                        <th>Pack Name</th>
                        <th>System Type</th>
                        <th>Document Type</th>
                        <th>Chosen Type</th>
                        
                                        
 </tr>
 </tfoot>

        </table>
         </div>
        </form>
<?php require APPROOT . '/views/inc/footer.php'; ?>

I have added this code in my footer before </body>.

// DataTable
    var table = $('#mtab').DataTable({
        initComplete: function () {
            // Apply the search
            this.api().columns().every( function () {
                var that = this;
 
                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        }
    });
 
} );

Please help

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

rbindu

My column width was perfect and was as per the column content and adjusted itself, however after I added Individual column searching (text inputs) given in the example in this website, the search got enabled below the table for my columns, however I found that my column width altered and it of uniform width and table is very big now. I don't know how to auto adjust the column width after enabling the column search filter

My code,

    <?php require APPROOT . '/views/inc/header.php'; ?>
    <form action="<?php echo URLROOT; ?>/posts" method="post">
    <button type="submit" value="Delete" name="delete_multiple_data" class="btn btn- 
    danger pull-right">Delete Multiple Items</button>
    <div class="table-responsive-md">
    <table  id="mtab"class="display table-striped table-bordered" style="width:100%">

 * <thead class="thead-dark">
 *<tr class="table-active">
               * <th>#</th>
        *<th>ID</th>
                *<th>Pack No</th>
        * <th>Pack Name</th>
                * <th>System Type</th>
                *<th>Document Type</th>
        *<th>Chosen Type</th>
                 *<th>Files</th>
               * *th>Select</th>
*</tr>
* </thead>

<?php $n =0; ?>
<tbody> 
<?php foreach($data['posts'] as $post) : ?>  
<?php $n=$n+1; ?>    
        <tr>
      <td><?php echo $n; ?></td>
      <td><?php echo $post->id; ?></td>
      <td><?php echo $post->pckno; ?></td>
      <td><?php echo $post->pckname ?></td>
      <td><?php echo $post->Asystemtype; ?></td> 
      <td><?php echo $post->Adoctype; ?></td>
      <td><?php echo $post->Achoosetype; ?></td>      
      <td>
        <?php echo $post->Afile1; ?>
    <?php echo $post->Afile2; ?>
     <?php echo $post->Afile3; ?>
      <?php echo $post->Afile4; ?>
     </td>
      <td><input type="checkbox" name="delete[]" value="<?php echo $post->id; ?>"></td>
      </tr>
           
  <?php endforeach; ?>
  </tbody>
  *<tfoot>
 <tr class="table-danger">
   <th>#</th>
   <th>ID</th>
   <th>Pack No</th>
    <th>Pack Name</th>
    <th>System Type</th>
     <th>Document Type</th>
     <th>Chosen Type</th>
 </tr>
 *</tfoot>
 </table>
 </div>
</form>
<?php require APPROOT . '/views/inc/footer.php'; ?>

Also one more issue now is my multiple delete row button is not working.As soon as I click select checkbox all my data in table disappears.
So please help for
1) Adjusting the column width (auto)
2) Allowing me to select my table rows so that I can delete them

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

See if this thread answers your question.

Kevin