<div class="table-responsive">
	<table id="salidas-agrupadas-table" class="display table" style="width: 100%; cellspacing: 0;">
		<thead>
			<tr>
				<th>Fecha</th>
				<th>Transacci&oacute;n.</th>
				<th>Concepto</th>
				<th>Cliente</th>
				<th>Acciones</th>
				<th>Documento</th>
				<th>Numero Documento</th>
				<th>Proveedor</th>
				<th>Documento Compra</th>
				<th>Numero Documento Compra</th>
			</tr>
		</thead>
		<tbody>
			<!--<tr>
				<td>17/07/2015</td>
				<td>Inventario Inicial</td>
				<td>Registro de inventario inicial</td>
				<td>
					<button class="btn btn-info btn-xs">Ver entrada</button>
				</td>
			</tr>-->
		</tbody>
	</table>
</div>
<script>
	var tableData = $("#salidas-agrupadas-table").DataTable({
		"dom": '<"filtercustom">lftip',
		"processing": true,
		"order": [ 0, 'desc' ],
		"serverSide": true,
		"ajax": {
			"url": "<?php echo base_url();?>productos/cargar_salidas_agrupadas",
			"type": "POST",
			"data": function ( d ) {
                d.myParam = $('#filtercustom').val();
            }
		},
		"columnDefs": [
			{ "width": "20%", "targets": 0 ,"searchable": false},
			{ "width": "20%", "targets": 1 ,"searchable": false},
			{ "width": "20%", "targets": 2 ,"searchable": false},
			{ "width": "20%", "targets": 3 ,"searchable": false},
			{ "width": "20%", "className" : "myTableActionClass","orderable": false,"searchable": false, "targets": 4},
			{ "targets": 5,"orderable": false,"searchable": false,"visible": false},
			{ "targets": 6,"orderable": false,"searchable": true,"visible": false},
			{ "targets": 7,"orderable": false,"searchable": false,"visible": false},
			{ "targets": 8,"orderable": false,"searchable": false,"visible": false},
			{ "targets": 9,"orderable": false,"searchable": true,"visible": false},
		],
		"language": {
			"searchPlaceholder": "Numero de Documento",
			"emptyTable":     "",
			"lengthMenu": "Mostrar _MENU_ registros por pagina",
			"zeroRecords": "",
			"info": "Pagina _PAGE_ de _PAGES_",
			"infoEmpty": "No hay registros",
			"infoFiltered": "(Ningun resultado encontrado de _MAX_ registros)",
			"search":         "Buscar:",
			"processing":     '<div class="sk-circle"><div class="sk-circle1 sk-child"></div><div class="sk-circle2 sk-child"></div><div class="sk-circle3 sk-child"></div><div class="sk-circle4 sk-child"></div><div class="sk-circle5 sk-child"></div><div class="sk-circle6 sk-child"></div><div class="sk-circle7 sk-child"></div><div class="sk-circle8 sk-child"></div><div class="sk-circle9 sk-child"></div><div class="sk-circle10 sk-child"></div><div class="sk-circle11 sk-child"></div><div class="sk-circle12 sk-child"></div></div>',
			"loadingRecords": '<div class="sk-circle"><div class="sk-circle1 sk-child"></div><div class="sk-circle2 sk-child"></div><div class="sk-circle3 sk-child"></div><div class="sk-circle4 sk-child"></div><div class="sk-circle5 sk-child"></div><div class="sk-circle6 sk-child"></div><div class="sk-circle7 sk-child"></div><div class="sk-circle8 sk-child"></div><div class="sk-circle9 sk-child"></div><div class="sk-circle10 sk-child"></div><div class="sk-circle11 sk-child"></div><div class="sk-circle12 sk-child"></div></div>',
			"paginate": {
				"first":      "Primero",
				"last":       "Ultimo",
				"next":       "Siguiente",
				"previous":   "Anterior"
			}
		},
		"bAutoWidth": false
	});
	
	$("div.filtercustom").html("<select id='filtercustom' class='form-control pull-right' style='margin-left:10px;height:30px;font-size:12px;width:200px;'><option value='0'>Todos</option><optgroup label='Ventas'><option value='1'>Todas</option><option value='11'>Factura</option><option value='12'>CCF</option><option value='13'>Ticket</option><option value='14'>Sin Documento</option><option value='15'>Nota de Envio</option><option value='16'>Nota de Remision</option></optgroup><option value='2'>Pedido</option><option value='3'>Dano o Vencimiento</option><option value='4'>Perdida o Extravio</option><option value='5'>Devolucion a Proveedor</option><option value='6'>Consumo Interno</option></select>");

	$('#filtercustom').on('change',function(){
		tableData.search($('div.dataTables_filter input').val()).draw();
	});
</script>