individual column filtering meets AJAX source!
individual column filtering meets AJAX source!
Flo
Posts: 9Questions: 0Answers: 0
Hi,
I am trying to get the individual column filtering (select) example working with an AJAX source.
The table displays perfectly but at this point, unfortunately, all my drop downs are empty.
My code is as follow:
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'json.txt',
"aoColumns": [
{ "mData": "id_region" },
{ "mData": "region_name" },
{ "mData": "division" }
]
} );
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
} );
apparently, oTable.fnGetColumnData returns an empty array because aiRows.length is always 0. I just don't understand why!
Am I doing something wrong?
I am trying to get the individual column filtering (select) example working with an AJAX source.
The table displays perfectly but at this point, unfortunately, all my drop downs are empty.
My code is as follow:
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'json.txt',
"aoColumns": [
{ "mData": "id_region" },
{ "mData": "region_name" },
{ "mData": "division" }
]
} );
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
} );
apparently, oTable.fnGetColumnData returns an empty array because aiRows.length is always 0. I just don't understand why!
Am I doing something wrong?
This discussion has been closed.
Replies
Allan
I am now using fnInitComplete. But it is still not working:
[code]
function fnCreateSelect( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; i
I don't suppose you fancy trying out v1.10 (its pre-beta at the moment, but quite stable!)? With 1.10 you would do something like in this example: https://github.com/DataTables/DataTablesSrc/blob/1_10_wip/examples/api/multi_filter_select.xml#L11 .
1.10-dev latest is available here: https://github.com/DataTables/DataTables/blob/1_10_wip/media/js/jquery.dataTables.js .
That will work nicely with mData and doesn't require any plug-ins.
Allan
I followed the examples in the latest git repository, so this how it looks:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sPaginationType": "full_numbers",
"ajax": {
"url": "json.txt",
"dataSrc": ""
},
"columns": [
{ "data": "model" },
{ "data": "address" },
{ "data": "version" },
],
"fnInitComplete": function(oSettings, json) {
var table = $('#example').DataTable();
$("#example tfoot th").each( function ( i ) {
var select = $('Filter on:')
.appendTo( this )
.on( 'change', function () {
table.column( i )
.search( $(this).val() )
.draw();
} );
table.column( i ).data().unique().sort().each( function ( d, j ) {
select.append( ''+d+'' )
} );
} );
}
} );
} );
[/code]
Now, if I wanted the drop downs to be interdependent, meaning a selection on one of them would determine what fields are available in the other drop downs... How difficult would it be? :D
Allan
Considering the behavior of drawCallback, I can stop using initComplete like so:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"oLanguage": {
"ajax": {
"url": "json.txt",
"dataSrc": ""
},
"columns": [
{ "data": "model" },
{ "data": "address" },
{ "data": "version" },
],
"fnDrawCallback": function( oSettings ) {
var table = $('#example').DataTable();
$("#example tfoot th").empty();
$("#example tfoot th").each( function ( i ) {
var select = $('Filter on:')
.appendTo( this )
.on( 'change', function () {
table.column( i, { filter: 'applied' }).search($(this).val()).draw();
} );
table.column( i, { filter: 'applied' }).data().unique().sort().each( function ( d ) {
select.append( ''+d+'' )
} );
});
}//fnDrawCallback
} );
} );
[/code]
That's as close as I get. Making it smarter seems a bit out of my league. Anybody interested?
Allan
Actually, just as a note, (I don't know if it's a bug or expected behavior) when the dropdown is in the footer, a .draw will reset the dropdown displayed value (so in my case, every dropdowns show "Filter on:" after a draw). But if you create the dropdowns outside the table, the selected value "survives" the .on call since the draw only affects the table.
Ultimately, I think I would like to be able to do this (left side on the page):
https://code.google.com/apis/ajax/playground/?type=visualization#dependent_controls
It's probably easier than I am making it, I just don't have the required brain power! I have been trying to mimic it all day yesterday, no dice... So really when I say smart, I mean something that behave logically.
And I am pretty sure it should be possible to make it so that you can select more than one value in the dropdown (using a regexp on column?), like so:
https://code.google.com/apis/ajax/playground/?type=visualization#categoryfilter_control
But I get easily greedy when it comes to functionality!
Now, if someone were to implement any of these as a plugin, I would be eternally grateful :D
Expected, but probably still considered a bug. The code would need to get the current value being used for the filter and then set the value on every regeneration. Or perhaps just before the generation, get eh value and immediately after set it again.
> And I am pretty sure it should be possible to make it so that you can select more than one value in the dropdown (using a regexp on column?)
Yes - you could use size="..." to allow multiple selections and then a bit of regex to do the filter.
Allan