title: Jquery Datatables search and pagination wrong location
body: <p>I have created an html page using jquery datatable. All is ok, but the search , number of record drop down and pagination are been show at wrong location
  Click here to see the image which show the issue<a href="https://i.stack.imgur.com/mRCRN.png" rel="nofollow noreferrer">1</a></p>
  
  <p>As seen in pic , i need to fix it . can you please let me know what is wrong,.</p>
  
  <p>My code is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"&gt;
    &lt;title&gt;Voucher Registeration&lt;/title&gt;
      &lt;style&gt;
        .dataTables_paginate {
            float: left;
         margin: 0;
          }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
   &lt;/br&gt;
      &lt;h1&gt;&lt;center&gt;Voucher Registeration&lt;/center&gt;&lt;/h1&gt;
   &lt;table id="campaignDE" class="table table-striped table-bordered" &gt;
     &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope="col"&gt;#&lt;/th&gt;
      &lt;th scope="col"&gt;Market&lt;/th&gt;
      &lt;th scope="col"&gt;Code&lt;/th&gt;
      &lt;th scope="col"&gt;Name&lt;/th&gt;
      &lt;th scope="col"&gt;VoucherUsed&lt;/th&gt;
      &lt;th scope="col"&gt;VoucherUnused&lt;/th&gt;
      &lt;th scope="col"&gt;VocTag&lt;/th&gt;
      &lt;th scope="col"&gt;Email&lt;/th&gt;
      &lt;th scope="col"&gt;Threshold&lt;/th&gt;
      &lt;th scope="col"&gt;CreatedDate&lt;/th&gt;
      &lt;th scope="col"&gt;LatestSentDate&lt;/th&gt;
    &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
     %%[
       var @rows, @row, @rowCount, @numRowsToReturn, @i , @ReturnClause
       set @ReturnClause   = 1
       set @numRowsToReturn = 0  
       set @rows = LookupOrderedRows("CampaignRegisteration", @numRowsToReturn,"Market asc, LatestSentDate desc","Return",@ReturnClause)
       set @rowCount = rowcount(@rows)
       if @rowCount &gt; 0 then 
        for @i = 1 to @rowCount do
          var @CampaignNo , @CampaignName , @VoucherUsed, @VoucherUnused, @CreadedDate , @VocTag ,@LatestSentDate, @Market
          set @row        = row(@rows, @i)  
               set @CampaignNo       = field(@row,"CampaignNo")
               set @CampaignName   = field(@row,"CampaignName")
               set @VoucherUsed    = field(@row,"VoucherUsed")
               set @VoucherUnused   = field(@row,"VoucherUnused")
               set @CreadedDate     = field(@row,"CreatedDate")
               set @ThresholdEMail   = field(@row,"Email")
               set @ThresholdValue   = field(@row,"Threshold")
               set @VocTag        = field(@row,"VocTag")
               set @LatestSentDate   = field(@row,"LatestSentDate")
               set @Market        = field(@row,"Market") 
       ]%%
       &lt;tr&gt;
      &lt;th scope="row"&gt;%%=v(@i)=%%&lt;/th&gt;
      &lt;td&gt;%%=v(@Market)=%%&lt;/td&gt;      
         &lt;td&gt;%%=v(@CampaignNo)=%%&lt;/td&gt;
         &lt;td&gt;%%=v(@CampaignName)=%%&lt;/td&gt;
         &lt;td&gt;%%=v(@VoucherUsed)=%%&lt;/td&gt;
         &lt;td&gt;%%=v(@VoucherUnused)=%%&lt;/td&gt;
         &lt;td&gt;%%=v(@VocTag)=%%&lt;/td&gt;
         &lt;td&gt;%%=v(@ThresholdEMail)=%%&lt;/td&gt;
         &lt;td&gt;%%=v(@ThresholdValue)=%%&lt;/td&gt;
         &lt;td&gt;%%=v(@CreadedDate)=%%&lt;/td&gt;
         &lt;td&gt;%%=v(@LatestSentDate)=%%&lt;/td&gt;
       &lt;/tr&gt;
      %%[ next @i ]%%
     %%[ else ]%%
      &lt;br&gt;No Data Available&lt;/br&gt;
    %%[ endif ]%%
     &lt;/tbody&gt;
   &lt;/table&gt;
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
       $(document).ready(function() {
        $('#campaignDE').DataTable( {
             "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                  "pagingType": "simple_numbers",
                  "scrollCollapse": true,
                  "filter": true
         } );
    } );
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want the</p>
  
  <ol>
  <li>Number of record per page and search to appear before the table (top right conner )</li>
  <li>The pagination below table </li>
  <li>Also on the columns i would like to give some tooltip</li>
  </ol>
  
  <p>can you please let me know the how to do it </p>