Custom location of paging controls and length control

doommarine93

Hello! So in short I'd like to move the paging controls and length control (the drop down that sets how many rows to show) outside the bounds of the DOM settings. Instead of having them to the top right, top left, etc. I'm trying to move them inside a table row. What is the easiest way of doing this?.. I already moved the search bar via removing the default and creating my own but I'm at a loss on the pagination controls and length control

Simply put, something like this:
<tr>
<th>Pages : <br>***code for pagination controls***</th>
<th>Show How Many Entries : ***code for length selector of entries/rows***</th>
</tr>

Tom (DataTables)

This would have to be done using jQuery DOM methods.

For example

$('#example_length').appendTo('body');

I'd suggest doing it inside initComplete so that it will be done immediately after the table is ready.

Thanks

Tom

doommarine93

Thanks for your reply Tom, I'm sorry but I really don't understand what you put :P I'm not to great with DataTables and how they work yet so could you maybe give some example HTML code on how what you put would be implemented?

Tom (DataTables)

So in order to move the elements you want, just wait until after the datatables initialisation has been complete, this can be done using initComplete.
Then its as simple as using jQuery to move the elements around the page.

For example

$('#example').dataTable( {
  //Normal init code here
  "initComplete": function( settings, json ) {
    $('#example_length').appendTo('body'); //jQuery for moving elements around
  }
} );

Thanks

Tom

doommarine93

Thats odd, when I put that snippet of code in it removes the entry length selector and pagination controls as well as adjusting the width of my table.

This is my script for the table :

        <script type='text/javascript'>
        $(document).ready(function() {
            var dataTable = $('#table_id').DataTable( {
                "dom": '<"top"f>rt<"bottom"lp>' //adjust the locations of defaults
                
                "initComplete": function( settings, json ) {
                    $('#custom_length').appendTo('body'); //jQuery for moving elements around
                }   
            });
            
            // Custom search bar
            $('#searchbox').keyup(function(){
                dataTable.search($(this).val()).draw() ;
            })
            
        });
        </script>

allan

There is a Javascript error occurring in that code, which should be shown in your browser's console. Line 4 needs a comma at the end of it.

Allan