Filters in datatable do not appear

Question

Filters in datatable do not appear

Navigation

#1 by (1 votes)

0

Good morning, I'm trying to use the filters of a datatable but the filters disappears when this code comes in:

<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>

WhenIremovetheabovecode,thefiltersreappear:

Ineedthefilterstoappearwithouthavingtoremovetheabovecode.

Code(filtersdonotappear):

<divclass="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):

 <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

asked by anonymous 11.11.2018 / 15:48

1 answer

I can not return the message saying that the values form a right triangle Rails and Iugu: Iugu :: Subscription.create

score 1 · Accepted Answer

It gives an error because the number of columns td is different from the number of th , so Datatables does not render.

To correct this, add two more th in thead and tbody : one at the beginning (with style="display: none"; ) and another empty 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><scriptsrc="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><divclass="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>