[Feature]: DataTable - Diplay/Hide Columns

[Dri372]

When out table has many columns, it is useful to let the user be able to hide/display columns. The following code is used to show a line of checkboxes on the top of the table in order to choose the columns to be displayed/hidden. it uses the visible property of datatable columns (hidden_columns)

1 - resources/infyom/infyom-generator-templates/scaffold/datatable.stub protected function getColumns() → public function getColumns() 2 - resources/views/layouts/app.blade.php

    <div class="content-wrapper">

	<div id="checkbox_cdh">  {{-- to choose which columns to display/hide - via layouts/script.blade.php #02 --}}
		@yield('checkbox')
	</div> {{-- checkbox_cdh --}}

3 - resources/infyom/infyom-generator-templates/scaffold/views/index.stub

@section('checkbox')
<?php
	$show_columns_missing=false;			# -> True if file '.../<models>/show_columns.php' does not exits
	$file="../resources/views/".strtolower('$MODEL_NAME$s')."/show_columns.php"; # file that defines the array 'show_couluns' that contains the columns to show during the firts display of the datatable
	# you can construct this file by copying app/DataTables/<Model>DataTable.php and create the array from the fucntion 'getColumns'
	if ( file_exists($file) ) include($file); else $show_columns_missing=True;
	if ( $show_columns_missing ) echo "TIP : You can initialize the state of the columns (checkboxes) by creating the file $file<br>";
	# dump('layout app new début');
	use App\DataTables\$MODEL_NAME$DataTable; 
	$dt=new $MODEL_NAME$DataTable;
	$columns=$dt->getColumns();
	# dump($columns);
	foreach ($columns as $column ) {
		if ( $show_columns_missing || in_array($column,$show_columns) ) $checked='checked=""'; else $checked='';
		echo '<label><input id="cb_'.$column.'" type="checkbox" '.$checked.' onclick="window.location.reload(false)"> '.$column.'</label> ';
	}
	# dump('layout app new fin');
?>
@endsection

4 - resources/views/layouts/script.blade.php *** See previous post 972 to see how to use this script ***

$(document).ready(function() {							// #01
    // Setup - add a text input to each footer cell			
    $("#dataTableBuilder tfoot th").each( function () {
        var title = $(this).text();
        $(this).html( "<input type=\'text\' placeholder=\"Search\" />" );
    } );
});

$(function(){									// #01
	window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}=window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}||{};
	window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s"]=$("#%1$s").DataTable(%2$s
	,initComplete: function () {
		// Put the search on the top
		var r = $('#dataTableBuilder tfoot tr');
  		r.find('th').each(function(){
    			$(this).css('padding', 8);
  		});
		$('#dataTableBuilder thead').append(r);
		$('#search_0').css('text-align', 'center');
// alert("table initComplete this=");
// alert(JSON.stringify(this,null,4));	
            	// Apply the search
		this.api().columns().every( function () {
                	var that = this;
// alert("table initComplete this.value="+this.value+" that.search="+that.search());		
                	$( "input", this.footer() ).on( "keyup change clear", function () {
                    	if ( that.search() !== this.value ) {
                        	that
                            	.search( this.value )
                            	.draw();
                    	}
                	} );
		} );
		// Display/hide columns versus checkbox checked or not		// #02
		this.api().columns().every( function () {
			var header = this.header();
			var title = $(header).html();		// column title
			title=title.toLowerCase().replace(/ /g,'_');
			// alert(title);
			// this.visible($(#cb_F1).checked); // Private names are not valid in this context	
			var cb = document.getElementById('cb_'+title); // Ok
			cb ? this.visible(cb.checked) : true;	
			
		} );
		} // initComplete! function(
	}	// Fin de la chaîne json %2ss
	);	// DataTable(
} // $(function(){
); // $