Filters in datatable do not appear

Asked

Viewed 254 times

0

Good morning, I’m trying to use a datatable filters but the filters disappear when this code enters:

<td style="display:none;" class="id_<?=$row['id']?>"><?php echo $row['id']; ?></td>
<td class="text-right">
<input name="comprar" id="comprar" value="Comprar" class="comprar btn btn-success" type="submit" coluna="<?=$row['id']?>"></input>                   
</td>

FILTROS DA DATATABLE SOMEM

When I remove the code above, the filters appear again: FILTROS VOLTAM A APARECER SEM O CÓDIGO

I need the filters to appear without having to remove the code above.

Code (filters do not appear) :

<div class="content">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">COMPRAR PRODUTOS :: </h4>
              </div>
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                  <thead>
                    <tr>
          <th>ID</th>

           <th>PREÇO</th>
           <th>VENDEDOR</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
          <th>ID</th>

          <th>PREÇO</th>
          <th>VENDEDOR</th>
                    </tr>
                  </tfoot>

        <tbody>


                                <?php foreach ($resultado as $row) { ?>
                <tr>

                <td style="display:none;" class="id_<?=$row['id']?>"><?php echo $row['id']; ?></td>

                    <td class="seis_<?=$row['id']?>"><?php echo substr($row['cc'], 0, 6); ?></td>

                    <td class="preco_<?=$row['id']?>"><?php echo $row['PRECO']; ?></td>
                    <td class="vendedor_<?=$row['id']?>"><?php echo $row['Vendedor']; ?></td>

                    <td class="text-right">
                        <input name="comprar" id="comprar" value="Comprar" class="comprar btn btn-success" type="submit" coluna="<?=$row['id']?>"></input>                   
                    </td>

                </tr>
            <?php } ?>

Code (filters showing up):

 <div class="content">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">COMPRAR PRODUTOS ::</h4>
              </div>
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                </div>
                <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                  <thead>
                    <tr>
          <th>ID</th>

           <th>PREÇO</th>
           <th>VENDEDOR</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
          <th>ID</th>

          <th>PREÇO</th>
          <th>VENDEDOR</th>
                    </tr>
                  </tfoot>

        <tbody>


                                <?php foreach ($resultado as $row) { ?>
                <tr>



                    <td class="seis_<?=$row['id']?>"><?php echo substr($row['cc'], 0, 6); ?></td>

                    <td class="preco_<?=$row['id']?>"><?php echo $row['PRECO']; ?></td>
                    <td class="vendedor_<?=$row['id']?>"><?php echo $row['Vendedor']; ?></td>



                </tr>
            <?php } ?>

Javascript code:

<script>
    $(document).ready(function() {
      $('#datatable').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
          [10, 25, 50, -1],
          [10, 25, 50, "All"]
        ],
        responsive: true,
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search records",
        }

      });

      var table = $('#datatable').DataTable();

      // Edit record
      table.on('click', '.edit', function() {
        $tr = $(this).closest('tr');

        var data = table.row($tr).data();
        alert('You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.');
      });

      // Delete a record
      table.on('click', '.remove', function(e) {
        $tr = $(this).closest('tr');
        table.row($tr).remove().draw();
        e.preventDefault();
      });

      //Like record
      table.on('click', '.like', function() {
        alert('You clicked on Like button');
      });
    });
  </script>
php javascript
  • 1

    To start, take the <input... the </input> closure from the tag. This usually causes problems, in the initial frame where you noted '<input name="buy" id="buy" value="buy" class="buy btn btn-Success" type="Submit" column="<?= $Row['id']? >"></input>'. You should only get <input name="buy" id="buy" value="buy" class="buy btn btn-Success" type="store" column="?= $Row['id']?>" />

1 answer

1


Gives error because the number of columns td is different from the number of th, Datatables does not render.

To fix this just add two more th in the thead and tbody: one at the beginning (with style="display: none";) and another void at the end.:

$(document).ready(function() {
      $('#datatable').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
          [10, 25, 50, -1],
          [10, 25, 50, "All"]
        ],
        responsive: true,
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search records",
        }

      });

      var table = $('#datatable').DataTable();

      // Edit record
      table.on('click', '.edit', function() {
        $tr = $(this).closest('tr');

        var data = table.row($tr).data();
        alert('You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.');
      });

      // Delete a record
      table.on('click', '.remove', function(e) {
        $tr = $(this).closest('tr');
        table.row($tr).remove().draw();
        e.preventDefault();
      });

      //Like record
      table.on('click', '.like', function() {
        alert('You clicked on Like button');
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<div class="content">
   <div class="row">
      <div class="col-md-12">
         <div class="card">
            <div class="card-header">
               <h4 class="card-title">COMPRAR PRODUTOS ::</h4>
            </div>
            <div class="card-body">
               <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
               </div>
               <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                  <thead>
                     <tr>
                        <th style="display:none;"></th>
                        <th>ID</th>
                        <th>PREÇO</th>
                        <th>VENDEDOR</th>
                        <th></th>
                     </tr>
                  </thead>
                  <tfoot>
                     <tr>
                        <th style="display:none;"></th>
                        <th>ID</th>
                        <th>PREÇO</th>
                        <th>VENDEDOR</th>
                        <th></th>
                     </tr>
                  </tfoot>
                  <tbody>
                     <tr>
                        <td style="display:none;" class="id_<?=$row['id']?>"><?php echo $row['id']; ?></td>
                        <td class="seis_<?=$row['id']?>">a</td>
                        <td class="preco_<?=$row['id']?>">b</td>
                        <td class="vendedor_<?=$row['id']?>">c</td>
                        <td class="text-right">
                           <input name="comprar" id="comprar" value="Comprar" class="comprar btn btn-success" type="submit" coluna="<?=$row['id']?>">
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.