Could you point the correct place to embed a Datatables Bootstrap plugin on this existing code to have column filter feature?

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

Select all Open in new window

	
		function datatables($fields, $options, $search) {

			$order = $cont = 0;
			$order_type = "asc";
			
			if(isset($options['order'])) {
			
				if(isset($options['order_type']) && $options['order_type'] == 'desc')
					$order_type = 'desc';
				
				foreach($fields as $field => $label) {
					
					if($options['order'] == $field) {
						$order = $cont;
					}

					$cont++;
				}


			}

			$datatables = '
				<link rel="stylesheet" type="text/css" href="' . base_url() . 'public/vendor/plugins/datatables/media/css/dataTables.bootstrap.css">
				<link rel="stylesheet" type="text/css" href="' . base_url() . 'public/vendor/plugins/datatables/media/css/dataTables.plugins.css">

				<script src="' . base_url() . 'public/vendor/plugins/datatables/media/js/jquery.dataTables.js"></script>
				<script src="' . base_url() . 'public/vendor/plugins/datatables/media/js/dataTables.bootstrap.js"></script>
				';

			if (!isset($options['id']))
				$options['id'] = 'datatables_ajax';

			if (!isset($options['search_submit']))
				$options['search_submit'] = '.search_submit';

			$datatables .= '

			<script type="text/javascript">

				$(document).ready(function(){

					$("#pesquisar_groups_form").on("submit",function(){

						// não submete pagina - dont reload
						return false;

					});
					
					$(".clear_pesquisa").on("click",function(){

						// $("#pesquisar_groups_form").trigger("reset");
						redrawDataTables("");
					});

					redrawDataTables("");

					$("'.$options['search_submit'].'").on("click", function (e) {

						var table = "";
						var where = {';

							if (isset($search['like'])) {

								$datatables .= '"like" : {';

								$cont = 0;
								foreach($search['like'] as $val) {

									if($cont == 0)
										$datatables .= '"'.$val.'" : $("#pesquisar_groups_form").find("#'.$val.'").val()';
									else
										$datatables .= ',"'.$val.'" : $("#pesquisar_groups_form").find("#'.$val.'").val()';

									$cont++;

								}
								$datatables .= '}';

								if (isset($search['where']))
									$datatables .= ',';

							}

							if (isset($search['where'])) {

								$datatables .= '"where" : {
									';

								$cont = 0;
								foreach($search['where'] as $val) {

									if($cont == 0)
										$datatables .= '"'.$val.'" : $("#pesquisar_groups_form").find("#'.$val.'").val()
									';
									else
										$datatables .= ',"'.$val.'" : $("#pesquisar_groups_form").find("#'.$val.'").val()
									';

									$cont++;

								}
								$datatables .= '}
								';
							}

						$datatables .= '}
						';
						
						$datatables .= '

						redrawDataTables(where);
					});
				});

				function redrawDataTables(where) {



					if (typeof table != "undefined" && typeof table != undefined && table != "") {

						$("#exemplo").empty();
						table.destroy();
					}

					if (typeof where == "undefined" || typeof where == undefined) {
						where = "";
					}

					table =  $("#' . $options['id'] . '").DataTable({
						"paging":   true,
						// "pagingType": "scrolling",
						"pagingType": "full_numbers",
						// "sPaginationType": "four_button",
						"retrieve": true,
						"searching": false,
						"ordering": true,

						"order": [
							[ 
								'.$order.', "'.$order_type.'"
							]
						],

						aaSorting: [],

						"lengthChange": false,
						"info": false,
						"ajax": {
							"url": "' . base_url() . $options['controller'] . '/' . $options['action'].'",
							"type": "post",
							"data": where,
							"processing": true,
						},
						"language": {
							"sEmptyTable": "Nenhum registro encontrado",
							"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
							"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
							"sInfoFiltered": "(Filtrados de _MAX_ registros)",
							"sInfoPostFix": "",
							"sInfoThousands": ".",
							"sLengthMenu": "_MENU_ resultados por página",
							"sLoadingRecords": "Carregando...",
							"sProcessing": "Processando...",
							"sZeroRecords": "Nenhum registro encontrado",
							"sSearch": "Pesquisar",
							"oPaginate": {
								"sNext": "",
								"sPrevious": "",
								"sFirst": "",
								"sLast": ""
							},
							"oAria": {
								"sSortAscending": ": Ordenar colunas de forma ascendente",
								"sSortDescending": ": Ordenar colunas de forma descendente"
							}
						}
					});

					$("#datatables tr").addClass("tr_clicked meeta-cursor-pointer");
				}
			</script>';

			 $datatables .= '

				<style>
					.pagination > li:last-child > a{
						z-index: 0;
					}
					.input-group {
						z-index: 0;
					}
				</style>';

				$datatables .= '

				<table id="' . $options['id'] . '" class="table admin-form theme-warning fs13" cellspacing="0" width="' . $options['width'] . '">
					<thead>
						<tr>';

					if(array_key_exists('active_ind',$fields))
						$fields = array_merge($fields, array('acoes'=>'Ações'));

					foreach ($fields as $field => $title) {
						$datatables .= '<th>' . $title . '</th>';
					}

				$datatables .=
						  '</tr>
						</thead>
					</table>';

			return $datatables;
		}

Select all Open in new window