JQuery DataTableはスタイルをとらない

私はAdminBSB - Material Designで作業しています。特定のスタイルの情報を表示するためにデータテーブルでajaxを呼び出すとき、データテーブルはスタイルをとらない。私はajaxなしでデータテーブルを扱うとき、それはスタイルをうまく取るが、私はajaxを使用しないときは、入力フィールドのスタイルを取り、選択します。スタイルが入力フィールドと選択フィールドを使用しないのはなぜですか？ここに私のコードは次のとおりです。 はJQuery：JQuery DataTableはスタイルをとらない

//INICIO Data Table Gestión de Solicitudes 
$('#search_button').click(function(){ 
    //console.log("hola"); 
    var find = $('#find').val(); 
    var new_find = find.split('/'); //Consultado (12-2017) en: https://stackoverflow.com/questions/16711504/how-to-split-the-string-using-jquery-or-javascript 
    //console.log(new_find[0]+" ID: "+new_find[1]); 
    if(find === ''){ 
     showNotification('bg-red', 'Debe escribir el nombre o correo del cliente a buscar', 'top', 'center', '', ''); 
     $('input[id=find]').focus(); 
    }else{ 
     data_table.destroy(); //Consultado (12-2017) en: https://datatables.net/manual/tech-notes/3 

     data_table = $('.js-exportable').DataTable({ //Consultado (12-2017) en: https://datatables.net/examples/server_side/post.html 
      ajax: { //Consultado (12-2017) en: https://datatables.net/reference/option/ajax.dataSrc 
       url: '/minerva/get_request', 
       cache: false, 
       type: 'POST', 
       data: {user_id: new_find[1]}, 
       dataSrc: function (json) { //Consultado (12-2017) en: https://medium.com/code-kings/datatables-js-how-to-modify-your-returned-ajax-json-data-before-sending-it-to-your-html-table-24a92244bc40 
        //console.log(json.data.documents); 
        var return_data = new Array(); 
        //for(var i=0;i< json.length; i++){ 
        for(dat in json.data.documents){ 
         //console.log(json.data.documents[dat].document_class); 
         return_data.push({ 
          //'title': json[i].title, 
          //'url' : '<img src="' + json[i].url + '">', 
          //'date' : json[i].date 
          //'request_id': json.data.request_id, 
          'document_class': json.data.documents[dat].document_class, 
          'doc_max_pages': json.data.documents[dat].doc_max_pages, 
          'doc_type': json.data.documents[dat].doc_type, 
          'use_type': json.data.documents[dat].use_type, 
          'is_possess': json.data.documents[dat].is_possess, 
         }) 
        } 
        //console.log(return_data); 
        return return_data; 
       } 
      }, 
      searching : true, 
      columns: [ 
       //{ data: 'id' }, 
       { data: 'doc_max_pages' }, 
       { data: 'document_class' }, 
       { data: 'use_type' }, 
       //{ data: 'doc_type' }, 
       //{ data: 'is_possess' }, 
       //{ data: 'use_type' }, 
       //{ data: 'is_possess' } 
      ], 
      columnDefs: [//Consultado (12-2017) en: https://datatables.net/examples/ajax/null_data_source.html y https://datatables.net/reference/option/columnDefs 
       { 
        targets: [ 3 ], 
        data: null, 
        defaultContent: '<div class="col-md-12">' + 
        '<label class="fileContainer btn btn-primary m-t-1 waves-effect">' + 
        '<p style="color: white";><i class="material-icons">file_upload</i></p>' + 
        '<input type="file" class="fileToUpload" id="fileToUpload" name="fileToUpload">' + 
        '</label>' + 
        '&nbsp;&nbsp;pdf, jpg, png, jpeg o gif' + 
        '</div>' + 
        '<div class="col-lg-12 col-md-12 col-sm-12 col-xs-24">' + 
        '<div class="form-group form-float">' + 
        '<div class="form-line">' + 
        '<input type="text" id="file_name" name="file_name" class="form-control" readonly>' + 
        '<label class="form-label">Nombre del archivo</label>' + 
        '</div>' + 
        '</div>' + 
        '</div>' + 
        '<br/><br/><br/>' + 
        '<div class="col-md-12">' + 
        '<select class="form-control show-tick" id="reception" name="reception" data-live-search="true" required>' + 
        '<option value="">-- Medio Recepción --</option>' + 
        '<option value="Medio 1">Medio 1</option>' + 
        '<option value="Medio 2">Medio 2</option>' + 
        '<option value="Medio 3">Medio 3</option>' + 
        '</select>' + 
        '</div>' + 
        '<br/><br/><br/>' + 
        '<div class="col-md-12">' + 
        '<select class="form-control show-tick" id="file_type" name="file_type" data-live-search="true" required>' + 
        '<option value="">-- Tipo de Archivo --</option>' + 
        '<option value="pdf">pdf</option>' + 
        '<option value="jpg">jpg</option>' + 
        '<option value="png">png</option>' + 
        '<option value="jpeg">jpeg</option>' + 
        '<option value="gif">gif</option>' + 
        '</select>' + 
        '</div>' 
       }, 
       { 
        targets: [ 4 ], 
        data: null, 
        defaultContent: '<button type="button" class="btn btn-primary m-t-1 waves-effect" title="Añadir Página del Documento"><i class="material-icons">add_circle</i></button>&nbsp;&nbsp;0/1' 
       }, 
       { 
        targets: [ 5 ], 
        data: null, 
        defaultContent: '<button type="button" class="btn btn-primary m-t-1 waves-effect" data-toggle="modal" data-target="#largeModal_np" title="No Posee"><i class="material-icons">remove_circle</i></button>' 
       }, 
       { 
        targets: [ 6 ], 
        data: null, 
        defaultContent: '<button type="button" class="btn btn-primary m-t-1 waves-effect" data-toggle="modal" data-target="#largeModal_bs" title="Borrar Solicitud"><i class="material-icons">delete_forever</i></button>' 
       } 
      ], 
      language: { 
       url: '/assets/kavak/minerva/complaints/js/plugins/jquery-datatable/extensions/Spanish.json', 
       buttons: { //Consultado (01-2016) en: https://datatables.net/extensions/buttons/examples/flash/copyi18n.html 
        copyTitle: 'Copiado en el portapapeles', 
        copySuccess: { //Consultado (01-2016) en: https://datatables.net/reference/button/copyHtml5 
         1: "Copiada una fila al portapapeles", 
         _: "Copiadas %d filas al portapapeles" 
        } 
       } 
      }, 
      dom: 'Bfrtip', 
      buttons: [ 
       { 
        extend: 'copy', 
        text: 'Copiar', 
        exportOptions: { 
         modifier: { 
          page: 'all' 
         } 
        } 
       }, 
       { 
        extend: 'csv', 
        text: 'CSV', 
        //title: $("#title").val(), 
        exportOptions: { 
         modifier: { 
          search: 'none' 
         } 
        } 
       }, 
       { 
        extend: 'excel', 
        text: 'Excel', 
        //title: $("#title").val(), 
        exportOptions: { 
         modifier: { 
          page: 'all' 
         } 
        } 
       }, 
       { 
        extend: 'pdf', 
        text: 'PDF', 
        //title: $("#title").val(), 
        pageSize: 'LETTER', 
        exportOptions: { 
         modifier: { 
          page: 'all' 
         } 
        } 
       }, 
       { 
        extend: 'print', 
        text: 'Imprimir', 
        //title: $("#title").val(), 
        pageSize: 'LETTER' 
       } 
      ], 
      pageLength: 5, //Consultado (12-2017) en: https://datatables.net/reference/option/pageLength 
      responsive: true 
     }); 
    } 
}); 

var data_table = $('.js-exportable').DataTable({ 
    /*columnDefs: [ //Consultado (12-2017) en: https://datatables.net/examples/basic_init/hidden_columns.html 
     { 
      targets: [ 0 ], 
      visible: false 
     } 
    ],*/ 
    searching : true, 
    language: { 
     url: '/assets/kavak/minerva/complaints/js/plugins/jquery-datatable/extensions/Spanish.json', 
     buttons: { //Consultado (01-2016) en: https://datatables.net/extensions/buttons/examples/flash/copyi18n.html 
      copyTitle: 'Copiado en el portapapeles', 
      copySuccess: { //Consultado (01-2016) en: https://datatables.net/reference/button/copyHtml5 
       1: "Copiada una fila al portapapeles", 
       _: "Copiadas %d filas al portapapeles" 
      } 
     } 
    }, 
    dom: 'Bfrtip', 
    buttons: [ 
     { 
      extend: 'copy', 
      text: 'Copiar', 
      exportOptions: { 
       modifier: { 
        page: 'all' 
       } 
      } 
     }, 
     { 
      extend: 'csv', 
      text: 'CSV', 
      //title: $("#title").val(), 
      exportOptions: { 
       modifier: { 
        search: 'none' 
       } 
      } 
     }, 
     { 
      extend: 'excel', 
      text: 'Excel', 
      //title: $("#title").val(), 
      exportOptions: { 
       modifier: { 
        page: 'all' 
       } 
      } 
     }, 
     { 
      extend: 'pdf', 
      text: 'PDF', 
      //title: $("#title").val(), 
      pageSize: 'LETTER', 
      exportOptions: { 
       modifier: { 
        page: 'all' 
       } 
      } 
     }, 
     { 
      extend: 'print', 
      text: 'Imprimir', 
      //title: $("#title").val(), 
      pageSize: 'LETTER' 
     } 
    ], 
    pageLength: 5, 
    responsive: true 
}); 
//FIN Data Table Gestión de Solicitudes

HTML：ソリューションは非常に簡単だった

<!-- Exportable Table --> 
      <div class="row clearfix"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
        <div class="card"> 
         <div class="header"> 
          <h2> 
           TABLA GESTIÓN DE SOLICITUDES 
          </h2> 
          <ul class="header-dropdown m-r--5"> 
           <li class="dropdown"> 
            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
             <i class="material-icons">more_vert</i> 
            </a> 
            <ul class="dropdown-menu pull-right"> 
             <li><a href="javascript:void(0);">Acción</a></li> 
             <li><a href="javascript:void(0);">Otra acción</a></li> 
             <li><a href="javascript:void(0);">Algo más aquí</a></li> 
            </ul> 
           </li> 
          </ul> 
         </div> 
         <div class="body"> 
          <div class="table-responsive"> 
           <table class="table table-bordered table-striped table-hover dataTable js-exportable"> 
            <thead> 
            <tr> 
             <!-- <th>id</th> --> 
             <th>Estatus</th> 
             <th>Tipo de Documento</th> 
             <th>Fecha Tope</th> 
             <th>Carga Documento/Medio de Recepción</th> 
             <th>Añadir Pág. Documento</th> 
             <th>No Posee</th> 
             <th>Borrar Solicitud</th> 
            </tr> 
            </thead> 
            <tfoot> 
            <tr> 
             <!-- <th>id</th> --> 
             <th>Estatus</th> 
             <th>Tipo de Documento</th> 
             <th>Fecha Tope</th> 
             <th>Carga Documento/Medio de Recepción</th> 
             <th>Añadir Pág. Documento</th> 
             <th>No Posee</th> 
             <th>Borrar Solicitud</th> 
            </tr> 
            </tfoot> 
           </table> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!-- #END# Exportable Table -->

出典

2017-12-15 Eduardo Pliego Meré

はJQueryコードcolumnDefs {ターゲットに参照してください見ることができる：[3]、... }、そこにあるhtmlはスタイルをとらない。 –