I want to change the position of some hidden tables elements

divebomb33

I'm using this bootstrap datatable and by default certain elements are placed in default locations such as the "show entries dropdown," "filter(search)box," "columns dropdown," "Showing 1 to 10 of 40 Items," and the pagination. I'm trying to put the "filter(search)box" at the top left above the table, "columns dropdown" at the top far right above the table, "Showing 1 to 10 of 40 Items" centered below the table, and "show # entries dropdown" far left below the table. Anyone have any insight on how to do this?

DirceuNazareth

If you are using 1.10 version you can use the option dom. Moving the letters that represent the widgets you can place the items in different places around the table.

divebomb33

Thanks DirceuNazareth for responding so quickly. I have researched that but my actual programming skills are poor. I inserted the example script to my table and did see changes but I'm not sure what all the code in the script means.

I plugged this in to my table
$(document).ready(function() { $('#overflow').DataTable( { "dom": '<"top"i>rt<"bottom"flp><"clear">' } ); } );

Can you provide any additional insight?

DirceuNazareth

By that piece of code you are organizing your table in this way:

Adding a div with class "top" and inside of it the i stuff.
i means Showing 1 to 10 of 40 Items, for instance.

Yet, over the table you have the processing message r

So then came your table t.

After table you have a div with the class "bottom" and inside of it:
A search box f, the number of records of your table l and your pagination control p.
after you have a div with class "clear".

So you can play around with it and place the widget as you want.

If you want to hide some of this widget you can set them to true or false, for instance:

$(document).ready(function() { 
  $('#overflow').DataTable( { 
     "dom": '<"top"i>rt<"bottom"flp><"clear">',
     "info": false,
     "searching": false,
     "paging": false
   } );
 } );

divebomb33

This is great thank you! Any reason why my table now shows 20 records instead of the 10 it did before I put this code in? I think I'd like it to be default to showing 10 and have the dropdown show 10. Also I had a column chooser dropdown at the far right on top of the table. I'm not seeing a letter designation to place that either on top or bottom and as it currently looks the element has disappeared.

DirceuNazareth

Good to hear about the progress...

So , the property that controls number of row per page is pageLength.
The property that controls the select box of number of item per page is lengthMenu.
Snippet updated:

$(document).ready(function() {
  $('#overflow').DataTable( {
     "dom": '<"top"i>rt<"bottom"flp><"clear">',
     "info": false,
     "searching": false,
     "paging": false,
     "pageLength": 10,
     "lengthMenu": [10, 20, 30, 40, 50]
   } );
 } );

I don't know about the dropdown that you mentioned, It sounds like a custom widget like this:
https://datatables.net/examples/api/multi_filter_select.html

If that is the case, you just need added the code into the initialization snippet above, after the lengthMenu.

divebomb33

Maybe one more question haha.

So here's my current scrip:
t

$(document).ready(function() { $('#overflow').DataTable( { "dom": '<"top"f>rt<"bottom"ilp><"clear">', 'language': { 'search': '_INPUT_', 'searchPlaceholder': ' Search within' }, colReorder: true, "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ] } ); } );

I'm now having trouble getting my pagination to appear the way it should. Without the above script it looks as it should. With the script the styling looks off and the page you're on doesn't show. I found the following script but can't integrate it into my current script without it screwing anything up. Any idea's? I'm as close to getting the layout I want

$(document).ready(function() { $('#overflow').DataTable( { "pagingType": "full_numbers" } ); } );

DirceuNazareth

DataTable pagingType is just one more parameter. so you can add it like the others:

$(document).ready(function() {
  $('#overflow').DataTable( {
     "dom": '<"top"i>rt<"bottom"flp><"clear">',
     "info": false,
     "searching": false,
     "paging": false,
     "pagingType": "full_numbers", 
     "pageLength": 10,
     "lengthMenu": [10, 20, 30, 40, 50]
   } );
 } );

the option for this parameter are here pagingType

I had forgotten a comma (just in case that you have seen it before my edition)

divebomb33

Thanks for all your help. For some reason the pagination thing isn't taking. Some glitch I think but I'll work on getting it up and running. One last request if you wouldn't mind. I created a hidden table row (id="table-row-span") which is hidden until triggered by clicking on a checkbox (id="select_all"). At this point the row is shown and says "All entries shown on this page are selected. Select all entries in this table."

I'm looking for a script that when all entries in the dropbox is selected to be shown then every row appears and is checkmarked.