0

Buenas, tengo un DataTable en el cual varios botones con modales, en esos modales tengo varios <select> con su select2, estos me funcionan correctamente, pero cuando quiero utilizar la misma clase de uno de esos select2 para hacer otro desplegable en la DataTable no me funciona, no sé si puede llegar a ser por el scope de las variables.. no lo comprendo.

HTML

<table id="tblClientes" class="table table-bordered dataTable"> <thead> <tr role="row"> <th>ID</th> <th>Código</th> <th>Cliente</th> <th>Telefono</th> <th>Direccion</th> <th>Email</th> <th width="8%">Acciones</th> </tr> </thead> </table>

// SCRIPTS DE JQUERY, DATATABLE, SELECT2, ETC ETC. 
<script src="/js/select2-ajax.js"></script>
<script src="/js/clientes.js"></script>

select2-ajax.js

$(document).ready(function(){ $(".select_clientes").select2({ placeholder: 'Seleccionar..', ajax: { url: "/select2/select2-clientes.php", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (data, page) { return { results: data.items }; }, cache: true }, escapeMarkup: function (markup) { return markup; }, }); }

clientes.js

$(document).ready(function() { var table = $('#tblClientes').DataTable({ 'paging': true, 'info': true, 'filter': true, 'stateSave': true, 'processing': true, 'serverSide': true, 'ajax': { "method": "POST", "url": "/datatables/clientes" }, "columns": [ {"data": "id"}, {"data": "cod"}, { render: function() { return "<select class='select_clientes'></select>"; } }, {"data": "telefono"}, {"data": "direccion"}, {"data": "email"}, { render: function() { return "<button id='editar'></button>"; } } ] });

Cualquier error ortográfico es porque he tenido que adaptar un poco el código para que se entienda mejor, pero todo está correcto en mi código excepto el problema indicado arriba.

Gracias de antemano.

1 respuesta 1

0

Buenas, el select2 no te funciona en el DataTable pues aún la columna (Cliente) donde quieres renderizar el plugin select2 mediante la clase .select_clientes no se ha creado. Entonces te recomiendo poner el codigo del select2 dentro del evento initComplete del DataTable para garantizar que la columna (Cliente) exista y esto te va a garantizar además que en tus modals se renderize el select2 mediante la misma clase.

$(document).ready(function() {
 var table = $('#tblClientes').DataTable({
    'paging': true,
    'info': true,
    'filter': true,
    'stateSave': true,
    'processing': true,
    'serverSide': true,
    'ajax': {
        "method": "POST",
        "url": "/datatables/clientes"
    },
    "columns": [
        {"data": "id"},
        {"data": "cod"},
        {
            render: function() {
                return "<select class='select_clientes'></select>";
            }
        },
        {"data": "telefono"},
        {"data": "direccion"},
        {"data": "email"},
        {
            render: function() {
                return "<button id='editar'></button>";
            }
        }
    ],
     "initComplete": function( settings, json ) {

   $(".select_clientes").select2({
    placeholder: 'Seleccionar..',
    ajax: {
        url: "/select2/select2-clientes.php",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, page) {
            return {
                results: data.items
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; }
});

}
});
1
  • No conocía esa función del dataTable, mañana lo pruebo en el trabajo y si me funciona te la doy correcta la solución, gracias por la respuesta !
    – ccfz
    Commented el 13 nov. 2017 a las 19:44

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.