Search on php table with javascript or jQuery

Question

I have a big list with mikrotikm(router) nat rules, in one table, and now I want a dynamic search filter to search the list from name, something like this:

Demo

I tried with their code but doesn't work.

I use other codes but not working..

This is the full code:

<html>
<head>
<script type='text/javascript' language='javascript' defer>
$("#search").on("keyup paste", function() {
    var value = $(this).val().toUpperCase();
    var $rows = $("table tr");

    if(value === ''){
        $rows.show();
        return false;
    }

    $rows.each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var column1 = $row.find("td:first a").html().toUpperCase();
            var column2 = $row.find("td").eq(1).text().toUpperCase();

            if ((column1.indexOf(value) > -1) || (column2.indexOf(value) > -1)) {
                $row.show();
            }
            else {
                $row.hide();
            }
        }
    });
});
</script>

<style type='text/css'> 
table tr td{
border:1px solid #000
}
</style>

</head>
<body>
    <label for="search">Search:</label> <input type="text" id="search" value=""/>


<?php
use PEAR2\Net\RouterOS;
// require_once 'pear2\src\PEAR2\Autoload.php';
require_once 'PEAR2_Net_RouterOS-1.0.0b4.phar';

//Conexion a Mikrotik
                            //IP MIKROTIK   //Usuario   //Password
$client = new RouterOS\Client('62.82.4.222', 'victor', 'victor');




//Reiniciar PPP

$remove=new RouterOs\Request("/ppp/active/remove");
$remove->setArgument('numbers', $itemID); 


// Tabla
echo "<table align='center' id='natlist'><form action='' method='POST'>";
echo "<thead><tr bgcolor='#D8D8D8'><th align=left size=3>Nombre</th><th align=left size=3>Servicio</th><th size=3>Tiempo Activo</th><th align=left size=3>Direccion</th><th align=left size=3>Reiniciar</th></tr></thead><tbody>";

//Actualizar pagina
//echo "<meta http-equiv='refresh' content='30'>";


$ppps = $client->sendSync(new RouterOS\Request('/ppp/active/print'))->getAllOfType(RouterOS\Response::TYPE_DATA);



$interfaceQuery = RouterOS\Query::where('name', $ppps->getArgument('name'));
while ($ppp = $ppps->next()) {
    $interfaceQuery->orWhere('name', $ppp('name'));
}

$activeInterfaces = $client->sendSync(new RouterOS\Request('/interface/pppoe-server/print', $interfaceQuery))->getAllOfType(RouterOS\Response::TYPE_DATA)->toArray();


foreach ($ppps as $ppp) {
  $id = $ppp('.id');
  $service = '';
  foreach ($activeInterfaces as $index => $pppInterface) {
    if ($pppInterface('name') === $ppp('name')) {
      $service = $pppInterface('service');
      break;
    }
 }
  echo "<tr>";
 echo "<td class='nombre'>". $ppp('name') ."</td>";
  echo "<td>" . $service . "</td>";
  echo "<td>" . $ppp('uptime'). "</td>";
  echo "<td>". $ppp('address') ."</td>"; 
  echo "<td><button type='submit' value='{$id}' name='act[remove]' >Reiniciar</td></tr>";
} 

echo  "</form></tbody></table>";

?>

</body>
</html>

Use DataTables - it was designed for this exactly. No point in re-inventing the wheel. — Rory McCrossan
– Rory McCrossan, Commented Oct 30, 2013 at 12:02
In looking at the example that you provided, the line $("#personas tr td.nombre").not(":Contains('"+search+"')").parent().hide(); is what is hiding the rows that do not contain the text you are looking for. Do you want to use this method or loop through each row with $.each()? — JoeFletch
– JoeFletch, Commented Oct 30, 2013 at 12:16
I dont know use javascript :S I just copy and paste the script and modify the necesesary :S — Vitorsinc
– Vitorsinc, Commented Oct 30, 2013 at 12:17

Vishal · Accepted Answer · 2013-10-30 12:11:01Z

1

use Jquery datatable .It is simple and easy to implement.

answered Oct 30, 2013 at 12:11

Vishal

5531 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vitorsinc Over a year ago

I will try, but i dont know how to add it, i just downloaded it :S

Collectives™ on Stack Overflow

Search on php table with javascript or jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related