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>