• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 105
  • Last Modified:

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
0
Peter Kroman
Asked:
Peter Kroman
  • 9
  • 6
1 Solution
 
Chris StanyonCommented:
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 KromanSenior Proposal SpecialistAuthor 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 KromanSenior Proposal SpecialistAuthor Commented:
... float right ...
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Chris StanyonCommented:
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 KromanSenior Proposal SpecialistAuthor 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 StanyonCommented:
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 KromanSenior Proposal SpecialistAuthor Commented:
You are the man - it works now :)

Thanks a lot.
0
 
Chris StanyonCommented:
Nice :)
0
 
Peter KromanSenior Proposal SpecialistAuthor 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 StanyonCommented:
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 KromanSenior Proposal SpecialistAuthor Commented:
Something went wrong in the copying process. It works now.
1
 
Peter KromanSenior Proposal SpecialistAuthor 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 StanyonCommented:
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
 
Peter KromanSenior Proposal SpecialistAuthor 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 KromanSenior Proposal SpecialistAuthor Commented:
Chris did it again :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 9
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now