Home / Questions / 116987
Accepted
ccfz
Asked: 2020-11-14 04:39:29 +0800 CST 2020-11-14 04:39:29 +0800 CST

Select2 not working on DataTable

  • 772

Hello, I have a DataTable in which several buttons with modals, in those modals I have several <select>with their select2, these work correctly for me, but when I want to use the same class of one of those select2 to make another dropdown in the DataTable it does not work for me, I don't know if it can be due to the scope of the variables... I don't understand.

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

clients.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>"; } } ] });

Any misspelling is because I had to adapt the code a bit to make it easier to understand, but everything is correct in my code except for the problem noted above.

Thanks in advance.

jquery

1 Answers

  1. Best Answer

    Hi, select2 does not work for you in the DataTable because the column (Customer) where you want to render the select2 plugin through the .select_customers class has not yet been created. Then I recommend you to put the select2 code inside the initComplete event of the DataTable to guarantee that the column (Customer) exists and this will also guarantee that select2 is rendered in your modals through the same class.

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