Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82607

Server-side Individual Column Filtering by option

$
0
0
Hi
I'm new in datatables, I use codeigniter and ignited Datatables.
I want to make indiviudal column filtering by selecting options on the bottom table
http://nevada.pl/datatables/server_side_test2.html

My controler:
public function getdata()
	{
			$this->load->library("Datatables");
                                $this->datatables
                                ->select('id,name,surname')
                                ->from('users')
                                ->add_column('action', '<a href="#" title="Edit" class="with-tip"><img src="'.  base_url().'/commons/images/edit.png" width="24" height="24"></a>&nbsp;<a href="#" id="$1" title="Delete" class="with-tip delete"><img src="'.  base_url().'/commons/images/delete.png" width="24" height="24"></a>', 'zlec_id') ; 
                             echo $this->datatables->generate();
	}
My view:
<script type="text/javascript" charset="utf-8">
			(function($) {
			$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
			      if ( typeof iColumn == "undefined" ) return new Array();
                              if ( typeof bUnique == "undefined" ) bUnique = true;
        			if ( typeof bFiltered == "undefined" ) bFiltered = true;
				if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
				var aiRows;
				if (bFiltered == true) aiRows = oSettings.aiDisplay;
				else aiRows = oSettings.aiDisplayMaster; // all row numbers
				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];

					if (bIgnoreEmpty == true && sValue.length == 0) continue;
					else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
            				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() {
				var oTable = $('#example').dataTable( {
					"bProcessing": true,
					"bServerSide": true,
					"sAjaxSource": "getdata",
					"fnServerData": function ( sSource, aoData, fnCallback ) {
						$.ajax( {
							"dataType": 'json',
							"type": "POST",
							"url": sSource,
							"data": aoData,
							"success": function(json, textStatus, jqXHR) {
								if ( json.sEcho == 1 ) {
									$("tfoot th").each( function (i) {
									        this.innerHTML = fnCreateSelect(json.select[i]);
										$('select', this).change( function () {
										oTable.fnFilter( $(this).val(), i );
										} );
									} );
								}
								fnCallback(json)
							}
						} );

					},
				} );
                    } );
</script>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
					<thead>
						<tr>
							<th>id</th>
							<th>name</th>
							<th>surname</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td colspan="37" class="dataTables_empty">Loading data from server</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<th>id</th>
							<th>name</th>
							<th>surname</th>
						</tr>
					</tfoot>
				</table>
In firebug I got error: TypeError: json.select is undefined this.innerHTML = fnCreateSelect(json.select[i]);
please advice?
thank you

Viewing all articles
Browse latest Browse all 82607

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>