Jquery Datatable

Question

Ich bin neu in jQuery. Ich habe Datatables im Raster verwendet.

Ich habe ein Problem treffen, wo jQuery Datentabellen wird unten in der Infoleiste zeigt: enter image description here

I ersten Einträge und Seiten Drop-downs angezeigt werden soll, Hier ist mein Code:

HTML:

<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> 

<script type="text/javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 

<table class="table table-condensed tableDesign tablePagination"> 
          <thead> 
          <tr > 
           <th>File Name</th> 
           <th>TimeStamp</th> 
           <th>Total NON DND MSISDN COUNT</th> 
           <th>Total DND MSISDN COUNT</th> 
           <th>Status</th> 
          </tr> 
          </thead> 
          <tbody> 
          <tr> 
           <td>test1.csv</td> 
           <td>11/10/17 11:22:45</td> 
           <td>3 
            <a class="downloadCampaign" href=""> 
             <u>Download </u> 
            </a> 
           </td> 
           <td>2 <a class="downloadCampaign" href=""> 
            <u>Download </u> 
           </a></td> 
           <td>Completed</td> 
          </tr> 
          <tr> 
           <td>abc.csv</td> 
           <td>12/10/17 11:22:45</td> 
           <td>3 <a class="downloadCampaign" href=""> 
            <u>Download </u> 
           </a></td> 
           <td>2 <a class="downloadCampaign" href=""> 
            <u>Download </u> 
           </a></td> 
           <td>Completed</td> 
          </tr> 
          <tr> 
           <td>xyz1.csv</td> 
           <td>13/10/17 11:22:45</td> 
           <td>3 <a class="downloadCampaign" href=""> 
            <u>Download </u> 
           </a> </td> 
           <td>2 <a class="downloadCampaign" href=""> 
            <u>Download </u> 
           </a></td> 
           <td>Completed</td> 
          </tr> 
          <tr> 
           <td>test2.csv</td> 
           <td>11/1/17 11:22:45</td> 
           <td>3 <a class="downloadCampaign" href=""> 
            <u>Download </u> 
           </a></td> 
           <td>2 <a class="downloadCampaign" href=""> 
            <u>Download </u> 
           </a></td> 
           <td>Completed</td> 
          </tr> 

          </tbody> 
         </table> 

JS:

$(document).ready(function(){ 
    var table = $('.tablePagination').DataTable({ 
     /* "sDom": '<"top"i>rt<"bottom"flp><"clear">',*/ 
     "bSort": false, 
     "sDom": 'Rfrtlip', 
     "oLanguage": { 
      "sLengthMenu": "_MENU_", 
      "sInfo": "View _START_ - _END_ of _TOTAL_", 
      "sInfoEmpty": "No Entries" 
     } 

    }); 
}); 

CSS:

.dataTables_filter, .dataTables_paginate { 
    display: none; 
} 
.dataTables_length { 
    float: right !important; 
    padding-top: 0px; 
} 

Ausgang: enter image description here

Es ist nicht nebeneinander kommen.

Answer 1

Hallo Sie können CSS-Code unten für Datentabelle

.dataTables_filter, .dataTables_paginate { 
    display: none; 
} 
.dataTables_length { 
    position: absolute; 
    right: 100px; 
    padding: 10px; 
} 
.dataTables_info{ 
    position: absolute; 
    right: 0px; 
    width:100px; 
} 

To see demo jsFiddle Link