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>

please add nanoscroller cdn. It throws an error right now. https://cdnjs.com/libraries/jquery.nanoscroller — Kiran Dash, Feb 21 '17 at 12:04
@KiranDash, Thank you for the reply. i have added references, now it is working. — Raja, Feb 21 '17 at 12:33
Please check answer below. I have used floatHead to keep the header fixed. The plugin works nicely with DataTables — Kiran Dash, Feb 21 '17 at 13:02

Kiran Dash · Accepted Answer · 2017-02-21T13:02:04.683

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>

score 0 · Answer 2 · answered Dec 19 '17 at 16:17

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

how to add nanoscroller on table body for jquery datatables?

2 Answers2