Answers

• DirceuNazareth Posts: 44Questions: 1Answers: 12

  September 2016

  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 Posts: 9Questions: 3Answers: 0

  September 2016

  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 Posts: 44Questions: 1Answers: 12

  September 2016

  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 Posts: 9Questions: 3Answers: 0

  September 2016

  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 Posts: 44Questions: 1Answers: 12

  September 2016

  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 Posts: 9Questions: 3Answers: 0

  September 2016

  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" } ); } );

  screenshot.png 103.9K
• DirceuNazareth Posts: 44Questions: 1Answers: 12

  September 2016 edited September 2016

  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 Posts: 9Questions: 3Answers: 0

  September 2016

  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.