how to add nanoscroller on table body for jquery datatables?

Question

I am trying to add nanoscroller to my table fyi, i'm using data tables. What i want is header should be fixed and the scroll should apply only on table body but it is applying to the full table.

can anyone please help me with this?

Here is what I tried.

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>

Answer 1

I have used floatHead to achieve it.

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

Make a few css changes to achieve what you want.

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>

Answer 2

Thank you so much for your solution! It worked quite perfectly for my needs.

I made an optimization to the js code.

var table = $('#posts_table'); table.wrap("<div class='nano'><div class='nano-content' id='tableClienteNano_@(id)'></div></div>"); $(".nano").nanoScroller();
it allowed me to reuse the same tag without a temporary table