Can I move length menu to beside search part label ?

Can I move the length with CSS only ? Or we need dom basic as like this discussion I was try it but I don't know how to move with specify position

here is my following code to init datatable:

  table = $('#sparepart_id').DataTable({
        "paging": true,
        "stateSave": true,
        "pagingType": "full_numbers",
        "lengthChange": true,
        "searching": false,
        "ordering": true,
        "info": false,
        "autoWidth": false,
        "pageLength": 25,
        scrollX: true,
       stateLoadCallback: function (settings) {
         var o;
         $.ajax( {
            url     : BASE_URL+"spareparts/load_layout",
            type    : "POST",
            data    : { module_table : "sparepart-list"},
            async   : false,
            dataType: 'json',
             success: function (json) {
                 o = JSON.parse(json.json);
             },
             error:function(data){
                console.log(data);
             }
         } );
         return o;
     }

Can I move length menu to beside search part label ?

Can I move the length with CSS only ? Or we need dom basic as like this discussion I was try it but I don't know how to move with specify position

here is my following code to init datatable:

  table = $('#sparepart_id').DataTable({
        "paging": true,
        "stateSave": true,
        "pagingType": "full_numbers",
        "lengthChange": true,
        "searching": false,
        "ordering": true,
        "info": false,
        "autoWidth": false,
        "pageLength": 25,
        scrollX: true,
       stateLoadCallback: function (settings) {
         var o;
         $.ajax( {
            url     : BASE_URL+"spareparts/load_layout",
            type    : "POST",
            data    : { module_table : "sparepart-list"},
            async   : false,
            dataType: 'json',
             success: function (json) {
                 o = JSON.parse(json.json);
             },
             error:function(data){
                console.log(data);
             }
         } );
         return o;
     }

• javascript
• jquery
• html
• css
• datatable

• [SOLVED] thank you – Not a Pwntester Commented Oct 12, 2018 at 8:32
• You can post your solution (i.e answer your own question) and mark it as accepted answer. Perhaps it can help other people in the future. – davidkonrad Commented Oct 12, 2018 at 8:34

3 Answers 3

$(document).ready(function() {
$('#example').DataTable( {
    "dom": '<"top"i>rt<"bottom"flp><"clear">'
} );

} );

For More Information : https://datatables/release-datatables/examples/basic_init/dom.html

My Solution :

i just inspect element and looking what class in length menu datatable then put css code in my view

      .dataTables_length{
        margin-top : -57px;
        margin-left: 20px;
       }

move with specifying position should use dom property. There is an example may be helpful.

$('#example').DataTable( {
     "dom": '<"toolbox"l>rtip',
     //... your another config,
     "initComplete":function(){
          //build your search layout here
         $(".toolbox").append("<label>search part</label><input>");         
     }
} );

l means Length changing feature, <"toolbox"l> will bees

<div class="toolbox">
    {Length changing}
    <label>search part</label><input>
</div>"

{Length changing} build by DataTables, you don't need care about it.

For More Information : https://datatables/release-datatables/examples/basic_init/dom.html