I have a datatable that th header misaligned with the content. Please help me to adjust the header and content so that parallel. Because it look
<div style="margin-top:10px; padding: 10px;">
<table id="example" class="table display nowrap table-bordered table-striped" style="width:100%;">
<thead>
<tr>
<th>Test1</th>
<th>Test2</th>
<th>Test34567</th>
<th>Test890</th>
</tr>
</thead>
<tbody>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tbody>
</table>
</div>
$(document).ready(function() {
$('#example').DataTable({
scrollX: true
});
});
I know its been a while but the solution still might help others as I had the similar issue recently,
This scenario is happening because of the scrollX. You can set the scrollX to false or update the CSS to adjust the header width to 100%. This can be done inside the JS,
$(document).ready(function() {
$('#example').DataTable({
scrollX: true
});
//Newly added lines
$(".dataTables_scrollHeadInner").css( "width", "100%" );
$(".dataTables_scrollHeadInner table").css( "width", "100%" );
});
This solution is inspired by the answer posted in the datatable discussion forum
Related
I have following table, I want whole to scroll horizontally automatically, like marquee scroll to right to left, without clicking any button. Is there any way to make scroll like marquee automatically using HTML, CSS or JQuery. Thank you.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="table" id="table" style="width: 100%;">
<tbody>
<tr>
<th rowspan="2" id="mkdth">Pool Size (unheated pool)</th>
<th rowspan="2" id="mkdth">Surface Area</th>
<th id="with" colspan="2">WITHOUT POOL COVER</th>
<th id="with" colspan="2">WITH POLCO POOL COVER</th>
</tr>
<tr>
<td rowspan="">Average Evaporation per Month (Feb-May)</td>
<td>Average Evaporation per Day (Feb-May)</td>
<td>Average Evaporation per Month (Feb-May)</td>
<td>Average Evaporation per Day (Feb-May)</td>
</tr>
<tr>
<td>8.0*4.0m</td>
<td>32.0m2</td>
<td>6018 litres</td>
<td>66 litres</td>
<td>485 litres</td>
<td>5.4 litres</td>
</tr>
</tbody>
</table>
</div>
you need to use Marquee CSS for this, use animations of CSS to create this effect
refer: https://htmleditor.w3schools.in/?filename=html_css_scrolling_text_using_css
mostly you need to work with (transform: translateX(100%);) this.
I have below code to generate table. Data is comming through searchkit
<Table>
<Thead>
<Tr>
<Th>ID</Th>
<Th>PR</Th>
<Th>Order Details</Th>
<Th>Supplier Name</Th>
<Th>Raised On</Th>
<Th>Status</Th>
<Th>PO</Th>
</Tr>
</Thead>
<Tbody>
{<ViewSwitcherHits
hitsPerPage={10}
sourceFilter={["orderId", "pRNumber", "listOrderProductVM", "listOrderCompanyVM", "createdDate", "statusName", "listOrderPOVM"]}
hitComponents={[
{ key: "table", title: "Table", itemComponent: OrderDetail, },
]}
scrollTo="body"
className='divTableBody'
/>}
<NoHits
errorComponent={errorComponent}
translations={{
"NoHits.NoResultsFound": "No Records Found.",
}} suggestionsField="title" />
</Tbody>
</Table>
I'm using react-super-responsive-table. ViewSwitcherHits is searchkit functionality which is adding div tag as parent in dynamic data. So because of DIV coming right after tbody the table is not showing properly. So I'm thinking to convert that div tag to tbody. Is this right approach to do or any other solution?
below is html screenshot
That's one way of doing it. A maybe cleaner way would be to get the children of what's returned by the search kit component
Search and pagination controls in datatable are showing in center by default.. I want to be them in right position as same as shown in datatables documentation
$(document).ready(function() {
$('#example').DataTable();
});
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="box-body">
<table id="example" class="table table-bordered table-striped">
<thead>
<tr>
<th>Partner Category/Partner Group</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
There is a property called dom in datatable constructor which can be used to specify different options for datatables like pagination, search input etc.
The built-in options available are:
l - Length changing
f - Filtering input
t - The Table!
i - Information
p - Pagination
r - pRocessing
< and > - div elements
<"#id" and > - div with an id
<"class" and > - div with a class
<"#id.class" and > - div with an id and class
To manipulate the search input you can wrap that with class or ID and with the help of CSS you can achieve the positioning you want. Like this,
$(document).ready(function() {
$('#example').DataTable( {
"dom": '<"search"f>i'
} );
} );
Table without table-responsive class div works perfectly with the sortable options of api jquery ui,
$(document).ready (function () {
$("#sortable").sortable ({
scroll: true,
scrollSensitivity: 20,
scrollSpeed: 40,
});
$("#sortable").disableSelection ();
});
<table class = "table-hover table-striped">
<tr> <td> many, many lines <td> </tr>
</table>
But when we put the responsiveness option in the table the options described above do not work
<div class = "table-responsive">
<table class = "table-hover table-striped">
<tr> <td> many, many lines <td> </tr>
</table>
</div>
The scroll: true, scrollSensitivity: 20, scrollSpeed: 40 options stop working.
How do these options work together with the div class of resposivity?
$("# sortable").sortable ({
is invalid.
Use
$("#sortable").sortable ({
Been a while research, try to hide one specify column in kendo grid table
using this
$('#grid .k-grid-content table tr td:nth-child(8),th:nth-child(8)').toggle();
with no help, anyone has ideas?
The column I want to hide bind to
{
field: "CreatedDate",
width: 20,
title: "Create Date",
type: 'date',
template: '#= kendo.toString(CreatedDate,"MM/dd/yyyy") #'
}
[edited]
$('#grid div.k-grid-header-wrap th:nth-child(4)').toggle()
$('#grid div.k-grid-content td:nth-child(4)').toggle()
can only hide the header..but not the whole column, still need help!
Assuming #grid is already bound as the kendo grid, you can use the hideColumn function:
var grid = $("#grid").data("kendoGrid");
grid.hideColumn("CreatedDate");
This will hide both the header and data column. There is also a showColumn function when you need to show the column as well.
Try this:
$('#grid div.k-grid-header-wrap th:nth-child(4)').toggle();
$('#grid div.k-grid-content td:nth-child(4)').toggle();
or (combined into a single selector):
$('#grid div.k-grid-header-wrap th:nth-child(4), #grid div.k-grid-content td:nth-child(4)').toggle();
Kendo UI Grid apparently breaks up the table into a structure like this:
<div id="grid">
<div class="k-grouping-header"></div>
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table cellspacing="0">
<colgroup>
<col />
</colgroup>
<thead>
<tr>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table class="k-focusable" cellspacing="0">
<colgroup>
<col />
</colgroup>
<tbody>
<tr data-uid="5f65ad8c-601d-4700-a176-23be2d33fc76">
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="k-pager-wrap k-grid-pager k-widget" data-role="pager">
</div>
</div>
As the table header and table body are in different div elements, you need two selectors to get them both.
I show or hide a specific column depending on the screensize.
When the screen is smaller as X, the expression gives true.
hidden: ($(window).width() < 1350)
(Define in the columns section)
columns: [{
field: "Answers",
title: "Answers",
width: 35,
hidden: ($(window).width() < 1350)
},{
...