Datatables with X-editable plugin
Datatables with X-editable plugin
Hi everyone, I use Twitter Bootstrap X-Editable (demo http://vitalets.github.com/x-editable/demo.html) plugin with DataTables. And I use individual column filtering (using select menus) .
Table TD code is:
[code]
<?php echo $row['status_name']; ?>
[/code]
Filtering function is:
[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
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTableCabling.fnGetColumnData(i) );
$('select', this).change( function () {
oTableCabling.fnFilter( $(this).val(), i );
} );
} );
/* Add a click handler to the rows - this could be used as a callback */
$("#datatable_example_cabling tbody tr").click( function( e ) {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
oTableCabling.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
<?php }?>
} );
[/code]
The problem:
In column filter select option I have this: [quote]Waiting...">Waiting...[/quote], and select option HTML is:
[code]Waiting...[/code]
Table TD code is:
[code]
<?php echo $row['status_name']; ?>
[/code]
Filtering function is:
[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
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTableCabling.fnGetColumnData(i) );
$('select', this).change( function () {
oTableCabling.fnFilter( $(this).val(), i );
} );
} );
/* Add a click handler to the rows - this could be used as a callback */
$("#datatable_example_cabling tbody tr").click( function( e ) {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
oTableCabling.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
<?php }?>
} );
[/code]
The problem:
In column filter select option I have this: [quote]Waiting...">Waiting...[/quote], and select option HTML is:
[code]Waiting...[/code]
This discussion has been closed.