Skip to main content
Revertido a la revisión 1 - Aprobación de edición anulada por el propietario de la publicación o un moderador
Origen Enlace
ccfz
  • 324
  • 2
  • 20

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>
$(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; },
    });
}
$(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>";
                }
            }
        ]
    });
Origen Enlace
ccfz
  • 324
  • 2
  • 20

Select2 no funciona en DataTable

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.