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'
} );
} );
Related
I have a table in a razor page in which I'm looping through an IENumenrable collection (vwAssignedTaskProgress) and adding rows based on conditions. One or more of the contains 'recent' to indicate it is a row that has been recently added. I want to briefly highlight these rows to indicate they are new rows.
My problem is twofold. I'm using jquery (although I'm happy with any solution) and I can't get the jquery selector to fire on rows generated inside my loop. It works fine on content outside my # block of code.
And secondly, I can't seem to get .effect to work in Jquery (trying outside the # block). Research tells me that it's part of jquery UI which is both incorporated into jquery and deprecated.
Using jquery 3.5.1
<table class="table text-center" id="tblTasks4">
<tbody>
#foreach (var tsk in Model.vwAssignedTaskProgress){
#if ((#tsk._ChildUserId == #student.ChildUserId) && (#tsk.stStatus < 2))
{
<tr >
<th scope="row">
#tsk.Description
</th>
#if(#tsk.Created > DateTime.Now.AddMinutes(-1))
{
<td >
recent
</td>
}
</tr>
}
}
</tbody>
</table>
script block, within a form and body tag.
<script>
$('#tblTasks4 td').filter(
function(t){
if($(this).text() =="recent") {
$(this).closest('tr').effect("highlight", {}, 3000);
return;
}
});
</script>
First of all jQuery UI is not included in jQuery. You have it add it to your project separately.
Then I would add a recent class to the recent tds and hightlight them using:
$('.recent').parent().effect("highlight", {}, 3000);
Example:
<table class="table text-center" id="tblTasks4">
<tbody>
#foreach (var tsk in Model.vwAssignedTaskProgress)
{
#if ((#tsk._ChildUserId == #student.ChildUserId) && (#tsk.stStatus < 2))
{
<tr>
<th scope="row">
#tsk.Description
</th>
#if (#tsk.Created > DateTime.Now.AddMinutes(-1))
{
<td class="recent">
recent
</td>
}
</tr>
}
}
</tbody>
</table>
#section Scripts {
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
<script>
$('.recent').parent().effect("highlight", {}, 3000);
</script>
}
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
I am using a jQuery plugin to drag table columns to rearrange them as below
$("#myTable").dragtable();
It works fine for existing table and I can drag table columns. However I need to add rows dynamically in myTable but I can't drag dynamically added column.
I looked documentation for .live method but not sure how I would use it in my scenario.
any suggestion ?
You can do like this:
$('.defaultTable').dragtable('destroy').dragtable({});
Full example:
$('.defaultTable').dragtable();
$('#add-column').click(function(e){
var tbody = $('.defaultTable').find('tbody'),
thead = $('.defaultTable').find('thead');
tbody.find('tr').each(function(){
var tr = $(this);
tr.append('<td>Some column</td>');
});
thead.find('tr').each(function(){
var tr = $(this);
tr.append('<th>appended column header</th>');
});
$('.defaultTable').dragtable('destroy').dragtable({});
});
<link href="https://rawgit.com/akottr/dragtable/master/dragtable.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<span id="add-column">Add column</span>
<table class="defaultTable sar-table">
<thead>
<tr>
<th>TIME</th>
<th>%user</th>
<th>%nice</th>
<th>%system</th>
<th>%iowait</th>
<th>%idle</th>
</tr>
</thead>
<tbody>
<tr>
<td>12:10:01 AM</td><td>28.86</td><td>0.04</td><td>1.65</td><td>0.08</td><td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td><td>26.54</td><td>0.00</td><td>1.64</td><td>0.08</td><td>71.74</td>
</tr>
<tr>
<td>12:30:01 AM</td><td>29.73</td><td>0.00</td><td>1.66</td><td>0.09</td><td>68.52</td>
</tr>
</tbody>
</table>
You can't use .live in this situation. You will have to just call .dragtable() for each new element that you add.
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)
},{
...
I'm working in SharePoint 2010, and I have a list that I want to display a very specific way. Basically, I'm using Javascript, jquery, and SPServices to query the list and build a table in a content editor web part with links differing dependent on login name and request status. Okay, so that works, but now I'm trying to sort/filter the Javascript-generated table, and it's no soup for me.
I tried a few different Javascripts that sort and filter, and this one seems to be the one that does what I need: http://www.javascripttoolbox.com/lib/table It does work if I create an HTML table in the content editor web part, but if the table's not present on page load that's where the issues start arising.
Any help or suggestions are much appreciated.
Here's a few snippets of code:
<table class="table-autosort table-autofilter" id="openReqTable" bordercolor="#000000" border="1" cellspacing="0" cellpadding="5">
<thead>
<tr>
<th class="table-sortable:numeric table-filterable">Request ID</th>
<th>
...
</th>
<th>Request Status</th>
</tr>
</thead>
<tbody></tbody></table>
<script src="/Utilities/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/Utilities/jquery.SPServices-0.5.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
var tableRowCount = 1;
var query;
...
$(document).ready(function()
{
currentUserVar = $().SPServices.SPGetCurrentUser({
fieldName: "UserName",
debug: false
});
...
var groupCollectionVar = $().SPServices({
operation: "GetGroupCollectionFromUser",
userLoginName: currentUserVar,
completefunc: groupTestFunc
});
});
function groupTestFunc(xData,status)
{
...
newRow=document.getElementById('openReqTable').insertRow(tableRowCount);
newTableColumnA=newRow.insertCell(0);
...
newTableColumnK=newRow.insertCell(10);
...
newTableColumnA.innerHTML=requestIDLink;
...
newTableColumnK.innerHTML=requestStatus;
tableRowCount++;
});
}</script><script src="/Utilities/table.js" type="text/javascript"></script>