This is my mistake:
DataTables warning: table id = table - Invalid JSON response. For more information about this error, please see link
I'm using codeigniter.
What happens is that a data table will load the data with ajax making a query to the database.
Until there is everything right, but that I want to make it dynamic, letting the user select an id and dates that I send by ajax to create searches with those parameters.
This is the code with which I fill my table
$('#table').DataTable({
'paging': true,
'info': true,
'filter': true,
'stateSave': true,
'ajax': {
"url":baseurl+"index.php/reports/getPersonas/",
"type":"POST",
dataSrc: ''
},
'columns': [
{data: 'iUsuario'},
{data: 'Agente'},
{data: 'Cliente'},
{data: 'Disposition'},
{data: 'FechaIns'},
{"orderable": true,
render:function(data, type, row){
return '<a href="#" class= "btn btn-block btn-primary btn-sm"></a>'
}
}
],
"order": [[1 , "asc" ]],
});
Afterwards in the form I created a button and the data of dates and id if I send them correctly to the controller from the view, but when I receive the answer I get the error mentioned above ..
$('#submit').click(function(){
var agente = $('#agente').val();
var dateone = $('#dateone').val();
var datetwo = $('#datetwo').val();
$.ajax({
type:"POST",
url:"<?php echo base_url();?>index.php/reports/getPersonas",
data:{
'agente': agente,
'dateone': dateone,
'datetwo': datetwo
},
success:function (data) {
alert("Los datos fueron agregados con exito");
},error:function(jqXHR, textStatus, errorThrown){
console.log('error:: '+ errorThrown);
}
});
});
my eyesight
<h2>Buscar</h2>
<!-- <form method="get" id="frm" class="form-inline" action="form_x_editable.html"> -->
<?php echo form_open('reports/procemostrar'); ?>
<label>Seleccione: </label>
<select name="agente" id="agente" class="form-control">
<option value="100" >Select agente</option>
<?php foreach($agentes as $agente):?>
<option value="<?php echo $agente->iUsuario?>"
<?php echo set_select('agente',$agente->iUsuario); ?> >
<?php echo $agente->Nombre?>
<?php echo $agente->iUsuario?>
</option>
<?php endforeach;?> </select>
<?php //echo "string",$fmax, $FechaMax; ?>
<input type="text" id="dateone" name="dateone" value="2017/06/1" />
<input type="text" id="datetwo" name="datetwo" value="2017/06/28" />
<!-- <div id="dateSlider" class="slider-purple"></div>-->
<button type="submit" id="submit" name="submit" class="btn btn-primary" style="margin-left: 30px">
Buscar
</button>
</form>
<!-- end: PAGE TITLE & BREADCRUMB -->
</div>
</div>
<!-- end: PAGE HEADER -->
<!-- start: PAGE CONTENT -->
<div class="row">
<div class="col-md-12">
<!-- start: DYNAMIC TABLE PANEL -->
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-external-link-square"></i>
Reportes de usuario
<div class="panel-tools">
<a class="btn btn-xs btn-link panel-collapse collapses" href="#"> </a>
<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<link href="<?php echo base_url('assets/datatables/css/jquery.dataTables.min.css')?>" rel="stylesheet">
<table id="table" class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 5%;background-color: #006699; color: white;">iUsuario</th>
<th style="width: 10%;background-color: #006699; color: white;">Agente</th>
<th style="width: 10%;background-color: #006699; color: white;">Cliente</th>
<th style="width: 10%;background-color: #006699; color: white;">Disposition</th>
<th style="width: 10%;background-color: #006699; color: white;">FechaIns</th>
<th style="width: 10%;background-color: #006699; color: white;">Acción</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<!-- end: DYNAMIC TABLE PANEL -->
</div>
</div>
<!-- end: PAGE CONTENT-->
</div>
</div>
<!-- end: PAGE -->
</div>
</div>
</div>
I have these scrips in view
var baseurl = "<?php echo base_url(); ?>";
</script>
<script src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js')?>"></script>
<script src="<?php echo base_url('assets/js/persona.js')?>"></script>
<script type="text/javascript">
$(function() {
$('input[name="dateone"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
},
singleDatePicker: true,
showDropdowns: true
},
function(start, end, label) {
var years = $('#dateone').val();
alert("You are " + years + " years old.");
});
});
</script>
<script>
$(function() {
$('input[name="datetwo"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
},
singleDatePicker: true,
showDropdowns: true
},
function(start, end, label) {
var years = $('#datetwo').val();
alert("You are " + years + " years old.");
});
});
</script>
<script type="text/javascript">
$('#submit').click(function(){
var agente = $('#agente').val();
var dateone = $('#dateone').val();
var datetwo = $('#datetwo').val();
$.ajax({
type:"POST",
url:"<?php echo base_url();?>index.php/reports/getPersonas2",
data:{
'agente': agente,
'dateone': dateone,
'datetwo': datetwo
},
success:function (data) {
alert("Los datos fueron agregados con exito");
},error:function(jqXHR, textStatus, errorThrown){
console.log('error:: '+ errorThrown);
}
});
});
my model
<?php
class Reports_model extends CI_Model
{
public function getTabla(){
$this->db->select('iUsuario,Agente,Cliente,Disposition,FechaIns');
$this->db->from('v_CallUser');
$r = $this->db->get();
return $r->result();
}
public function shearchdinamic($info){
$this->db->select('iUsuario,Agente,Cliente,Disposition,FechaIns');
$this->db->where('FechaIns',$info['fmin']);
$this->db->where('FechaIns',$info['nombre']);
$this->db->from('v_CallUser');
$r = $this->db->get();
return $r->result();
}
}
?>
my controller
public function getPersonas(){
echo json_encode($this->Reports_model->getTimeZone());
}
public function getPersonas2(){
echo json_encode($this->Reports_model->shearchdinamic($info));
}
public function procemostrar(){
$data = $this->input->post();
echo "string<br><br><br><br>". $data['agente'].$data['dateone'].$data['datetwo'];
//$id = $this->input->post('agente');
$datar = array(
'agentes' => $this->Usuarios_model->Consultan2()
);
$info = array(
'iUsuario' => $data['agente'],
'fmin' => $data['dateone'],
'fmax' => $data['datetwo']
);
//$this->Reports_model->shearchdinamic($info);
$this->load->helper('url');
$this->load->view('_partials/_header');
$this->load->view('_reportes/_reporte_porusuario',$datar);
$this->load->view('_partials/_footer');
}
}
and a js that I have separated to fill the table
$('#table').DataTable({
'paging': true,
'info': true,
'filter': true,
'stateSave': true,
'ajax': {
"url":baseurl+"index.php/reports/getPersonas/",
"type":"POST",
dataSrc: ''},
'columns': [
{data: 'iUsuario'},
{data: 'Agente'},
{data: 'Cliente'},
{data: 'Disposition'},
{data: 'FechaIns'},
{"orderable": true,
render:function(data, type, row){
return '<a href="#" class= "btn btn-block btn-primary btn-sm"></a>'
}
}
],
"order": [[1 , "asc" ]],
});
