Select menu column filtering problem

drpuddingq

I am using DataTables in a Laravel project and trying to implement select menu column filtering with AJAX data. I am super close but getting hung up on one hopefully small item. Using the Benedikt Forchhammer plug-in.

[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 want 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 want 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 fnCreateSelect( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; i

drpuddingq

OK. I have figured out that fnCreateSelect() is called before the AJAX data is available. It looks like the recommendation is to move the select creation into my callback, or to do what has been recommended here: http://datatables.net/forums/discussion/3931/server-side-filtering-on-specific-columns-with-input-and-select/p1

I now have this but am getting a Firebug error json.select is undefined

[code]
$(document).ready(function() {
oTable = $('#users').dataTable( {
"sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "{{ URL::to('admin/users/data') }}",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* ... additional variables ... */
$.getJSON( sSource, aoData, function (json) {
/* Create the select elements on the first run */
if ( json.sEcho == 1 )
{
$("tfoot th").each( function (i) {
/* Insert the select menu */
this.innerHTML = fnCreateSelect(json.select[i]);

/* Add the event listener for the newly created element */
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
}

/* DataTables callback */
fnCallback(json)
} );
}

});
});
[/code]

I have been at this all day and read everything I can find on the problem, but still no further.

Anyone?

allan

I'd suggest using the method in your first post - just do it in fnInitComplete which is called when the table has loaded the ajax data.

Allan

drpuddingq

Allan -- thanks for your assist. I've implemented the following code, which does show the correct search menus under each column, but when I select a menu, the data is not filtered, rather I just get back a "No data available in table" response.

[code]
var oTable;
$(document).ready(function() {
oTable = $('#users').dataTable( {
"sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "{{ URL::to('admin/users/data') }}",
"fnDrawCallback": function ( oSettings ) {
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
},
"fnInitComplete": function(oSettings, json) {
/* 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 );
});
});
}
});
});
[/code]

Obviously a newbie, but thanks for taking any time to get me over this hump.

allan

Have you fully implemented server-side processing as per: http://datatables.net/usage/server-side . Since you are using server-side processing, it is the server which is doing the filtering, not the Javascript.

Allan

drpuddingq

I think I've waded in too deep without learning how to swim. I was under the impression that declaring bServerSide = true, magically implemented server-side processing.

I will spend some more time researching this.

allan

It tells DataTables that server-side processing will be used, but the Javascript code can't be used to interface with the database on your server - it doesn't know what database is being used (if one even is!) or what kind of server it is (FreeBSD, Windows, Linux, whatever) and what programs it can run :-). So yes, server-side processing needs to be implemented.

There is a "gallery" of scripts contributed by other forum members here, which might help you get started: http://datatables.net/development/server-side/

Allan

drpuddingq

Thanks, much!