Multi_filter_select

ashudson

I have implemented Editor using AJAX load etc (all produced by Generator) and included the edit, new and delete buttons. But how to include multi_filter_select as well? It seems to be a question of how and where to include the code
/* Add a select menu for each TH element in the table footer */
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );

the page is http://www.marlothiiconservancy.co.za/DataTables-1.9.4/extras/DataTablesEditor/sightings2.html

and it needs the select boxes at the bottom.

allan

Hi,

Did you try adding the fnInitComplete code that I e-mailed over this morning?

Thanks,
Allan

ashudson

Hi haven't received anything from u since monday!

ashudson

the js file is
http://www.marlothiiconservancy.co.za/DataTables-1.9.4/extras/DataTablesEditor/js/table.sightings2.js

Where do I put the following:

$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );

and

$(document).ready( function() {
$('#example').dataTable( {
"fnInitComplete": function(oSettings, json) {
alert( 'DataTables has finished its initialisation.' );
}
} );

allan

Hi,

Not sure why my e-mail didn't get through. Perhaps it didn't like the JS file...

Anyway, change your DataTables initialisation to be:

[code]
var table = $('#sightings2').dataTable( {
"sDom": "Tfrtip",
"sAjaxSource": "php/table.sightings2.php",
"aoColumns": [
{
"mData": "Alphabetical_Name"
},
{
"mData": "whereSeen"
},
{
"mData": "whenSeenOrheard"
},
{
"mData": "seen"
},
{
"mData": "heard"
},
{
"mData": "comment"
},
{
"mData": "listName"
},
{
"mData": "afrikaans"
}
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor },
'print'
]
},
"fnInitComplete": function () {
/* Add a select menu for each TH element in the table footer */
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( table.fnGetColumnData(i) );

$('select', this).change( function () {
table.fnFilter( $(this).val(), i );
} );
} );
}
} );
[/code]

Allan

ashudson

Hi

Ok Have tried that, no effect. js file is same address as previous comment.

Web page is http://www.marlothiiconservancy.co.za/DataTables-1.9.4/extras/DataTablesEditor/sightings2.html

debugger ref: ipemov

ashudson

Have looked further.

This is the line that fails:
this.innerHTML = fnCreateSelect( table.fnGetColumnData(i) );

and the call that fails is
table.fnGetColumnData(i)

allan

Hi,

Thanks for the link. You currently have:

> var oTable=$('#sightings2').dataTable( {

but the code to build the filter is assuming that there will be a `table` variable rather than `oTable` (the code above uses just `table` .

If you use this (as per the code above) it should work:

[code]
var table = $('#sightings2').dataTable( {
[/code]

Regards,
Allan