Я хочу иметь возможность инициализировать мой select2 после каждого ajax-запроса. Текущий код работает в первый раз, когда я загружаю эту таблицу данных, но при последующих поисках select2 не инициализируется. Есть ли способ, которым я могу заставить это работать? В частности, есть ли обратный вызов, который я могу использовать для инициализации select2, как я делаю в fnInitComplete callback. Этот форум имел что-то полезное, но в моем случае я использую рендеринг на стороне сервера и затем хотите инициализировать 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'>>"
});