在dataTable中使用带有codigniter的jquery显示FancyBox

时间:2017-02-12 14:20:39

标签: javascript php jquery codeigniter fancybox

我会直截了当地说。首先,我打电话给我的控制器,然后为" ajax_list_jefe"设置参数。如你所见,我在这个方法中声明了fancybox。

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class empleadoController extends CI_Controller {

  function __construct()
  {
    parent::__construct();
    $this->load->model('EmpleadoModel','customers');
  }

  function index(){
    $this->load->view('list_empleados');
  }

function ajax_list_jefe($idUsuario){
    $this->load->model('EmpleadoModel');
    $this->load->model('EmpresaModel');
    $this->load->model('FuncionModel');
    $this->load->model('TiendaModel');
    $empleado = $this->EmpleadoModel->get_empleado_usuario($idUsuario);
    //  var_dump($idUsuario);
    //    var_dump($empleado);
    $funcion = $this->FuncionModel->get_funcion_id($empleado[0]->idfuncion);
     $tienda = $this->TiendaModel->get_tienda_id($empleado[0]->idtienda);

    $list = $this->EmpleadoModel->get_datatables($tienda[0]->idregion);
        $data = array();
        $no = $_POST['start'];
        foreach ($list as $customers) {
            $row = array();
            $row[] = $customers->idempleado;
            $row[] = '<td><a'. ' data-fancybox-type="iframe" class="fancybox" href= ' .site_url("mapaController/mapa_tienda/". $customers->nombretienda ).">". $customers->nombretienda.'</td>';
            $row[] = $customers->cedula;
            $row[] = $customers->nombrecompleto;
            $row[] = $customers->fecha_ingreso;
            $row[] = $customers->nombrecargo;
            $row[] = $customers->nombreempresa;
            $row[] = $customers->email;
            if (empty($customers->usr_open)) {
               $row[] = 'Vacio';
            }else {
               $row[] = $customers->usr_open;
            }

            if (empty($customers->usr_oda)) {
               $row[] = 'Vacio';
            }else {
               $row[] = $customers->usr_oda;
            }

            if (empty($customers->siv)) {
               $row[] = 'Vacio';
            }else {
               $row[] = $customers->siv;
            }
            $row[] = $customers->estado;
            $row[] = '<td><button type="button" class="btn btn-success btn-block">Editar</button></td></tr><td><button type="button" class="btn btn-info btn-block">Traslado</button></td></tr>';

            $data[] = $row;
        }

        $output = array(
                        "draw" => $_POST['draw'],
                        "recordsTotal" => $this->EmpleadoModel->count_all(),
                        "recordsFiltered" => $this->EmpleadoModel->count_filtered($tienda[0]->idregion),
                        "data" => $data,
                );
        echo json_encode($output);
  }

在我看来&#34; list_empleados.php&#34;

之后
<div class="main-panel">
    <nav class="navbar navbar-default navbar-fixed">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-left">
                </ul>
        <li class="separator hidden-lg hidden-md"></li>
                </ul>
            </div>
        </div>
    </nav>
                              <div class="container">
                                  <h1 style="font-size:20pt">Visualizacion de Personal.</h1>
                                  <table id="table" class="col-md-12 table-bordered table-striped table-condensed cf display" width="100%">
                                      <thead>
                                          <tr>
                                            <th>idempleado</th>
                                            <th>nombretienda</th>
                                            <th>cedula</th>
                                            <th>nombrecompleto</th>
                                            <th>fecha_ingreso</th>
                                            <th>nombrecargo</th>
                                            <th>nombreempresa</th>
                                            <th>email</th>
                                            <th>usr_open</th>
                                            <th>usr_oda</th>
                                            <th>siv</th>
                                            <th>estado</th>
                                            <th>Acciones</th>
                                          </tr>
                                      </thead>
                                      <tbody>
                                      </tbody>

                                      <tfoot>
                                          <tr>
                                            <th>idempleado</th>
                                            <th>nombretienda</th>
                                            <th>cedula</th>
                                            <th>nombrecompleto</th>
                                            <th>fecha_ingreso</th>
                                            <th>nombrecargo</th>
                                            <th>nombreempresa</th>
                                            <th>email</th>
                                            <th>usr_open</th>
                                            <th>usr_oda</th>
                                            <th>siv</th>
                                            <th>estado</th>
                                            <th>Acciones</th>
                                          </tr>
                                      </tfoot>
                                  </table>
                              </div>


                            </div>

                        </div>
                        <!-- <footer class="footer">
                          <div class="container-fluid">
                              <p class="copyright pull-right">
                                  &copy; <script>document.write(new Date().getFullYear())</script> <a href="http://www.google.com"><?php echo "< DEVotion />"; ?></a>Piensa en grande!.</p>
                          </div>
                        </footer> -->
<script src="<?php echo base_url('assets/js/jquery-2.2.4.min.js')?>"></script>
<script src="<?php echo base_url('assets/js/jquery.dataTables.min.js')?>"></script>


<script type="text/javascript">


var table;

$(document).ready(function() {

    //datatables
    table = $('#table').DataTable({

        "processing": true, //Feature control the processing indicator.
        "serverSide": true, //Feature control DataTables' server-side processing mode.
        "order": [], //Initial no order.
        "search": "",
        // Load data for the table's content from an Ajax source
        "ajax": {
          "url": "<?php if($idfuncion == 4){
             echo site_url('empleadoController/ajax_list/'.$idusuario);
          }else{
             echo site_url('empleadoController/ajax_list_tienda/'.$idusuario.'/'.$idtienda);
          }?>",


            //"url": "<?php echo site_url('empleadoController/ajax_list/'.$idusuario)?>",
            "type": "POST"
        },

        //Set column definition initialisation properties.
        "columnDefs": [
        {
            "targets": [ 0 ], //first column / numbering column
            "orderable": false, //set not orderable
        },
        ],

    });

    $('#table tbody').on( 'click', '#editar', function () {
        var data = table.row( $(this).parents('tr') ).data();
        alert( data[0] +"'s salary is: "+ data[ 5 ] );
    } );

    $('#table tbody').on( 'click', '#mapa', function () {
        var data = table.row( $(this).parents('tr') ).data();
        $("#mapa").fancybox({
                      'frameWidth':966,
                      'frameHeight': 547,
                      'hideOnContentClick': false,
                      'openEffect': 'fade',
                      'closeEffect': 'fade',
                      'callbackOnShow': function() {
                                    $("#container ul#thumbnails a").click(function(){
                                    var largePath = $(this).attr("href");
                                    $("#largeId").fadeOut("fast").hide();
                                    $("#largeId").attr({ src: largePath });
                                    $("#largeId").fadeIn("slow");return false;
                            });
                       $("#container ul#thumbnails a").click(function(){
                       $('.active').removeClass('active');
                       $(this).addClass("active");
                            });
                      }
         });



    });

    $(".fancybox").fancybox({
        //width: '70%',
        //height: '70%',
        //maxWidth: 800,
        //maxHeight: 800,
        //fitToView: true,
        autoSize: true,
        closeClick: false,
        openEffect: 'fade',
        closeEffect: 'fade'
    });

});
</script>

这是页面显示信息的方式:

...这就是我想在fancybox中显示的内容:

我做错了什么?

更新

这是包含fancybox信息的<td>

<td><a id="mapa" data-fancybox-type="iframe" class="fancybox" href="http://localhost/PlantillaClaro/mapaController/mapa_tienda/ACOYAPA">ACOYAPA</a></td>

0 个答案:

没有答案