A little help to get started

patch2112

Hello,

This looks like a perfect tool for what I'm trying to build, but I'm very new to jQuery (php developer) and seems what I'm looking for might be a bit out of the box. Can someone help point me in the right direction?

What I'm building is a Classified Ads website, ie kinda like Craigslist (with key differences). On our homepage, we want it to be very easy for people to search for ads, where the results show up instantly in a table as they select their criteria.

The complication comes in that we need to be able to filter by multiple fields, each that will have different processing than the others...

- Keywords: Text box that searches in two columns (ad title and description)
- Category: Matches to one category column
- City and State: Each matches to one column
- Zip Code with Miles Range: Person selects either just a zip code, which directly matches to one column, OR they can choose a range to go with it, ie 5 miles, which then figures out all the zip code matches (I have the match functionality built in PHP) and matches to any of the matching zip codes in the zip code column.

Further, we need all these things to work simultaneously. For example, some starts typing 'ford' into the keywords box and all the results now start showing any ad with 'ford' in the title or description. They then enter a zip code, so the results now update to show only ads with 'ford' in the the title or description PLUS only in that zip code. If they then choose a category or zip code range, then it updates again with that information.

I'm hoping that this might not be that hard to implement with the right direction, but am also open to paying someone to help get this set-up faster and with less headaches.

Need to get this set-up as quickly as possible, so I truly appreciate any help or guidance.

Thanks a million,

Philip Light

patch2112

More Info:

- Some advice on the Data Source would be helpful. We have close to 10k ads already from just a few months and it keep growing faster and faster. Doesn't seem to make sense to output all of those ads as a huge table in the HTML. The ads are stored in MySQL. What would be the best way to set this up? Perhaps I should do server-side and use PHP to do things like finding the right zip code ranges, etc?

- When people first come to the site, it needs to show the most recent ads for them to get started.

- We have different 'classes' of ads, ie free and premium. I assume I can just output a different class for the TR to style them different? (premiums stand off the page more than free ads).

- Some ads have images (not all). We need to show a small thumbnail in the table, of their uploaded image if available, or our standard default image (our logo) otherwise. I assume I just put this in the table and all will be good?

- The image and the item title need to be clickable links that takes the visitor to that particular ad. Just assuming again I'd drop those into the table?

Thanks so much!

allan

Hi Philip,

Thanks for all the details - it's really helpful to know how it's going to be used, and sounds like an ideal application of DataTables! I would fully recommend using server-side processing with your table ( example of this in action: http://datatables.net/examples/data_sources/server_side.html ). 7500 rows isn't much for server-side processing, but it is too much for client-side processing if you want it to be snappy - particularly in IE. Server-side processing will cope will many millions of rows (it all comes down to the grunt of the server basically). The only thing to consider is that each data load will require another request to the server (XHR) so if you are expecting millions of hits on the site, you need to consider scalability (hardware and software). Techniques such as the one employed in the filtering delay plug-in for DataTables ( http://datatables.net/plug-ins/api#fnSetFilteringDelay ) can help here.

So, after the decision to go with server-side processing (collective decision...!? ;-) ) there are two things to be done - firstly you need tog et the information from the client to the server, to tell it what to filter on. This can be done by using fnServerData ( http://datatables.net/usage/callbacks#fnServerData ) to send extra parameters (the user input search fields) to the server-side processing script. This can be done something like this:

[code]

$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "extra_filter", "value": $('#my_filter').val() } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
} );
}
} );

$('#my_filter').keyup( function () {
oTable.fnDraw();
} );
} );
[/code]
Obviously a simple example, but the idea is to get the information from a text input ('my_filter') and pass it to server as the parameter 'extra_filter'.

From there you can do the second stage, which is to actually have the filtering of data done. For this you'll first need a server-side processing script - this is my default template which can be customised: http://www.datatables.net/development/server-side/php_mysql . What you will need to do, is based on the extra filtering information, alter the 'where' query (line 85). How you alter the query will depend on what logic you want to filter on.

And finally you asked about how to have links extra in the table - basically all you need to do is have the server-side script return the HTML you want in your table. In the block at line 161, you can see I've got special formatting for the 'version' column. You can use exactly the same method to add A tags for links, IMG tags, whatever. Any HTML returns will just be inserted into the table.

Hope this helps!

Regards,
Allan