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

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

rbindurbindu Posts: 4Questions: 2Answers: 0
edited January 14 in Free community support

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.

Answers

  • rbindurbindu Posts: 4Questions: 2Answers: 0
    edited January 14

    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.

  • colincolin Posts: 10,503Questions: 0Answers: 1,773

    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

  • kthorngrenkthorngren Posts: 11,404Questions: 25Answers: 2,640

    See if this thread answers your question.

    Kevin

Sign In or Register to comment.