<div>
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: 
 

<pre><code class="code-1 nolinks" id="code-20-42356351-1">.dataTables_info { float: left; }
.dataTables_filter { float:right; }
</code></pre>
</div>

<div>
It does it, but it also makes the whole table to float left :) 
 
<a href="https://filedb.experts-exchange.com/incoming/2017/11_w45/1204368/Sk-rmbillede-2017-11-06-15.14.44.png" target="_blank" title="Sk-rmbillede-2017-11-06-15.14.44.png (209 KB)"><img alt="Sk-rmbillede-2017-11-06-15.14.44.png" class="file-block lazyload" style="max-width: 647px;" data-src="https://filedb.experts-exchange.com/incoming/2017/11_w45/1204368/Sk-rmbillede-2017-11-06-15.14.44.png" /></a>
</div>

Sk-rmbillede-2017-11-06-15.14.44.png

<div>
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
</div>

<div>
Yep. 
It is this one: <a href="http://kroweb.dk/gfdev/stednavne/" rel="ugc">http://kroweb.dk/gfdev/stednavne/</a> 
 
I know there are a few &quot;red lines&quot; in the code, but they don't seem to disturb, so I have not focused on those yet :)
</div>

<div>
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.
</div>

<div>
You are the man - it works now :) 
 
Thanks a lot.
</div>

<div>
But I still have a problem I have just found out :) 
 
When moving the working files to my &quot;production site&quot; 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? 
 
<a href="http://genealogiskforum.dk/arkivalier/stednavne/" rel="ugc">http://genealogiskforum.dk/arkivalier/stednavne/</a>
</div>

<div>
The call to DataTable in your AJAX response doesn't include the new dom option: 
 
$('#tdata').DataTable({searching: true, paging: false, info: true, order: []});
</div>

<div>
Something went wrong in the copying process. It works now.
</div>

<div>
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: 

<pre><code class="code-10 nolinks" id="code-20-42364051-1">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css&quot; /&gt;

 &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js&quot;&gt;&lt;/script&gt;

 &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.dataTables.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;
 $(document).ready(function() {
 $('#tdata').dataTable( {
 &quot;language&quot;: {
 &quot;url&quot;: &quot;dataTables.danish.lang&quot;
 }
 } );
 } );
</code></pre>
 
 
I have set the table here: 

<pre><code class="code-10 nolinks" id="code-20-42364051-2"> &lt;table id=&quot;tdata&quot; class=&quot;dataTable&quot;&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th class=&quot;sorting&quot; aria-controls=&quot;tdata&quot;&gt;Sogn&lt;/th&gt;
 &lt;th class=&quot;sorting&quot; aria-controls=&quot;tdata&quot;&gt;Kirkebog&lt;/th&gt;
 &lt;th class=&quot;sorting&quot; aria-controls=&quot;tdata&quot;&gt;Herred&lt;/th&gt;
 &lt;th class=&quot;sorting&quot; aria-controls=&quot;tdata&quot;&gt;Amt&lt;/th&gt;

 &lt;/tr&gt;
 &lt;/thead&gt;

 &lt;?php while($row = $result=mysqli_fetch_array($raw_results)): ?&gt;
 
 &lt;tr&gt;
 &lt;td&gt;&lt;?php echo $row[&quot;Sogn&quot;] ?&gt;&lt;/td&gt;
 &lt;td&gt;&lt;?php echo &quot;&lt;a href=\&quot;&quot;.$row[&quot;URL&quot;].&quot;\&quot;target=\&quot;_blank\&quot;&gt;&quot; . $row[&quot;Kirkebog&quot;]?&gt;&lt;/td&gt;
 &lt;td&gt;&lt;?php echo $row[&quot;Herred&quot;] ?&gt;&lt;/td&gt;
 &lt;td&gt;&lt;?php echo $row[&quot;Amt&quot;] ?&gt;&lt;/td&gt;
 &lt;td&gt;&lt;?php echo &quot;&lt;a href=\&quot;&quot;.$row[&quot;Infourl&quot;].&quot;\&quot;target=\&quot;_blank\&quot;&gt;&quot; . $row[&quot;Info&quot;]?&gt;&lt;/td&gt;
 &lt;/tr&gt;
</code></pre>
 
And I have this scripting 

<pre><code class="code-10 nolinks" id="code-20-42364051-3"> &lt;script&gt;
 //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'); //&quot;Søg&quot; buttin
 var NustilButton=document.getElementById('nulstil'); //&quot;Nulstil&quot; button 



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



 // &quot;Søg&quot; button function
 SogButton.addEventListener('click',function (){
 $('#list_items &gt; 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, &quot;dom&quot;: '&lt;&quot;top&quot;&lt;if&gt;', order: []});
 input_2.focus();


 }); 

 });
</code></pre>
</div>

<div>
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.
</div>

<div>
<div class="content wysiwyg-content">
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: 

<pre><code class="code-1 nolinks" id="code-10-29066709-1"> $('#tdata').DataTable({searching: true, paging: false, info: true, &quot;dom&quot;: '&lt;&quot;top&quot;&lt;if&gt;rt&lt;&quot;clear&quot;&gt;', order: []});
</code></pre>
 
and it looks like this: 
<a href="https://filedb.experts-exchange.com/incoming/2017/11_w45/1204361/Sk-rmbillede-2017-11-06-14.38.28.png" target="_blank" title="Sk-rmbillede-2017-11-06-14.38.28.png (177 KB)"><img alt="Sk-rmbillede-2017-11-06-14.38.28.png" class="file-block lazyload" style="max-width: 654px;" data-src="https://filedb.experts-exchange.com/incoming/2017/11_w45/1204361/Sk-rmbillede-2017-11-06-14.38.28.png" /></a>
</div>
</div>

Sk-rmbillede-2017-11-06-14.38.28.png

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: 
(CODE)

and it looks like this: 


DataTables and DOM

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.