Price List Table with Filtering Options

printmarket

Dear All

I am using Worpress as my CMS and using WP E-Commerce plugin as my shopping cart. We are looking for adding a price table so basically when a customer clicks on one of the prices on the table it addes the product on the shopping cart. here is what I am looking for to do:

1. Create a Table with different and combination of filtering options (these needs to be apprear in form of radio buttons at top of table). in order to filter the rows, I want to add two hidden columns (depending on the number of filtering categories) and by selecting each radio buttons, the table updated and filtered dynamically.

2. be able to insert wordpress shortcodes in the table cells to add the product prices from the database and by clicking on the them. the product needs to be added to shopping cart.

3. Use CSS to format the table


Regarding the step 2 & 3, it is going to be an easy work and I can manage it myself by a bit of playing arround. My main difficulty is step one and I need a bit of helping or guidance to be able to do that. here is what exactly I am after:

http://www.leafletprinting.co.uk/cheap-flyer-printing

and I saw this in the forums which is basically the same table I am looking for but instead of filter buttons I need to use radio buttons:

http://raychem.te.com/Product_Selector/

printmarket

Ok after playing arround with one of the examples I have managed to generate the radio buttons. however by selecting each of them the filter does not apply. I would appreciate any help from you guys!



[code](function($) {
/*
* Function: fnGetColumnData
* Purpose: Return an array of table values from a particular column.
* Returns: array string: 1d data array
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function
* int:iColumn - the id of the column to extract the data from
* bool:bUnique - optional - if set to false duplicated values are not filtered out
* bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
* bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
* Author: Benedikt Forchhammer
*/
$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
// check that we have a column id
if ( typeof iColumn == "undefined" ) return new Array();

// by default we only wany unique data
if ( typeof bUnique == "undefined" ) bUnique = true;

// by default we do want to only look at filtered data
if ( typeof bFiltered == "undefined" ) bFiltered = true;

// by default we do not wany to include empty values
if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;

// list of rows which we're going to loop through
var aiRows;

// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers

// set up data array
var asResultData = new Array();

for (var i=0,c=aiRows.length; i -1) continue;

// else push the value onto the result data array
else asResultData.push(sValue);
}

return asResultData;
}}(jQuery));


function fnCreateRadio( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; i

printmarket

Anyone wants to help!!!?

printmarket

ok after playing with the code I have maneged to get something work here is what I have done:

instead of the following code:
[code] $("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateRadio( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );[/code]
I inserted this:
[code] $("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateRadio( oTable.fnGetColumnData(i) );
$("input:radio", this).change( function () {
oTable.fnFilter( $(this).val(), i );
[/code]

however the filter is working but when I click on any of the radio buttons it will hide all the columns and I left with an empty table!

I would appreciate any comment on this!

printmarket

Ok found the problem. I missed an "=" here for the radio values:
[code] for ( i=0 ; i

allan

Hi,

Good to hear you got it mostly working :-).

I think the answer to both questions are related...

At the moment you have this:

[code]
$("tfoot th").each( function ( i ) {
   this.innerHTML = fnCreateRadio( oTable.fnGetColumnData(i) );
   $("input:radio", this).change( function () {
       oTable.fnFilter( $(this).val(), i );
[/code]

so this is doing an insert in every TH element found in the footer. So to insert it somewhere else, and to change how many get inserted you need to change the selector.

The key thing to remember here is that the filtering is done with the fnFilter() call - so you can insert the radio buttons anywhere in the document, just as you would with regular jQuery / DOM methods. Then call fnFilter with the value you want to filter on and the column index to use for the filter ('i' is used above, but you will likely want to just use a column index of 0, or 1 or whatever).

Regards,
Allan

printmarket

Hi Allan

Thanks for the comments. I figured that by using "tfoot th", each radio options will be added to the "th" part of the footer. This bit of the code is abit confusing for me! I am not a Jquery or javascript expert but I am a C++ developer. so far I came up here was on my experience in coding :-) and lovely examples on the website. a brief example for filtering only first column and generating only first column raio buttons on another table with another "id".

I have tried different things to see what will happend in the code e.g.:

instead of "tfoot th" I used "h2" and in html code I put an tag to see if the radio options appear and it did but only for the first column!!!! I still dont know how to reference it to another table with another id!!!!

I really appreciate your help. BTW I forgot to mention I love your codes and I am planning to dig into it more :-)

Regards,
Mehrdad Pasha

allan

Hi Mehrdad,

I've just put together this little example that might help: http://live.datatables.net/igolas/edit . It injects a text box into the page and apples a filter to that on the first column only. To add more filters you would just inject more elements with other events bound to it.

Allan

printmarket

Hi Allan

Thanks for the code. I finally got everything right. thanks for your help. I will post my code shortly here.

Regards,
Mehrdad Pasha

printmarket

Hi guys here is my code, finally everything is working. Thanks to Allan!

[code]
$(document).ready( function () {

var oTableMehrdad = $('#wp-table-reloaded-id-3-no-1').dataTable( {
"bSort": false,
"sDom": 'rt',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
],
"aoSearchCols": [
null,
null,
{ "sSearch": "single side" },
{ "sSearch": "N"}
]


} );

$('#mehrdadpasha').append('Single Side');
$('#soption1').change( function () {
oTableMehrdad.fnFilter( this.value, 2 );
} );

$('#mehrdadpasha').append('Double Side');
$('#soption2').change( function () {
oTableMehrdad.fnFilter( this.value, 2 );
} );

$('#mehrdadpasha').append('Four Page');
$('#soption3').change( function () {
oTableMehrdad.fnFilter( this.value, 2 );
} );

$('#mehrdadpasha_2').append('Normal');
$('#foption1').change( function () {
oTableMehrdad.fnFilter( this.value, 3 );
} );

$('#mehrdadpasha_2').append('Laminated');
$('#foption2').change( function () {
oTableMehrdad.fnFilter( this.value, 3 );
} )

} );

[/code]

allan

Great stuff - thanks for posting your working solution :-)

Regards,
Allan