How to Auto-Scroll Data table( Need to scroll-horizontal Table body information)
How to Auto-Scroll Data table( Need to scroll-horizontal Table body information)
KarthickSoft
Posts: 2Questions: 1Answers: 0
Hi to All,
I create an excel-like data table. my data table has scroll-horizontal. Now I need to auto-scroll horizontally. I write some javascript on my page. but the whole table will scroll automatically from top to bottom. but I want table body information automatically scrolling horizontally.
My Table class name is: table-responsive
CSS:
.table-responsive {
height: 850px;
width: 100%;
overflow-y: auto;
border: 2px solid #444;
}
My javascript code is:
$(document).ready(function () {
var $el = $('.table-responsive');
function anim() {
var st = $el.scrollTop();
var sb = $el.prop("scrollHeight") - $el.innerHeight();
$el.animate({ scrollTop: st < sb / 2 ? sb : 0 }, 40000, anim);
}
function stop() {
$el.stop();
}
anim();
$el.hover(stop, anim);
//});
Result: The whole Table Automatically scrolling automatically.
Expected Result: Need to auto-scroll-horizontally Table tbody information
Answers
I don't see any use of DataTables in your code.
This is my HTML code body section: I bind my table information into the data table.
I add to scroll-Y in my data table. but it can't auto-scrolling from top to bottom. I add some javascript in my code. my whole data table will scroll automatically. I need only tbody information.
<body class="hold-transition layout-top-nav">
<div class="wrapper">
<div class="content-wrapper">
<div class="content">
<div class="container" style="max-width:100%;">
<table class="table table-striped table-bordered nowrap table-responsive" style="width:100%;">
<thead>
<tr>
<th colspan="26">
<h1 class="text-center">Monitoring</h1>
</th>
</tr>
<tr>
<th>Id</th>
<th>Date</th>
<th>CusCode</th>
</tr>
<tbody>
@foreach (var monitor in Model)
{
<tr>
<td>@monitor.SalesOrderId</td>
<td>@monitor.SalesOrderDate.Value.ToShortDateString()</td>
<td>@monitor.CustomerCode</td>
</tr>
}
This the forum for users of DataTables.
DataTables is a plug-in for the jQuery Javascript library. I'm not seeing any use of the plug-in in your code.