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:
Filtering function is:
The problem:
In column filter select option I have this:
Table TD code is:
<td> <a href ="#" data-type="select" data-pk="1000000" data-name ="cabling" class ="select status"><?php echo $row['status_name']; ?></a> </td>
Filtering function is:
<script type="text/javascript" charset="utf-8"> (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 <b.forchhammer /AT\ mind2.de> */ $.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<c; i++) { iRow = aiRows[i]; var aData = this.fnGetData(iRow); var sValue = aData[iColumn]; // ignore empty values? if (bIgnoreEmpty == true && sValue.length == 0) continue; // ignore unique values? else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue; // else push the value onto the result data array else asResultData.push(sValue); } return asResultData; }}(jQuery)); function fnCreateSelect( aData ) { var r='<select><option value=""></option>', i, iLen=aData.length; for ( i=0 ; i<iLen ; i++ ) { r += '<option value="'+aData[i]+'">'+aData[i]+'</option>'; } return r+'</select>'; } $(document).ready(function() { /* Initialise the DataTable */ var oTable = $('#datatable_example').dataTable( { "sDom": 'C<"clear">frtip', "oLanguage": { "sSearch": "Search all columns:" }, "iDisplayLength": 30 } ); var oTableCabling = $('#datatable_example_cabling').dataTable( { "sDom": 'C<"clear">frtip', "oColVis": { "activate": "mouseover" }, "oLanguage": { "sSearch": "Search all columns:" }, "iDisplayLength": 50 } ); /* Add a select menu for each TH element in the table footer */ <?php if($user_Department == 4) {?> $("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 }?> } ); </script>
The problem:
In column filter select option I have this:
Waiting...">Waiting..., and select option HTML is:
<option class="select status editable editable-click" data-name="cabling" data-pk="1000000" data-type="select" #"="" value="<a href=">Waiting...">Waiting...</option>