Quantcast
Viewing all articles
Browse latest Browse all 82152

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:
<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="&lt;a href=">Waiting..."&gt;Waiting...</option>

Viewing all articles
Browse latest Browse all 82152

Trending Articles