DataTables and DOM

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
Peter KromanSales ExecutiveAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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

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

Sk-rmbillede-2017-11-06-15.14.44.png
0
Peter KromanSales ExecutiveAuthor Commented:
... float right ...
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Chris StanyonWebDevCommented:
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
0
Peter KromanSales ExecutiveAuthor 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 :)
0
Chris StanyonWebDevCommented:
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.
0
Peter KromanSales ExecutiveAuthor Commented:
You are the man - it works now :)

Thanks a lot.
0
Chris StanyonWebDevCommented:
Nice :)
0
Peter KromanSales ExecutiveAuthor 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/
0
Chris StanyonWebDevCommented:
The call to DataTable in your AJAX response doesn't include the new dom option:

$('#tdata').DataTable({searching: true, paging: false, info: true, order: []});
0
Peter KromanSales ExecutiveAuthor Commented:
Something went wrong in the copying process. It works now.
1
Peter KromanSales ExecutiveAuthor 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

0
Chris StanyonWebDevCommented:
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
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter KromanSales ExecutiveAuthor 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.
0
Peter KromanSales ExecutiveAuthor Commented:
Chris did it again :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.