如何在 table body 上为 jquery 数据 table 添加 nanoscroller？

Question

我正在尝试将 nanoscroller 添加到我的 table 供参考，我正在使用数据 tables。我想要的是 header 应该被修复并且滚动应该只适用于 table body 但它适用于完整的 table.

谁能帮我解决这个问题？

这是我试过的。

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

我已经用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>

Answer 2

非常感谢您的解决方案！它非常适合我的需要。

我对js代码做了优化

var table = $('#posts_table'); table.wrap("<div class='nano'><div class='nano-content' id='tableClienteNano_@(id)'></div></div>"); $(".nano").nanoScroller();
它允许我在没有临时 table

的情况下重复使用相同的标签

如何在 table body 上为 jquery 数据 table 添加 nanoscroller？

how to add nanoscroller on table body for jquery datatables?

jquery

datatables

nanoscroller