使用服务器端渲染在数据表中初始化Select2

时间:2018-09-13 10:16:00

标签: javascript jquery database jquery-select2 serverside-rendering

我希望能够在每个ajax请求之后初始化我的select2。当前代码在我第一次加载此数据表时起作用,但是在后续搜索中,未初始化select2。有什么办法可以使它起作用?特别是有一个回调,我可以像在 fnInitComplete 回调中一样使用它来初始化select2。This forum有一些有用的功能,但在我的情况下,我正在使用服务器端渲染,然后想要在表更新后初始化select2。此外,文档中没有提及我可以使用的任何回调,因此请在此处寻求帮助。

var table = $('#dt-table').dataTable({
    "sPaginationType": "bootstrap",
    "processing": true,
    "bServerSide": true,
    'bPaginate' : true,
    "bStateSave": true,
    "bInfo": false,
    "sAjaxSource": '/rtbdops/all_data/?'+'&exposure='+$('#exposure-val').val()+'&creative_type='+$('#creative-type').val()+'&created_on='+$('#created-val').val()+'&search_by='+$('#search-by-val').val()+'',
    "aaSorting": [[ 4, 'desc' ]],
    "aoColumns": [
            { "bSearchable": false,"bSortable": false ,"sClass":'hide-column advertiser-id wrap-column notranslate'},
            { "bSearchable": false,"bSortable": false,"sClass":'wrap-column'},
            { "bSearchable": false ,"bSortable": false,"sClass":'hide-column wrap-column creative-id notranslate'},
            { "bSearchable": false ,"bSortable": false,"sClass":'wrap-column notranslate'},
            { "bSearchable": false,"bSortable": false ,"sClass":'wrap-column ss'},
            { "bSearchable": false ,"bSortable": false,"sClass":'wrap-column'},
            { "bSearchable": false,"bSortable": false,"sClass":'wrap-column'},
            { "bSearchable": false ,"bSortable": false,"sClass":'wrap-column'},
            { "bSearchable": false ,"bSortable": false,"sClass":'check-td'},
            ],

"fnPreDrawCallback": function(oSettings ) {
                    $('.visible-block').remove();
                    $('.checkall').prop('checked', false);
                    $('.showUnCheckedCheckboxes').prop('checked', false);
                    console.log("PreDrawCallBack called");

}, "fnInitComplete": function (oSettings) {
        $('.iab-category').select2({
                placeholder: 'Select A Category',
                // allowClear: false
        });
        console.log("Init Complete");
    },
      "aoColumnDefs": [
                    {
                        aTargets:[0],
                        visible:"false",
                         fnRender: function (aaData, type, full) {
                            var advertiserId = aaData.aData[0];
                            return advertiserId;
                         }
                    },
                    {
                        aTargets:[1],
                        visible:"false",
                         fnRender: function (aaData, type, full) {
                            var advertiserId = aaData.aData[0];
                            var creativeId = aaData.aData[2];
                            var advertiserName = aaData.aData[1];
                            return '<div><a href=/rtbdops/creative_detail/advertiser/'+advertiserId+'/creative/'+creativeId+'/ target="_blank">'+advertiserName+'</a> '+ creativeId + '<div>';
                         }
                    },
                    {
                        aTargets:[2],
                        visible:"false",
                         fnRender: function (aaData, type, full) {
                            var creativeId = aaData.aData[2];
                            return creativeId;
                         }
                    },
                    {
                          aTargets:[3],
                          visible:"false",
                          fnRender: function (aaData, type, full) {
                              var selectedIABCategory = aaData.aData[3];
                              // console.log(selectedIABCategory);
                              var allIABCategory = getIABCategories().data;
                              // console.log(allIABCategory);
                              var test_creative_id=aaData.aData[2];
                              var creative_id=test_creative_id.replace(/[^a-zA-Z0-9 ]/g, "");
                              var test_str="<div class='iab-category-"+creative_id+"'><b>Select-Category:</b></div><div><select class='iab-category' id='iab-category-"+creative_id+"' multiple='multiple' style='width: 100%'>";
                              allIABCategory.forEach(function (value) {
                                  test_str+="<option value="+value.id;
                                  if($.inArray(value.id, selectedIABCategory) != -1){
                                      test_str+=" selected='selected'";
                                  }
                                  test_str+=">"+value.name+"</option>";

                              });
                              test_str+='</select></div>';
                              // console.log(test_str);
                              return test_str;
                          }
                    },
                    {
                        aTargets:[4],
                         fnRender: function (aaData, type, full) {
                            var tableType ="";
                            var canEdit = aaData.aData[6];
                            if(canEdit != "true"){
                                 tableType = "disabled"
                            }
                            var exposureLevel = aaData.aData[4];
                            var fString = ""
                            for(var i =0;i<exposureLevel.length;i++){
                                 fString+= " <input type='radio' name='status_type' value='"+exposureLevel[i][0]+"'  "+exposureLevel[i][1] +" "+tableType+">";
                                 fString+= " <b>"+exposureLevel[i][0]+"</b><br>"
                            }
                            fStringN ="<form>"+fString+"</form>";
                            var test_creative_id=aaData.aData[2];
                            creative_id=test_creative_id.replace(/[^a-zA-Z0-9 ]/g, "");
                            test="<div class='btn-block-"+creative_id+"' style='display:none'><button class='close-btn btn' >Cancel</button>  <button class='save-btn btn btn-primary'>Save</button></div>";
                            // var rejectionReason=aaData.aData[8];
                             var rejectionReason = getRejectionReasons();
                            test_str="<div class='exposure-desc-"+creative_id+"' style='display:none'><b>Select-Description:</b><select id="+creative_id+" class='select-box'>";
                            for(var i =0;i<Object.keys(rejectionReason).length;i++) {
                                 test_str+="<option value="+i+">"+rejectionReason[i]+"</option>";
                            }
                            test_str+='</select></div>'
                            fStringN=fStringN+test_str+test;
                            console.log("fnRender function called");
                            return fStringN;
                         }
                    },
                    {
                        aTargets:[5],
                         fnRender: function (aaData, type, full) {
                             var rData ;
                             var description = aaData.aData[5];
                             if (!description) {
                                 rData = "NA";
                             } else {
                                 rData = description
                             }
                            return rData;
                         }
                    },
                    {
                        aTargets:[6],
                        fnRender: function (aaData, type, full) {
                            var creativeType = aaData.aData[7];
                            // creativeType = 0 represents BANNER, 1 represents NATIVE, 2 represents VIDEO
                            var rData ;
                            switch(creativeType) {
                                case 0:
                                    var html = aaData.aData[8];
                                    rData = "<iframe width='320' height='150' target='_blank' sandox='allow-scripts' srcdoc='"+html+"'></iframe>";
                                    break;
                                case 1:
                                    var title='',description='';
                                    var nativeJson = aaData.aData[8];
                                    if (nativeJson.title) {
                                        title='<b><u>Title: </b></u>'+nativeJson.title;
                                    }
                                    if (nativeJson.description) {
                                        description='<b><u>Description: </b></u>'+nativeJson.description;
                                    }
                                    rData = '<div>'+title+' </div><div>'+description+'</div><div><a href='+nativeJson.tags+' target="_blank"><img  src='+nativeJson.banner.image_url+'></div>'+'<div style="padding-top:10px;"><img  src='+nativeJson.banner.icon_url+'></a></div>';
                                    break;
                                case 2:
                                    videoJson = aaData.aData[8];
                                    if(videoJson.url) {
                                        rData='<video width="300" height="250" controls><source src="'+videoJson.url+'" type="video/mp4"></video>';
                                    } else {
                                        rData='NA';
                                    }
                            }
                            return rData;
                        } 
                    },
                    {
                        aTargets:[7],
                        fnRender: function (aaData, type, full) {
                            var creativeType = aaData.aData[7];
                            switch (creativeType) {
                                case 0:
                                    return 'BANNER';
                                case 1:
                                    return 'NATIVE';
                                case 2:
                                    return 'INTERSTITIAL_VIDEO';
                            }
                        }
                    },
                    {
                         aTargets:[8],
                         fnRender: function (aaData, type, full) {
                            return '<input name="checkone" type="checkbox"  class="checkone creative-check" style="width:20px;height:20px;" />';
                         }
                    },
                ],

    "iDisplayLength": 10,
    "info":true,
    "oLanguage": {
        "sLengthMenu": "_MENU_",
        "sLoadingRecords": "Please wait - loading...",
        "sSearch": "",
        "sZeroRecords": "No results found.",
        "sInfoFiltered": "",
    },
    // "sDom":"<'dt-search-blk clearfix'<'search-nav pull-left'f> r>t<'datatable-hr'><'row'<lp><'datatable-hr clearfix'>>"
    "sDom": "'<'dt-search-blk clearfix'<'search-nav pull-left'f> r><'test pull-left'i>t<'datatable-hr'><'row'<lp><'datatable-hr clearfix'>>"

});

0 个答案:

没有答案