以正確佈局添加自定義下拉列表（數據表插件）

如何在datatables插件的搜索字段旁邊添加dropdownlist？以正確佈局添加自定義下拉列表（數據表插件）

在插件初始化的位置添加一個，並將其放置在內部太髒。應該可以添加一個自定義的下拉列表嗎？它不一定是動態的，只是一些具有某些值的下拉列表。

像這樣：

我怎樣才能做到這一點？

<script> 
    $(document).ready(function(){ 
     $('#myTable').DataTable({ 
     "language": { 
      "sProcessing": "Bezig...", 
      "sLengthMenu": "_MENU_ resultaten weergeven", 
      "sZeroRecords": "Geen resultaten gevonden", 
      "sInfo": "_START_ tot _END_ van _TOTAL_ resultaten", 
      "sInfoEmpty": "Geen resultaten om weer te geven", 
      "sInfoFiltered": " (gefilterd uit _MAX_ resultaten)", 
      "sInfoPostFix": "", 
      "sSearch": "Werknemers zoeken :", 
      "searchPlaceholder": "Naam/BSN/Personeelsnr", 
      "sEmptyTable": "Geen resultaten aanwezig in de tabel", 
      "sInfoThousands": ".", 
      "sLoadingRecords": "Een moment geduld aub - bezig met laden...", 
      "oPaginate": { 
       "sFirst": "Eerste", 
       "sLast": "Laatste", 
       "sNext": "Volgende", 
       "sPrevious": "Vorige" 
      } 
     } 
    }); 
     $(document).ready(function() { 

     var table = $('#example').DataTable({ 
      "columnDefs": [ 
      { "visible": false, "targets": 2 } 
      ], 


      "order": [[ 2, 'asc' ]], 
      "displayLength": 25, 
      "drawCallback": function (settings) { 
      var api = this.api(); 
      var rows = api.rows({page:'current'}).nodes(); 
      var last=null; 

      api.column(2, {page:'current'}).data().each(function (group, i) { 
       if (last !== group) { 
       $(rows).eq(i).before(
        '<tr class="group"><td colspan="5">'+group+'</td></tr>' 
       ); 

       last = group; 
       } 

      }); 
      } 
     }); 

    // Order by the grouping 
    $('#example tbody').on('click', 'tr.group', function() { 
     var currentOrder = table.order()[0]; 
     if (currentOrder[0] === 2 && currentOrder[1] === 'asc') { 
     table.order([ 2, 'desc' ]).draw(); 
     } 
     else { 
     table.order([ 2, 'asc' ]).draw(); 
     } 
    }); 
    }); 
    }); 
    $('#example23').DataTable({ 
     dom: 'Bfrtip', 
     buttons: [ 
      'copy', 'csv', 'excel', 'pdf', 'print' 
     ] 
    }); 
</script>

來源

2016-09-21 twan

嗯，我們可以添加自定義按鈕DataTable，但他們都在桌子上（幾乎從搜索框遠）的左側。

我不知道是否有任何選項可用於在搜索框附近添加字段，但是當我添加了類似要求（實際上將它附加到DataTable搜索框div）時，它通過引導類像下面

演示：https://jsfiddle.net/Prakash_Thete/uo110be1/4/

添加以下代碼DataTable初始化之後。

$('<div class="pull-right">' + 
     '<select class="form-control">'+ 
     '<option value="volvo">Volvo</option>'+ 
     '<option value="saab">Saab</option>'+ 
     '<option value="opel">Opel</option>'+ 
     '</select>' + 
     '</div>').appendTo("#example_wrapper .dataTables_filter"); //example is our table id 

$(".dataTables_filter label").addClass("pull-right");

來源

2016-09-21 09:52:01

謝謝，我試着添加你的代碼，但我沒有看到任何dropdownlist被添加到我的表上方。該ID是正確的，所以不是這樣。我到底在哪裏放置你的代碼？我在我的原始問題中添加了包含datatablesplugin的整個腳本標記。 – twan

請在你想要「下拉」的表的初始化後添加我的代碼。那麼我沒有看到你的代碼添加'下拉列表。你可以請創建一個JSFiddle你的代碼，以便我看看實際的問題？ –

（編輯：更新的鏈接，仍然有一些舊的代碼）是的，我在這裏添加了代碼：https://jsfiddle.net/w756ozgc/2/ – twan

以正確佈局添加自定義下拉列表（數據表插件）

回答

相關問題