0

我正在尝试将 nanoscroller 添加到我的表中，我正在使用数据表。我想要的是标题应该是固定的，滚动应该只适用于表格主体，但它适用于整个表格。

谁能帮我解决这个问题？

这是我尝试过的。

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>

4

2 回答 2

0

我已经使用 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-21T12:39:50.803 回答
0

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

我对js代码进行了优化。

var table = $('#posts_table'); table.wrap("<div class='nano'><div class='nano-content' id='tableClienteNano_@(id)'></div></div>"); $(".nano").nanoScroller();
它允许我在没有临时表的情况下重用相同的标签

于 2017-12-19T16:17:39.813 回答