DataTables and DOM

Peter Kroman
Peter Kroman used Ask the Experts™
on
Hi,

I am using DataTables and it is working nicely.

I would like to locate the Search (Filter) and the Info blocks at the top over the table.
I can do that, but the problem is that they are displayed in two lines, and I would very much like them to display in the same line - one to the left and one to the right over the table.

I use tihs js code:
            $('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>rt<"clear">', order: []});

Open in new window


and it looks like this:
Sk-rmbillede-2017-11-06-14.38.28.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Hey Peter,

You will need to style it using CSS. The info is wrapped in a .dataTables_info class and the search is wrapped in a .dataTables_filter class, so you can use that to style accordingly. Try something like this as a starter:

.dataTables_info { float: left; }
.dataTables_filter { float:right; }

Open in new window

Peter KromanSales Executive

Author

Commented:
It does it, but it also makes the whole table to float left :)

Sk-rmbillede-2017-11-06-15.14.44.png
Peter KromanSales Executive

Author

Commented:
... float right ...
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
OK. Something else going on with your HTML or CSS in that case.

Post a link to your page and I'll take a look
Peter KromanSales Executive

Author

Commented:
Yep.
It is this one: http://kroweb.dk/gfdev/stednavne/

I know there are a few "red lines" in the code, but they don't seem to disturb, so I have not focused on those yet :)
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
OK. The HTML that your retrieve from your AJAX call (ajaxListHtml.php) seems to be wrapped in a DIV with an ID of tdata_filter and a class of dataTables_filter. These are usually dynamically generated by the DataTables plugin, so you should NOT have them in your own HTML. Remove them and it'll work as expected.
Peter KromanSales Executive

Author

Commented:
You are the man - it works now :)

Thanks a lot.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Nice :)
Peter KromanSales Executive

Author

Commented:
But I still have a problem I have just found out :)

When moving the working files to my "production site" it does not work.
I have copies the complete index.php and ajaxListHtml.php to this page, and here it is not working. What am I doing wrong?

http://genealogiskforum.dk/arkivalier/stednavne/
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
The call to DataTable in your AJAX response doesn't include the new dom option:

$('#tdata').DataTable({searching: true, paging: false, info: true, order: []});
Peter KromanSales Executive

Author

Commented:
Something went wrong in the copying process. It works now.
Peter KromanSales Executive

Author

Commented:
Hi,

I have one more question :)

I am making another page based ont the stuff we have just made, but just accessing another database. I don't get the filter and search lines displayed at all, and I can't figure our what I am doing wrong.

I have this at the head:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />

  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

  <script type="text/javascript" src="jquery.dataTables.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
        $('#tdata').dataTable( {
            "language": {
                "url": "dataTables.danish.lang"
            }
        } );
    } );

Open in new window



I have set the table here:
  <table id="tdata" class="dataTable">
      <thead>
         <tr>
            <th class="sorting" aria-controls="tdata">Sogn</th>
            <th class="sorting" aria-controls="tdata">Kirkebog</th>
            <th class="sorting" aria-controls="tdata">Herred</th>
            <th class="sorting" aria-controls="tdata">Amt</th>

         </tr>
      </thead>

      <?php while($row = $result=mysqli_fetch_array($raw_results)): ?>
 
         <tr>
            <td><?php echo $row["Sogn"] ?></td>
            <td><?php echo "<a href=\"".$row["URL"]."\"target=\"_blank\">" . $row["Kirkebog"]?></td>
            <td><?php echo $row["Herred"] ?></td>
            <td><?php echo $row["Amt"] ?></td>
            <td><?php echo "<a href=\"".$row["Infourl"]."\"target=\"_blank\">" . $row["Info"]?></td>
         </tr>

Open in new window


And I have this scripting
          <script>
        //Variable to be used in the scripts
      var input_1 = document.getElementById('input_1'); //main searchfield
      var input_2 = document.getElementById('input_2'); //hidden searchfield
      var SogButton=document.getElementById('Sog'); //"Søg" buttin
      var NustilButton=document.getElementById('nulstil');  //"Nulstil" button 



      function radioBtn(){
       var linkPhp;
       if($("#broad").is(":checked")) {
         linkPhp='ajaxSognHtml.php';        
         return linkPhp;
       }else if($("#exact").is(":checked")){
         linkPhp='ajaxSognHtml2.php';         
         return linkPhp;  
       }
     }



      // "Søg" button function
      SogButton.addEventListener('click',function (){
        $('#list_items > table').remove();    
        $.ajax({
         url: radioBtn(),
         data: {query:input_1.value},
         method:'POST',
         dataType: 'html'
       }).done(function (res){             
        $('#list_items').html(res);
        $('#tdata').DataTable({searching: true, paging: false, info: true, "dom": '<"top"<if>', order: []});
        input_2.focus();


      });         

     });

Open in new window

Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Hey Peter,

I'd really need to see a working copy of your files to figure out what's going on.

What I can see is that you seem to be including the DataTable JS file twice, and your HTML seems invalid - you have 4 columns in the header but 5 in the body. You also seem to be calling the DataTable method in the Dom ready block without any options and then again on your AJAX success with the options.

We're in the realms of this becoming a separate question to the one that was originally asked, so it might be worth opening a new question specifically for this new issue
Peter KromanSales Executive

Author

Commented:
Thanks Chris,

I believe that the reason was the discrepancy between 4 and 5 columns. It seems to be working nicely now.
If I get a problem with this again, I will open a new question.
Thanks a lot.
Peter KromanSales Executive

Author

Commented:
Chris did it again :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial