JavaScript - filtros de busquda individual en cabezera datatables [miniAporte]

   
Vista:
Imágen de perfil de miguel

filtros de busquda individual en cabezera datatables [miniAporte]

Publicado por miguel (17 intervenciones) el 17/10/2017 14:36:18
Este es mi codigo de ejemplo


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<div class="table-responsive">
             <table id="employee_data" class="table table-striped table-bordered">
                  <thead>
                       <tr>
 
                        <td>MSDS LINK</td>
						<td>Num Spec</td>
						<td>Substance</td>
						<td>Casnum</td>
						<td>Status Reach</td>
						<td>Date Prohibition</td>
					</tr>
	               </tr>
					 <tfoot style="display: table-header-group;">
					 <tr>
					                        <th >MSDS LINK</th>
						<th>Num Spec</th>
						<th>Substance</th>
						<th>Casnum</th>
						<th>Status Reach</th>
						<th>Date Prohibition</th>
 
				 </tr>
					</tfoot>
                  </thead>
                  <?php
                  while($row = mysqli_fetch_array($result))
                  {
                       echo '
                       <tr>

                            <td> <a href="'.$row["Hiperlink"].' ">'.$row['Hiperlink'].'</a></td>
                            <td>'.$row["name_vendor"].'</td>
                            <td>'.$row["Name_contact"].'</td>
                            <td>'.$row["Part_number"].'</td>
							<td>'.$row["second_number"].'</td>
							<td>'.$row["lado_parte"].'</td>
							<td>'.$row["Pack_ml"].'</td>
							<td>'.$row["Usein_prod"].'</td>
							<td>'.$row["status_part"].'</td>
							<td>'.$row["num_spec"].'</td>
							<td>'.$row["name_sus"].'</td>
							<td>'.$row["casnum_sus"].'</td>
							<td>'.$row["status_sus"].'</td>
							<td>'.$row["Prohi_sus"].'</td>
                       </tr>
                       ';
                  }
                  ?>
             </table>
        </div>
   </div>
<script>
$(document).ready(function() {
    $('#employee_data').DataTable( {
        "lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]]
    } );
} );
</script>
  <script>
 
$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#employee_data tfoot th').each( function () {
 
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Filter by " />' );
 
    } );
 
    // DataTable
    var table = $('#employee_data').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
 
} );
</script>

este es mi codigo gracias por su ayuda, cuando lo solucione posteo la respuesta!.......


ya lo resolvi al parecer hay muchas maneras pero la mas facil es AGREGAR <tfoot style="display: table-header-group;"> esta linea en el tfoot de nuestra tabla y eso es todo asi no tenemos que modificar el js de dataTables jaja
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Revisar política de publicidad