Как добавить наноситель на тело таблицы для jQuery datatables?

Я пытаюсь добавить nanoscroller в таблицу fyi, я использую таблицы данных. Я хочу, чтобы заголовок был исправлен, и прокрутка должна применяться только к телу таблицы, но она применяется к полной таблице.Как добавить наноситель на тело таблицы для jQuery datatables?

Может ли кто-нибудь помочь мне в этом?

Вот что я пробовал.

jQuery(function($){ 
 
     $('#posts_table').DataTable({ 
 
      dom: 'Bfrtip', 
 
      buttons: [ 
 
       'copy', 'csv', 'excel', 'pdf', 'print' 
 
      ], 
 
      "searching": false, 
 
      "paging": false, 
 
      "fnInitComplete": function() { 
 
       $("#posts_table").after(function() { 
 
        return "<div class='nano'><div class='nano-content'><table class='" + this.className + "' id='custom-table'></table></div></div>"; 
 
       }); 
 

 
       $('#custom-table').html($('#posts_table').html()); 
 
       $('#posts_table').remove(); 
 
       $(".nano").nanoScroller(); 
 
      }, 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
<script 
 
src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/javascripts/jquery.nanoscroller.js"> 
 
</script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/css/nanoscroller.css" type="text/css"/> 
 

 
<table id="posts_table" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr class="active"> 
 
      <th>Author</th> 
 
      <th>Date Posted</th> 
 
      <th>Post Title</th> 
 
      <th>Synopsis</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
</tbody> 
 
<style> 
 
    .nano{ 
 
     width:100%; 
 
     height:100px; 
 
    } 
 
</style>

источник

2017-02-21 Raja

пожалуйста, добавьте nanoscroller CDN. Это вызывает ошибку прямо сейчас. https://cdnjs.com/libraries/jquery.nanoscroller –

@KiranDash, Спасибо за ответ. Я добавил ссылки, теперь он работает. – Raja

Пожалуйста, проверьте ответ ниже. Я использовал floatHead для исправления заголовка. Плагин прекрасно работает с DataTables –

Я использовал floatHead для достижения этой цели.

http://mkoryak.github.io/floatThead/#download

сделать несколько изменений CSS, чтобы достичь того, чего вы хотите.

jQuery(function($){ 
 
     $('#posts_table').DataTable({ 
 
      dom: 'Bfrtip', 
 
      buttons: [ 
 
       'copy', 'csv', 'excel', 'pdf', 'print' 
 
      ], 
 
      "searching": false, 
 
      "paging": false, 
 
      "fnInitComplete": function() { 
 
       $("#posts_table").after(function() { 
 
        return "<div class='nano'><div class='nano-content'><table class='" + this.className + "' id='custom-table'></table></div></div>"; 
 
       }); 
 

 
       $('#custom-table').html($('#posts_table').html()); 
 
       $('#posts_table').remove(); 
 
       $(".nano").nanoScroller(); 
 
      }, 
 
     }); 
 
     var $table = $('.nano table'); 
 
     $table.floatThead(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.0.3/jquery.floatThead.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
<script 
 
src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/javascripts/jquery.nanoscroller.js"> 
 
</script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/css/nanoscroller.css" type="text/css"/> 
 

 
<table id="posts_table" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr class="active"> 
 
      <th>Author</th> 
 
      <th>Date Posted</th> 
 
      <th>Post Title</th> 
 
      <th>Synopsis</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
     </tr> 
 
</tbody> 
 
<style> 
 
    .nano{ 
 
     width:100%; 
 
     height:100px; 
 
    } 
 
</style>

источник

2017-02-21 12:39:50

Спасибо вам большое за ваше решение! Он отлично работал для моих нужд.

Я сделал оптимизацию для кода js.

var table = $('#posts_table'); table.wrap("<div class='nano'><div class='nano-content' id='[email protected](id)'></div></div>"); $(".nano").nanoScroller();
это позволило мне использовать тот же тег без временной таблицы

источник

2017-12-19 16:17:39

Как добавить наноситель на тело таблицы для jQuery datatables?

ответ

Смежные вопросы