How to move show entries column to below of datatables - javascript

i am trying to do the load on demand by using datatables on my mvc page
if you see in the picture, the show entries is on the top of the datatables
can i move the show 10 entries to the below of the showing 1 to 10 entries there?.
the following is my html code
<div class="dataTables_hideonload m-b-10">
<table class="table table-condensed table-vertical-middle table-layout-fixed table-noajax" id="tableCategoryList" width="100%">
<thead>
<tr>
<th class="text-left">Category ID</th>
<th class="text-left">Category Name</th>
<th class="text-left">Sort order</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

You can re-position it by using:
"dom": '<"top"i>rt<"bottom"flp><"clear">'
Re-positioning reference

Related

How to delete column in html from javascript

I have a table and I want to delete a column when Variables.Product.URUN_KOD == '310' I can delete this row first get to 310 but get the second time it deletes automatically first column's last element you can see in the picture. Thanks
$("#SigortaliCustomerDataTable tr").find('td:eq(5),th:eq(5)').remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-group-sm">
<div class="col-sm-12">
<hr />
<table class="table table-striped table-bordered" id="SigortaliCustomerDataTable">
<thead>
<tr>
<th>Müşteri No</th>
<th>Ad Soyad</th>
<th>TCKN/VKN</th>
<th>Yazışma Adresi</th>
<th>İletişim</th>
<th style='width:50px'>Pay</th>
<th style='width:50px'></th>
<th style='width:50px'></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
You can remove the remove by using this code. No need of any iteration:
$("#SigortaliCustomerDataTable tr").find("th:eq(5), td:eq(5)").remove();
Please check this fiddle I created for you: https://jsfiddle.net/2cqow1y5/

How to refresh DataTables sort and filter info

For simplicity of the example I have a DataTable which I load from HTML.
This DataTable is having parts of its content updated through jQuery BUT the updated content while visible in the table, does not reflect when sorting or filtering.
See html code below
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Votes</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<th>John</th>
<th>Doe</th>
<th id="entry1_votes">50</th>
<th>London</th>
</tr>
<tr>
<th>Hill</th>
<th>Vaught</th>
<th id="entry2_votes">120</th>
<th>Berlin</th>
</tr>
<tr>
<th>Charles</th>
<th>Roy</th>
<th id="entry3_votes">78</th>
<th>Liege</th>
</tr>
</tbody>
</table>
and javascript
$(document).ready(function() {
var dt = $('#example').DataTable({});
$("#entry2_votes").text(60);
});
So if you try sorting Votes column or try filtering by the new value 60 set through jQuery it wont work
See this working example https://jsfiddle.net/bpali/d97bpqvs/3/
Obviously, my question is how to make it work as in my real life situation I have to update parts of the DataTable constantly through different Ajax requests of different page sections and I cannot just put an ajax source on the table and reload the table.
This is the correct way:
$(document).ready(function() {
var dt = $('#example').DataTable({});
dt.cell( $("#entry2_votes") ).data(60) ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Votes</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<th>John</th>
<th>Doe</th>
<th id="entry1_votes">50</th>
<th>London</th>
</tr>
<tr>
<th>Hill</th>
<th>Vaught</th>
<th id="entry2_votes">120</th>
<th>Berlin</th>
</tr>
<tr>
<th>Charles</th>
<th>Roy</th>
<th id="entry3_votes">78</th>
<th>Liege</th>
</tr>
</tbody>
</table>
Fiddle: https://jsfiddle.net/HappyiPhone/d97bpqvs/7/
Check online demo
You have to reinitialize data table after updating with jquery or you can update by datatable in-built methods/api
$('#example').DataTable().destroy();
$('#example').DataTable().draw();

html table fields are not recognized in asp.net IDE

jsFiddle
I am trying to replicate this html code into asp.net aspx page source.
While doing so, the following table elements like field, fitColumns are not recognized by the VS IDE although the link is provided for jeasyui.js.
<table class="cartcontent" fitColumns="true" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
<th field="remove" width=60 align="right">Remove</th>
</tr>
</thead>
</table>
I managed to do this as per the jeasyui documentation.
<table class="cartcontent"
data-options="fitColumns:true, singleSelect: true">
<thead>
<tr>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'quantity',width:100">Quantity</th>
<th data-options="field:'balance',width:100,align:'right'">Balance</th>
<th data-options="field:'remove',width:100,align:'right'">Remove</th>
</tr>
</thead>
</table>

Enabling horizontal scroll on Table using Jquery Template

I'd like to enable horizontal scroll on my table using Jquery Template.
The table structure (HTML) is :
<div class="col-sm-12">
<div class="shadow-wrapper">
<div class="tag-box tag-box-v1 box-shadow shadow-effect-2 km-table-container">
<script id="tblScriptMember" type="text/x-jquery-tmpl">
<tr class="pointer">
<td>${MemberCode}</td>
<td>${MemberName}</td>
<td>${MemberCardNo}</td>
<td class="text-center">{{if MemberType == 'A'}}
<input type="checkbox" checked="checked" disabled="disabled">
{{else}}
<input type="checkbox" disabled="disabled">
{{/if}}
</td>
<td>${MemberNIK}</td>
<td>${ClientCode}</td>
<td>${ClientName}</td>
<td>${MemberRegistDate}</td>
<td>${MemberBirthDate}</td>
<td>${MemberEffStartDate}</td>
<td>${MemberEffEndDate}</td>
<td>${MemberModifiedDate}</td>
<td>${MemberModifiedBy}</td>
</tr>
</script>
<table id="tblMember" class="table table-striped table-hover table-nomargin table-bordered lookup-table" style="width:1000px">
<thead>
<tr>
<th data-field-name='MemberCode' data-sort="asc" title="Sort Member Code">Member Code</th>
<th data-field-name='MemberName' data-sort="asc" title="Sort Member Name">Member Name</th>
<th data-field-name='MemberCardNo' data-sort="asc" title="Sort Member Card">Member Card No</th>
<th data-field-name='MemberType' data-sort="asc" title="Sort Employee Status" style="width: 20px" class="text-center">Employee</th>
<th data-field-name='ClientCode' data-sort="asc" title="Sort Client Code">Client Code</th>
<th data-field-name='ClientName' data-sort="asc" title="Sort Client Name">Client Name</th>
<th data-field-name='MemberRegistDate' data-sort="asc" title="Sort Join Date">Register Date</th>
<th data-field-name='MemberBirthDate' data-sort="asc" title="Sort Member Birthdate">Birth Date</th>
<th data-field-name='MemberEffStartDate' data-sort="asc" title="Sort Member Start Date">Eff Start Date</th>
<th data-field-name='MemberEffEndDate' data-sort="asc" title="Sort Member End Date">Eff End Date</th>
<th data-field-name='MemberModifiedDate' data-sort="asc" title="Sort Member Modified Date">Modified Date</th>
<th data-field-name='MemberModifiedBy' data-sort="asc" title="Sort Member Modifier">Modified By</th>
</tr>
</thead>
<tbody id="resultDataMember">
</tbody>
</table>
</div>
as you can see it running here.
I have tried the following solution, using two wrapper, but my main display become un-clean and not consistent, even my tables exceeded my main display.
Would you recommend me the solution? How I can do this with this table template? Changing my table template is not my solution, because I have another function triggered within this table template events.
Very big thanks to #CerlinBoss
The only left question here is, my footer div seems not following my table overflow style.
There is some empty spaces on my footer div, take a look at my firebug component focus..
As you can see on this screen shot:
add overflow-y:auto for shadow-wrapper
For the space issue just check if there is any padding or margin is set.
UPDATE:
A jquery solution would be
$(document).ready(function(){
$('.kamoro-table-footer').css('width',$('#tblMember').width() + "px");
})

Dynamically add headers in table datatable

Is it possible to work with 2 rows in THEAD with dataTables?
<table>
<thead>
## row 1
## row 2
</thead>
<tbody></tbody>
</table>
In row 1 I need 2 single columns and one column with colspan="3":
<tr>
<th></th>
<th></th>
<th colspan="3"></th>
</tr>
And in row 2 I need 5 columns:
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
But I have a case where I don't need 5 columns, but only 3.
Can this be generated dynamically?
UPDATE: I tried: http://datatables.net/release-datatables/examples/basic_init/complex_header.html
But there's no good example how it's generated.
If you look at the source code of the example link you posted, it seems quite clear:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th colspan="3">Details</th>
</tr>
<tr>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
<tr>
<th colspan="3">Details</th>
</tr>
</tfoot>
(Code lifted from link above)
A word on viewing source code: In Firefox you can press ctrl + u to view the page source code. Even if there is heavy jQuery action on the page, the source code in that window will always be the original one without DOM modifications.

Categories