Implementation Phase

User Interface

Program Code

Filter Listings

<p class="p-view" >

<button class="btn-primary" id="getAll">Show All Listings</button></p>

<div class="input-group">

<p class="p-view">Show listings with <input type="number" id="beds" class="txt"> Beds,

<input type="number" id="baths" class="txt"> Baths,

Price <select name="priceSelect">

<option value="=">=</option>

<option value=">">></option>

<option value="<"><</option>

</select>

<input type="number" id="price" placeholder="Price">

<div class="input-group-append">

<button class="btn-primary" id="filter">

<span class="fa fa-search">GO</span>

</button>

</div>

</div>

</p>

Load Listing Data

$.ajax({

url: "Assets/jsp/getListing.jsp",

type: "POST",

dataType: "json"

}).done(function(results) {

console.log(results);

$('#dataTable').DataTable( {

destroy: true,

data: results,

columns: [

{data: 'address'},

{data: "unit"},

{data: "beds"},

{data: "baths"},

{data: "price"},

{data: "buildingID"},

{data: "link"}

]

} );

});

Physical Database Implementation