使用ajax过滤

I'm a FileMaker programmer trying to port a database across to the web using PHP their API. I've got my php page working, retrieving and displaying the correct data from my search, however I would like to filter the results on my page every time my user picks a checkbox (Apple, Microsoft etc) without hitting the submit button. I know I need to use ajax to perform this, however can I inject the ajax into this page below or am I now going to have to break down the page into various smaller files, php and js files?

Most of the samples I have found are json based, which do filtering client side. FileMaker returns an odd type array with PHP which requires further processing to get into json format. I'm ideally looking for a way to just post back the form everytime my user click on a checkbox, which I think maybe simpler if possible?

<?php require_once('../db.php'); 

if(isset($_REQUEST['search'][0]))
{

$find = $fm->newCompoundFindCommand('Data');
$request1 = $fm->newFindRequest('Data');
if(isset($_REQUEST['search'][1])){ $request2 = $fm->newFindRequest('Data'); }
if(isset($_REQUEST['search'][2])){ $request3 = $fm->newFindRequest('Data'); }

$request1->addFindCriterion('Company',$_REQUEST['search'][0]);
if(isset($_REQUEST['search'][1])){ $request2->addFindCriterion('Company',$_REQUEST['search'][1]); }
if(isset($_REQUEST['search'][2])){ $request3->addFindCriterion('Company',$_REQUEST['search'][2]); }

$find->add(1,$request1);
if(isset($_REQUEST['search'][1])){ $find->add(2,$request2); }
if(isset($_REQUEST['search'][2])){ $find->add(3,$request3); }

$result = $find->execute(); 

} else {

$request = $fm->newFindCommand('Data');

$request->addFindCriterion('Company','*');
$result = $request->execute();

}


?>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div id="filters">
    <form action="data_table.php" method="post">
        <input class="category" id="check1" name="search[]" type="checkbox" value="Apple"> 
        <label for="check1">Apple</label> 
        <input class="category" id="check2" name="search[]" type="checkbox" value="Google"> 
        <label for="check2">Google</label> 
        <input class="category" id="check3" name="search[]" type="checkbox" value="Microsoft"> 
        <label for="check3">Microsoft</label> <input type="submit" value="Submit">
    </form>
</div>
<table border="0" class="table table-striped" width="100%">
    <thead>
        <tr>
            <th>Company</th>
        </tr>
    </thead><?php if(!FileMaker::isError($result)) {?>
    <tbody class="searchable">
        <?php foreach($result->getRecords() as $row){ ?>
        <tr>
            <td><?php echo $row->getField('Company'); ?></td>
        </tr><?php } ?>
    </tbody><?php } ?>
</table><!-- end row -->
</body>
</html>

Let me try and break down you code part.

$request->addFindCriterion('Company','*');
$result = $request->execute();

At this point you have the results after applying the query. Just encode it in json like

echo json_encode($result);

this is your api endpoints. You will be making all ajax queries over here. Move all html content to a separate file.

Now this part of code

<table border="0" class="table table-striped" width="100%">
    <thead>
        <tr>
            <th>Company</th>
        </tr>
    </thead><?php if(!FileMaker::isError($result)) {?>
    <tbody class="searchable">
        <?php foreach($result->getRecords() as $row){ ?>
        <tr>
            <td><?php echo $row->getField('Company'); ?></td>
        </tr><?php } ?>
    </tbody><?php } ?>
</table><!-- end row -->

becomes obsolete as you might have guessed for obvious reasons. There is no $result in this file. It is just a static html. You need to make ajax request in this file to the api point we just used above. You will get the response in json. Populate it into a table. Similarly if the users has other search parameters, make ajax request with proper search and repopulate the table in javascript.

Which part is simpler ?

That purely depends on the kind of application you are building. If it is somewhat along the lines of Single Page app i would suggest javascript filtering else go for filter in api.

Remember javascript does not have proper sql database and they are implementations of localstorage so the execution might be long, but that is a tradeoff people make for persistant apps.