如何在表体上为jquery数据表添加nanoscroller?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在表体上为jquery数据表添加nanoscroller?相关的知识,希望对你有一定的参考价值。
我正在尝试将nanoscroller添加到我的表fyi,我正在使用数据表。我想要的是标题应该是固定的,滚动应该只适用于表体,但它适用于整个表。
有人可以帮我这个吗?
这是我试过的。
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>
答案
我用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>
另一答案
非常感谢你的解决方案!它完全符合我的需求。
我对js代码进行了优化。
var table = $('#posts_table');
table.wrap("<div class='nano'><div class='nano-content' id='tableClienteNano_@(id)'></div></div>");
$(".nano").nanoScroller();
它允许我在没有临时表的情况下重用相同的标签
以上是关于如何在表体上为jquery数据表添加nanoscroller?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 django 模板的单个表体中添加两个 for 循环
选中复选框时在表中添加 Textfieds 使用 Jquery