Filter results in datatable

0

I have a datatable that I filled with a JSON, which results in the prices of orders, I want to make that when using a select and a button you can filter the information according to the month of registration.

This is the table:

<table id='ejemplo1' class='table table-bordered table-striped'>
                            <thead>
                                <tr>
                                    <th>Resistencia</th>
                                    <th>Position</th>
                                    <th>M3</th>
                                    <th>Precio unitario ($)</th>
                                    <th>Costo total ($)</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Resistencia</th>
                                    <th>Position</th>
                                    <th>M3</th>
                                    <th>Precio unitario ($)</th>
                                    <th>Costo total ($)</th>
                                </tr>
                            </tfoot>
                        </table>

This is the function of datatable:

var table = $("#ejemplo1").DataTable({
            "ajax": "pruebas/ajax-grid-data.php",
            "columns": [
                { "data": "resistencia" },
                { "data": "m3" },
                { "data": "tiro" },
                { "data": "pu" },
                { "data": "pt" }
            ],
            "order": [[1, 'asc']]
        });

        // Add event listener for opening and closing details
        $('#ejemplo1 tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );

Here is where the JSON is generated:

<?php
function toMoney($val,$r=2)
{
error_reporting(E_ERROR | E_PARSE);
$n = $val; 
$c = is_float($n) ? 1 : number_format($n,$r);
$d = '.';
$t = ',';
$sign = ($n < 0) ? '-' : '';
$i = $n=number_format(abs($n),$r); 
$j = (($j = $i.length) > 3) ? $j % 3 : 0; 
return  $symbol.$sign .($j ? substr($i,0, $j) + $t : '').preg_replace('/(\d{3})(?=\d)/',"1" + $t,substr($i,$j)) ;
}
$conexion=mysqli_connect("localhost", "root", "", "pruebas_maps") or die ("Problemas con la conexion");
$requestData= $_REQUEST;
$sql = "SELECT *";
$sql.=" FROM registros2";
$query=mysqli_query($conexion, $sql) or die("ajax-grid-data.php: get PO");
$data = array();
while( $row=mysqli_fetch_array($query) ) {
$pu = toMoney($row["pu"]);
$pt = toMoney($row["m3"] * $row["pu"]);

$nestedData=array(); 

$nestedData["resistencia"] = $row["resistencia"];
$nestedData["m3"] = $row["m3"];
$nestedData["tiro"] = $row["tiro"];
$nestedData["pu"] = $pu;
$nestedData["pt"] = $pt;

$data[] = $nestedData;
}
$json_data = array("data" => $data);
echo json_encode($json_data);

And these are the elements to choose the month of registration:

<select id="month" name="month">
                                    <option value="Jan">Enero</option>
                                    <option value="Feb">Febrero</option>
                                    <option value="Mar">Marzo</option>
                                    <option value="Apr">Abril</option>
                                    <option value="May">Mayo</option>
                                    <option value="Jun">Junio</option>
                                    <option value="Jul">Julio</option>
                                    <option value="Aug">Agosto</option>
                                    <option value="Sep">Septiembre</option>
                                    <option value="Oct">Octubre</option>
                                    <option value="Nov">Noviembre</option>
                                    <option value="Dec">Diciembre</option>
                                </select>
                              <input type="button" id="tablesubmit" class='btn btn-success btn-sm' name="tablesubmit" value="Cargar" />

Thank you in advance for your answers.

    
asked by Carlos Roberto Luna Ochoa 27.06.2018 в 18:26
source

0 answers