When setting pageLength property in DataTables, the data is divided into multiple pages.
However, when DataTables.scroller plugin is applied, the pageLength setting is ignored and all data is displayed on one page.
How can I enable the pageLength setting while applying the scroller plugin?
[Version info]
DataTables: 1.13.1
Scroller: 2.0.7
Its possible to combine pagination and scroller :
by adding this options :
scrollY: '200px', // to enable vertical scrolling.
paging: true, // is to enable or disable table pagination. (default true)
$(document).ready(function () {
$('#example').DataTable( {
lengthMenu: [
[5, 10, 25, 50, -1],
[5, 10, 25, 50, 'All'],
],
pageLength: 10,
scrollY: '200px',
paging: true
} );
});
<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.7/js/dataTables.scroller.min.js"></script>
<body>
<table id="example">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>23</td>
</tr>
<tr>
<td>16.5454</td>
<td>16.5454</td>
<td>15</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>15</td>
<td>16.5454</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>316.5454</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>16.5454</td>
<td>16.5454</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>15</td>
<td>16.5454</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>316.5454</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>316.5454</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>316.5454</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>316.5454</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>316.5454</td>
<td>1</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
As answered above, pagination and scroller can be combined without any complex settings.
After some investigation, I found what was happening to my environment.
In my system, DataTable has to hide the lengthChange select box.
Until the scroller plugin was applied, the pageLength setting had been reflected in the DataTable as expected.
However, when I applied scroller, the DataTable became to show all records instead of the count set as pageLength value.
I didn't realize the pageLength settings were reset because the lengthChange select box is hidden.
(For the investigation purpose, I created the simplified DataTable, but I could not find the 'trap' of the scroller specification, then I still suspected it was the restriction of the plugin.)
Now I understand the pageLength setting will be just ignored when scroller is true.
If pageLength and scroller is used together, the pageLength value is just needed to set programmatically.
That's simple.
[FYI] Simplified code is shown below:
The behavior can be checked by switching the scroller setting to true or false.
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.7/js/dataTables.scroller.min.js"></script>
<script>
$(() => {
$('table').DataTable({
columns: [
{ data: 'id' },
{ data: 'name' }
],
pageLength: 5,
// This option was the cause of the problem.
lengthChange: false,
// If 'scroller' option is set as 'true', the 'pageLength' setting is ignored.
scroller: true
});
});
</script>
</head>
<body>
<table>
<thead>
<tr><th>id</th><th>name</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Airi Satou</td></tr>
<tr><td>2</td><td>Angelica Ramos</td></tr>
<tr><td>3</td><td>Ashton Cox</td></tr>
<tr><td>4</td><td>Bradley Greer</td></tr>
<tr><td>5</td><td>Brenden Wagner</td></tr>
<tr><td>6</td><td>Brielle Williamson</td></tr>
<tr><td>7</td><td>Bruno Nash</td></tr>
<tr><td>8</td><td>Caesar Vance</td></tr>
<tr><td>9</td><td>Cara Stevens</td></tr>
<tr><td>10</td><td>Cedric Kelly</td></tr>
<tr><td>11</td><td>Charde Marshall</td></tr>
<tr><td>12</td><td>Colleen Hurst</td></tr>
</tbody>
</table>
</body>
</html>
Related
There is a table that is sorted by clicking from larger to smaller values. How to make sure that the ordinal number of the value is always between 1 and 5 after sorting the table?
That is, the numerical order should always be between 1 and 5 and should not be sorted.
$(document).ready(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>
Never heard of - and therefore never used - stupidtable but it doesn't look like there is a call-back event once the sorting has completed.
So instead, I've used a timeout as part of the click event.
The within the timeout finds all the first-child <td> elements, and uses the index of each to set the text of the element.
As the stupidsort code does the sort 10-milliseconds after the client event, I've had to make it 20 in the code for it to work...
$(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
// After a short period, set the values
setTimeout(function() {
$table.find("tbody tr td:first-child").each(function(i, v) {
$(this).text((i + 1).toString());
});
}, 20);
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>
I'm reading data into an html table from a database and would like to alternate the row color when the value in the first column changes -- nothing fancy just alternate between two colors to help visually group the data. The issue I'm having is the groups of data is dynamic, and I don't know how to change the colors based on dynamic data. I'm open to use CSS, jquery, javascript -- whatever tricks you have that would work. I've created a very simple jsFiddle that has all rows the same color for you to play with.
UPDATED EXPLANATION:
When I say I want the row colors to alternate based on the value of a column changing, what I mean is, when looking at my fiddle example, the table rows start off aliceblue, and the value in the first column is 1. When that value changes to 2 I want the table rows to change colors to lightgreen. When the Key column value then changes to 3 I want the colors to switch back to aliceblue. When the key column value changes to 4 I want it to flip back to light green. Hope this helps to clarify...
As always, any help you can give would be greatly appreciated!!
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
<div id="banner-message">
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I have added some javascript logic to make it work. I have added two scenarios. One if class should be based on the Odd/Even values and another is if class should be based on the value change.
See the Snippet below:
$(document).ready(function(){
$("#banner-message tbody tr").each(function() {
if(parseInt($(this).find("td").first().html()) % 2 == 0){
$(this).addClass("altColor");
}
});
let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != parseInt($(this).find("td").first().html())){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = parseInt($(this).find("td").first().html());
});
});
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
div {
display:inline-block;
padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
Based on the Even/Odd values
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div id="banner-message2">
Based on the value change
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I hope this will help you :)
You can alternate color on a table with the :nth-child selector and the odd and even rules.
More can be found there https://www.w3.org/Style/Examples/007/evenodd.en.html
Try something like this:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
If you want to get the whole string in column use
$(document).ready(function(){
//let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let prevValue = $("#banner-message2 tbody tr").find("td:first").html();
console.log(prevValue);
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != $(this).find("td:first").html()){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = $(this).find("td:first").html();
});
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm starting to develop an HTML/Javascript/jquery application.
I have an HTML table with 100 rows and 5 columns.
I can display only 10 rows of this table on my device, so I need to scroll up and down on this table to display all values.
In order to do this, I need to enable scrolling only on the middle column. With the scroll event on the middle column, the table should scroll normally.
With the scroll event on other column, the table shouldn't scroll.
Furthermore, the table has a header and a footer. These elements must be fixed on table scroll.
Can you post some idea or piece of code to do that?
Simply toggle overflow-y values auto / hidden when a desired column is hovered
var $container = $("#container");
$container.find("td").hover(function(){
$container.toggleClass("oyScroll", $(this).index() == 1);
});
#container {
height:170px;
overflow:hidden;
}
#container.oyScroll {
overflow-y: auto;
}
table {
width:100%;
}
table td {
background:#eee;
padding: 12px 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
I am trying to implement drag and drop rows with in same table using html5, but I would like to restrict the drop area to few rows instead of whole table.
Code :
<table id="visibletable" class="dra-table">
<thead>
<tr>
<th>Visible</th>
<th>Width</th>
<th>Color</th>
</tr>
</thead>
<tbody ondrop="dropPart(event)" ondragover="allowDropPart(event)">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc1" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc2" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc3" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc4" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc5" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
First 3 rows in the table are not be allowed to drag and draggable rows should not be allowed to drop with in first 3 rows.
Currently I am have applied ondrop="dropPart(event)" at the tbody tag so I am able to drop rows any where in the table, Is there a way to restrict drop area?
You Can Refere Below Link For Native HTML5 Drag and Drop
http://www.redips.net/javascript/drag-and-drop-table-row/
http://www.html5rocks.com/en/tutorials/dnd/basics/
I have two tables with different heights next to each other. I would like the tables to slideToggle independently.
When selecting the table headers, currently nothing is happening...
The fiddle: http://jsfiddle.net/wod51fvL/
Any comments welcomed!
The HTML:
<h1>Test Heading 1</h1>
<table>
<tr>
<td valign="top">
<table class="tableSort">
<thead>
<tr>
<th id="clientClick" colspan="3" style="cursor:pointer;">Client</th>
</tr>
</thead>
<div id="clientResult">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</div>
</table>
</td>
<td valign="top">
<table class="tableSort">
<thead>
<tr>
<th id="employeeClick" colspan="3" style="cursor:pointer;">Employee</th>
</tr>
</thead>
<div id="employeeResult">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</div>
</table>
</td>
</tr>
</table>
The JS:
var j$ = jQuery.noConflict();
j$(document).ready(function () {
j$("#clientClick").click(function () {
j$("#clientResult").slideToggle(600);
});
});
j$(document).ready(function () {
j$("#employeeClick").click(function () {
j$("#employeeResult").slideToggle(600);
});
});
A very bad html and js
You can't wrap tr tags into div.
You don't need to call document.ready function twice
Here is a quick jsfiddle to fit your example. It needs to be improved(no time sorry).
http://jsfiddle.net/wod51fvL/7/
$(document).ready(function () {
$("#clientClick").click(function () {
$("#clientResult").slideToggle(600);
});
$("#employeeClick").click(function () {
$("#employeeResult").slideToggle(600);
});
});