0

We are trying to bind select2 to the select box created in datatable action column when processing it shows select2 box but after load end it shows normal box with out select2 effect. We are creating one column in action as dropdown where we will be showing users in dropdown to select.

I tried with drawcollection as well still the issue reflect the same.

    t.tblHelpers = {
        actions: function () {
            return function (d) {
                return '<select name="approverName" value="' + d.id + '" id="location_' + d.id + '" class="a_location"></select>';
            };
        }
    };


    t.dTbl = t.locationApproverTable.DataTable({
        autoWidth: false,
        aoColumnDefs: [{
            targets: 1,
            bSortable: true,
            render: t.tblHelpers.actions()
        }],
        order: [[0, 'asc']],
         processing: true,
         serverSide: true,
        ajax: { 
            url: t.config.url.get_locations, 
            type: "get",
            data: function(d) {
                d._token = t.getToken();
            }
        },
        columns: [
            {data: 'a.text'},
            {data: 'a.'}
        ],
        fnInitComplete: function(oSettings, json) {
            var api = this.api();
            var searchBox  = '<div class="input-group table-search-btns">'
            +'<input type="text" class="form-control searchbox plain-search" placeholder="Press enter with search text" />'
            +'<span class="input-group-addon btn-searchbox" data-toggle="tooltip" data-placement="left" data-original-title="Search"><i class="ps-icon plain-search-icon"></i></span>'
            +'<span class="input-group-addon btn-reload-list" data-toggle="tooltip" data-placement="left" data-original-title="Refresh List"><i class="ps-icon fa fa-refresh"></i></span>'
            +'</div>';
            $(".a_location").select2({width:'100%'});;          
        },
        drawCollection:function(){
            console.log($(".a_location"));
            $(".a_location").select2({width:'100%'});
        }
    });
santosh
  • 51
  • 6
  • Have you looked at the [various other questions](https://www.google.com/search?q=select2+in+datatables+site:stackoverflow.com) on SO with answers showing how to use select2 with DataTables? Do any of those help? – andrewJames Jul 10 '22 at 16:33
  • What is drawCollection? Where are you getting that? It's not a DataTables option. – andrewJames Jul 10 '22 at 16:42

1 Answers1

1

Got the issue. The issue was drawCallback. As datatable loads data as fresh after every load hence the select2 instance need to be called after every draw. To enable this we use drawCallback.


   t.dTbl = t.locationApproverTable.DataTable({
        autoWidth: false,
        aoColumnDefs: [{
            targets: 1,
            bSortable: true,
            render: t.tblHelpers.actions()
        }],
        order: [[0, 'asc']],
         processing: true,
         serverSide: true,
        ajax: { 
            url: t.config.url.get_locations, 
            type: "get",
            data: function(d) {
                d._token = t.getToken();
            }
        },
        columns: [
            {data: 'a.text'},
            {data: 'a.'}
        ],
        fnInitComplete: function(oSettings, json) {
            var api = this.api();
            var searchBox  = '<div class="input-group table-search-btns">'
            +'<input type="text" class="form-control searchbox plain-search" placeholder="Press enter with search text" />'
            +'<span class="input-group-addon btn-searchbox" data-toggle="tooltip" data-placement="left" data-original-title="Search"><i class="ps-icon plain-search-icon"></i></span>'
            +'<span class="input-group-addon btn-reload-list" data-toggle="tooltip" data-placement="left" data-original-title="Refresh List"><i class="ps-icon fa fa-refresh"></i></span>'
            +'</div>';
        },
        drawCallback:function(){
            t.frmEl.locationApproverSelect2 = t.frmEl.locationApproverDiv.find('.a_location');
            t.frmEl.locationApproverSelect2.select2({width:"200%", placeholder:'select user'});
        }
    });
santosh
  • 51
  • 6