Jquery Datatables поиск и нумерация страниц неправильное местоположение - PullRequest
Новая
       18

Jquery Datatables поиск и нумерация страниц неправильное местоположение

0 голосов
/ 06 декабря 2018

Я создал html-страницу, используя jquery datatable.Все в порядке, но поиск, номер выпадающего списка и нумерация страниц были показаны в неправильном месте. Нажмите здесь, чтобы увидеть изображение, которое показывает проблему 1

Как видно на рисунке, янужно это исправить.пожалуйста, дайте мне знать, что не так.

Мой код 

<!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>

Я хочу, чтобы

  1. Количество записей на странице и поиск появлялись перед таблицей (верхний правый коннер)
  2. Нумерация страниц под таблицей
  3. Также в столбцах я хотел бы дать подсказку

Можете ли вы дать мне знать, как это сделать

1 Ответ

0 голосов
/ 06 декабря 2018

Выньте CSS для dataTables_paginate и используйте инструменты DOM для перемещения элементов управления.

...