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 issue1
As seen in pic , i need to fix it . can you please let me know what is wrong,.
My code is
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<title>Voucher Registeration</title>
<style>
.dataTables_paginate {
float: left;
margin: 0;
}
</style>
</head>
<body>
</br>
<h1><center>Voucher Registeration</center></h1>
<table id="campaignDE" class="table table-striped table-bordered" >
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Market</th>
<th scope="col">Code</th>
<th scope="col">Name</th>
<th scope="col">VoucherUsed</th>
<th scope="col">VoucherUnused</th>
<th scope="col">VocTag</th>
<th scope="col">Email</th>
<th scope="col">Threshold</th>
<th scope="col">CreatedDate</th>
<th scope="col">LatestSentDate</th>
</tr>
</thead>
<tbody>
%%[
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 > 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")
]%%
<tr>
<th scope="row">%%=v(@i)=%%</th>
<td>%%=v(@Market)=%%</td>
<td>%%=v(@CampaignNo)=%%</td>
<td>%%=v(@CampaignName)=%%</td>
<td>%%=v(@VoucherUsed)=%%</td>
<td>%%=v(@VoucherUnused)=%%</td>
<td>%%=v(@VocTag)=%%</td>
<td>%%=v(@ThresholdEMail)=%%</td>
<td>%%=v(@ThresholdValue)=%%</td>
<td>%%=v(@CreadedDate)=%%</td>
<td>%%=v(@LatestSentDate)=%%</td>
</tr>
%%[ next @i ]%%
%%[ else ]%%
<br>No Data Available</br>
%%[ endif ]%%
</tbody>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#campaignDE').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"pagingType": "simple_numbers",
"scrollCollapse": true,
"filter": true
} );
} );
</script>
</body>
</html>I want the
- Number of record per page and search to appear before the table (top right conner )
- The pagination below table
- Also on the columns i would like to give some tooltip
can you please let me know the how to do it
