Datatablesの長さメニューにブートストラップ選択を追加

Question

人！

私は助けが必要です。私はdatatablesのドロップダウン "長さ - メニュー"のCSSを変更しようとしているが、 "selectpicker"クラスを追加すると消えます。

グリッドがajaxデータを探していないときは、スタイルを変更することで動作しますが、ajaxやドロップダウンを使ってデータを検索しているグリッドにグリッドを適用すると動作します。

どこが間違っていますか？

[CODE] 
grid = $('#grid').DataTable({ 
    "iDisplayLength": 10, 
    "aLengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]], 
    "orderCellsTop": true, 
    "bPaginate": true, 
    "bDestroy": true, 
    data: $.parseJSON(response.d), 
    columns: [ 
     { title: "Id" }, 
     { title: "Nome" } 
    ], 
    "fnServerData": function (sSource, aoData, fnCallback) { 

     $.ajax({ 
      "dataType": 'json', 
      "contentType": "application/json; charset=utf-8", 
      "type": "GET", 
      "url": sSource, 
      "data": aoData, 
      "success": 
         function (msg) { 
          var json = jQuery.parseJSON(msg.d); 
          fnCallback(json); 
          $("#grid").show(); 
         } 
     }); 

    }, 
    "fnRowCallback": function (nRow) { 

     $(nRow).on('click', function() { 

      grid.$('tr.selected').removeClass('selected'); 
      $(this).addClass('selected'); 

      var row = $(this).closest("tr").get(0), 
       aData = grid.row(row).data(); 

     }); 
    }, 
    "aoColumns": [ 
     { "sTitle": "Id", "sClass": "pri tableDataCenter", "sWidth": "25px" },//0 
     { "sTitle": "Nome", "sClass": "pri" }//1 
    ], 
    "initComplete": function (settings, json) { 
     $('div.dataTables_length select').addClass('selectpicker'); 
     $('div.dataTables_length select').attr('data-width', '70px').attr('data-margin', '0 5px'); 
     $('div.dataTables_filter').addClass('form-group').addClass('label-floating'); 
    }, 
    "order": [[1, "asc"]], 
    "oLanguage": { 
     "oPaginate": { 
      "sNext": "Próxima", 
      "sPrevious": "Anterior", 
      "sFirst": "Primeira página", 
      "sLast": "Última página" 
     }, 
     "sEmptyTable": "", 
     "sInfoEmpty": "Nenhum Registro Encontrado...", 
     "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ de registros.", 
     "sInfoFiltered": " - pesquisado em _MAX_ registros.", 
     "sLengthMenu": "Mostrar _MENU_ Registros", 
     "sLoadingRecords": "Por favor Agurde...", 
     "sZeroRecords": "Não há registros a serem exibidos.", 
     "sProcessing": "Aguarde Processando..." 
    }, 
}); 

Answer 1

このような何か：

var table = $('#example').DataTable({ 
    "drawCallback": function(){ 
     var length_select = $("#example_length"); 
     var select = $("#example_length").find("select").clone(); 
     select.addClass("selectpicker"); 
     length_select.empty().append(select); 
     select.selectpicker(); 
    }, 
    "columns": [{ 
      "visible": false 
     }, 
     null, 
     null, 
     null, 
     null 
    ] 
}); 

を例here作業。希望が役立ちます。