2

Este es mi error:

DataTables warning: table id=table - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

Estoy utilizando Codeigniter.

Lo que pasa es que a un data table le cargo los datos con Ajax haciendo una consulta a la base de datos.

Hasta ahí todo bien, pero esa consulta la quiero hacer dinámica dejando al usuario seleccionar un ID y fechas que las mando por Ajax para crear búsquedas con esos parámetros.

Este es el código con el que relleno mi tabla:

$('#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" ]],
});

Después en el formulario creo un botón y los datos de fechas y ID si los envío correctamente al controlador desde la vista, pero cuando recibo la respuesta me sale el error antes mencionado.

$('#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);
        }

    });
});

Mi vista

                    <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>

Estos scripts los tengo en la vista

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);
        }

    });
});

Mi modelo

<?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();
        }
}
?>

Mi controlador

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'); 


    }
}

Y un js que tengo separado para llenar la tabla

$('#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" ]],
    });
4
  • Me podran ayudar , separado si puedo hacer la consulta sin enviar parametros y tambien puedo enviar los parametros al controlador pero cuando quiero hacer la consulta enviando esos parametros al modelo tengo ese error. Commented el 16 jun. 2017 a las 22:17
  • Hola rodrigo yo actualmente hago algo parecido trabajo con CI, y tambien tengo mi tabla donde el usuario busca de forma dinamica, es decir por rango de fecha o por nombre o por fecha, pero para ayuidarte solo necesito saber tu html de tu tabla el controlador de tu llenado y el modelo Commented el 16 jun. 2017 a las 22:23
  • ok enseguida lo pongo Commented el 16 jun. 2017 a las 22:37
  • Lo que no se es como enviar y recibir datos a la ves por la misma petición ajax, por que los dos scrips funcionan pero por separado, uno para enviar los datos de la vista al controlador que serian las fechas y el nombre por los que deseo buscar, y el otro para llenar la tabla también funciona. Pero para enviar esos parametros por donde relleno la tabla como le aria. Commented el 16 jun. 2017 a las 22:55

1 respuesta 1

2

Actualmente trabajo con CI y hago lo mismo que tu en mi caso no necesito el boton buscar, TRABAJO CON algunos atributos en mi vista comodata-column y eso te ayudara mas eso hago en mi vista y aparte solo declaro la tabla, en JQuery utilizo .search-input-text eso me ayuda con la busqueda, en mi controlador armo array y ya con eso lleno la tabla por otro lado en el modelo hago una busqueda por columns te dejo cada parte del CI espero te ayude :

introducir la descripción de la imagen aquí

NO OLVIDES COLOCAR ESTO EN LA PARTE INFERIOR DE TU VISTA

<script type="text/javascript">
                                        var baseurl = "<?php echo base_url(); ?>";
                                        var ciCsrfToken = "<?php echo $this->security->get_csrf_hash(); ?>";
    </script>

VISTA :

<!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper">
                <section class="content-header">
                    <h1>
                        Listado de Ventas
                    </h1>
                </section>
                <!-- Main content -->
                <section class="content">
                    <div class="box box-solid box-primary">
                        <div class="box-header with-border">
                            <h6 class="box-title"><i class="fa fa-calendar-check-o"></i> BUSQUEDA </h6>
                        </div>
                        <div class="box-body">
                            <div class="box-body">
                            </div>
                            <div class="form-horizontal">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-horizontal">                                        
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="control-label col-md-4">FECHA INICIO</label>
                                                        <div class="col-md-6">
                                                            <input data-column="1" id="bfecha_inicio" value=""
                                                                   class="form-control datepicker search-input-text" readonly
                                                                   type="text"> <span class="help-block"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="control-label col-md-4">FECHA FINAL</label>
                                                        <div class="col-md-6">
                                                            <input data-column="2" id="bfecha_final" value=""
                                                                   class="form-control datepicker search-input-text" readonly
                                                                   type="text"> <span class="help-block"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label class="control-label col-md-4">CLIENTE</label>
                                                        <div class="col-md-6">
                                                            <input data-column="3" id="cliente" value=""
                                                                   class="search-input-text form-control" style="width: 100%">
                                                        </div>
                                                    </div>
                                                </div>                                        
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <br>
                        <div class="col-xs-12">
                            <div class="box box-solid box-primary">
                                <div class="box-header">
                                    <h3 class="box-title">
                                        <i class="fa fa-check-circle"></i> LISTADO DE VENTAS
                                    </h3>

                                </div>
                                <br>

                                <hr>
                                <!-- /.box-header -->
                                <div class="box-body">                        
                                    <table id="tabla_ventas"
                                           class="table table-bordered table-condensed table-hover responsive"
                                           cellspacing="0" width="100%">
                                        <thead class="background-thead">
                                            <tr>
                                                <th>Nº</th>
                                                <th>CLIENTE</th>
                                                <th>TOTAL</th>
                                                <th style="width: 200px;">FEHA</th>
                                                <th>DETALLE</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>

<!-- end snippet -->

EN MI JQUERY

    var comprobante;

$(document).ready(function () {

    $(function () {

        tabla_ventas = $('#tabla_ventas').DataTable({
            "processing": true,
            "serverSide": true,
            "order": [],

            "ajax": {
                "url": baseurl + 'Caja/listar_ventas',
                "type": "POST",
                "data": {"ci_csrf_token": ciCsrfToken}
            },

            "columnDefs": [
                {
                    "targets": [-1, 0, 1, 2, 3],
                    "orderable": false
                }
            ],
            "language": {
                "processing": "Procesando...",
                "lengthMenu": "Mostrar _MENU_ registros",
                "zeroRecords": "No se encontraron resultados",
                "emptyTable": "Ningún dato disponible en esta tabla",
                "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                "infoPostFix": "",
                "search": "Buscar:",
                "url": "",
                "infoThousands": ",",
                "loadingRecords": "Cargando...",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
                "aria": {
                    "sortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
            "lengthMenu": [[10, 15, 20, 25], [10, 15, 20, 25]],
            "iDisplayLength": 10,
        });



        $('.datepicker').datepicker({
            autoclose: true,
            format: "yyyy-mm-dd",
            todayHighlight: true,
            orientation: "top auto",
            todayBtn: true,
            todayHighlight: true,
            language: "es"
        });


        $('.search-input-text').on('keyup click', function () {
            var i = $(this).attr('data-column');
            var v = $(this).val();
            tabla_ventas.columns(i).search(v).draw();
        });


        $('.search-input-select').on('change', function () {
            var i = $(this).attr('data-column');
            var v = $(this).val();
            tabla_ventas.columns(i).search(v).draw();
        });

        $('#bfecha_inicio').on('change', function () {   // for select box
            var i = $(this).attr('data-column');
            var v = $(this).val();
            tabla_ventas.columns(i).search(v).draw();
        });

        $('#bfecha_final').on('change', function () {   // for select box
            var i = $(this).attr('data-column');
            var v = $(this).val();
            tabla_ventas.columns(i).search(v).draw();
        });
    });
});

EN MI CONTROLADOR

public function listar_ventas() {
        $pagos = $this->caja->obtener_data_pagos();
        $data = array();
        $no = $_POST ['start'];
        foreach ($pagos as $pago) {
            $no ++;
            $row = array();
            $row [] = '<div class="text-left">' . 'VEN000' . $pago->id_venta . '</div>';
            $row [] = $pago->nombres_completos;
            $row [] = $pago->total;
            $row [] = $pago->fecha_venta;
            $row [] = '<div onclick="detalle_venta(' . $pago->id_venta . ')" class="text-center details-control"><a><i class="fa fa-plus-circle fa-2x"></i></a></div>';
            $data [] = $row;
        }
        $output = array(
            "draw" => $_POST ['draw'],
            "recordsTotal" => $this->caja->contador_total_pagos(),
            "recordsFiltered" => $this->caja->contador_filtrado_pagos(),
            "data" => $data
        );
        echo json_encode($output);
    }

EN MODELO "COMO OBSERVACION 'v_ventas' es la vista creada en mysql"

var $t_view_pagos = 'v_ventas';
    var $query_pagos = null;

    private function _obtener_data_query_pagos() {

        $sql = "SELECT * FROM " . $this->t_view_pagos;
        $sql .= " WHERE 1 = 1 ";

        if (!empty($_POST ['columns'] [1] ['search'] ['value'])) { // Fecha inicial
            $sql .= " AND fecha_venta >= '" . date_format(date_create($_POST ['columns'] [1] ['search'] ['value']), "Y-m-d") . "' ";
        }

        if (!empty($_POST ['columns'] [2] ['search'] ['value'])) { // Fecha final
            $sql .= " AND fecha_venta <= '" . date_format(date_create($_POST ['columns'] [2] ['search'] ['value']), "Y-m-d") . "' ";
        }

        if (!empty($_POST ['columns'] [3] ['search'] ['value'])) { // Cliente
            $sql .= " AND nombres_completos like '" . $_POST ['columns'] [3] ['search'] ['value'] . "%' ";
        }

        $this->query_pagos = $sql;
        if ($_POST ['length'] != - 1)
            $sql .= "LIMIT " . $_POST ['start'] . ", " . $_POST ['length'];
        return $sql;
    }

    function obtener_data_pagos() {
        $sql = $this->_obtener_data_query_pagos();
        $query = $this->db_caja->query($sql);
        return $query->result();
    }

    function contador_filtrado_pagos() {
        $query = $this->db_caja->query($this->query_pagos);
        return $query->num_rows();
    }

    public function contador_total_pagos() {
        $this->db_caja->from($this->t_view_pagos);
        return $this->db_caja->count_all_results();
    }
2
  • Muchas Gracias Ivan, funciono perfectamente Commented el 19 jun. 2017 a las 17:38
  • Ya con esto dominas las DataTable en CI (Y) suerte Commented el 19 jun. 2017 a las 17:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.