Enabling horizontal scroll on Table using Jquery Template - javascript

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");
})

Related

Datatable not being responsive after adding many columns

My datatable is not being responsive after I specified all the column to be appear. Let's say today I put the following code:
<table id="tableWithdrawalList" class="display responsive nowrap table table-striped table-lightfont" style="width:100%; border-top:1px solid grey;">
<thead>
<tr>
<th class="text-left"><input type="checkbox" title="Select all" id="selectedAllRadio" onclick="checkUnCheckAll()" /></th>
<th class="text-left">Request Receipt</th>
<th class="text-left">Created Date</th>
<th class="text-left">Serial Number</th>
<th class="text-left">Full Name</th>
<th class="text-left">Email</th>
<th class="text-left">Amount</th>
<th class="text-left">Processing Fee</th>
<th class="text-left">Assigned To</th>
<th class="text-left">Assigned Time</th>
<th class="text-left">Status</th>
<th class="text-left">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
the result become
it fit well no problem. However they not displaying the column I mentioned in the datatable, it only show until processing fee.
Let's say now I specify all column
<table id="tableWithdrawalList" class="display responsive nowrap table table-striped table-lightfont" style="width:100%; border-top:1px solid grey;">
<thead>
<tr>
<th class="all text-left"><input type="checkbox" title="Select all" id="selectedAllRadio" onclick="checkUnCheckAll()" /></th>
<th class="all text-left">Request Receipt</th>
<th class="all text-left">Created Date</th>
<th class="all text-left">Serial Number</th>
<th class="all text-left">Full Name</th>
<th class="all text-left">Email</th>
<th class="all text-left">Amount</th>
<th class="all text-left">Processing Fee</th>
<th class="all text-left">Assigned To</th>
<th class="all text-left">Assigned Time</th>
<th class="all text-left">Status</th>
<th class="all text-left">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
Oh my god, the datatable cross the panel without being responsive, how I can display all column with responsive?
If you wanted to show all columns, I think you can try to adjust individual column width to fit nicely. Also, add this css property table-layout:fixed; to #tableWithdrawalList to force the text break in the table.
Hope it helps.

Angularjs using ng-repeat with <th> tag for repetitive column headers

I'm trying to create a table with multiple rows and one of the rows containing repetitive column headers like below.
I'm not sure how to use ng-repeat in angularjs to create these headers. I tried putting ng-repeat in <tr> element which obviously won't work as it creates multiples rows.
I also tried putting it in a <th> element but the headers won't appear alternatively.
I want to use ng-repeat (to display Current and Prior headers) rather than manually typing them like in the code below because number of times the the repetitive columns appear is dynamic (dependent on row 1).
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{ year }}
</th>
</tr>
<tr>
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</tr>
</thead>
There is ng-repeat start and end directive for this kind of situations:
angular.module("Test", []).controller("repetition",
function($scope)
{
$scope.years = function()
{
return [2017, 2018];
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="Test" ng-controller="repetition">
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{year}}
</th>
</tr>
<tr>
<th ng-repeat-start="year in years()" id="{{year}}planning" style="background-color:#EEEEEE" scope="col" class="tsub-head">Current</th>
<th ng-repeat-end id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</tr>
</thead>
<tbody></tbody>
</table>
Everithing in between the tags containing ng-repeat-start and ng-repeat-end will be included in the repetition.
By the way the same exists for ng-if (ng-if-start/ng-if-end)
Looking for the picture you provided, the solution lies in wrapping "current" and "prior" <th> with a <div> with ng-repeat directive. Like this:
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{year}}
</th>
</tr>
<tr>
<div ng-repeat="year in years()">
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</div>
</tr>
</thead>

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>

Using jquery datatables I can't make a cell colspan=3 without breaking FixedHead

I have a fixedhead datatable with the first 4 rows fixed to the top when scrolling down, the problem is that when I try to make the second row colspan=3 the one that says “make me colspan=3” the datatable loses its ability to be fixed to the top. I don’t know why that could affect the datatable. Thank you for your help.
Code: http://jsfiddle.net/xF8hZ/139/
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th colspan=3></th>
<th colspan=3>234</th>
</tr>
<tr>
<th>Make me </th>
<th>colspan</th>
<th>=3</th>
<th>
<p class="rotatehead">Hazmat</p>
</th>
<th>
<p class="rotatehead">Out of Area</p>
</th>
<th>
<p class="rotatehead">Lite</p>
</th>
</tr>
UPDATE: I just saw my console after adding the colspan=3 and I got this error:
Uncaught TypeError: Cannot read property 'style' of undefinedjquery.dataTables.js:4138 _fnCalculateColumnWidthsjquery.dataTables.js:3265 _fnInitialisejquery.dataTables.js:6521 (anonymous function)jquery-1.8.3.js:611 jQuery.extend.eachjquery-1.8.3.js:241 jQuery.fn.jQuery.eachjquery.dataTables.js:6047 DataTablejquery.dataTables.js:14691 $.fn.DataTablepriceadjustment.html:30 (anonymous function)jquery-1.8.3.js:974 jQuery.Callbacks.firejquery-1.8.3.js:1084 jQuery.Callbacks.self.fireWithjquery-1.8.3.js:406 jQuery.extend.readyjquery-1.8.3.js:83 DOMContentLoaded
From the DataTables complex header documentation:
Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables can use that cell to detect the column and use it to apply ordering.
In your example, the header column that you are trying to apply the colspan to does not contain a "unique cell".
You can get around this, however, by adding a single head row without colspan and then setting it's css to display:none;:
fiddle
Header Example:
<thead>
<tr>
<th colspan=3></th>
<th colspan=3>234</th>
</tr>
<!-- ADDED: Placeholder row for sorting -->
<tr class="place">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<!-- END Placeholder row for sorting -->
<tr>
<th colspan="3">Make me colspan = 3</th>
<th>
<p class="rotatehead">Hazmat</p>
</th>
<th>
<p class="rotatehead">Out of Area</p>
</th>
<th>
<p class="rotatehead">Lite</p>
</th>
</tr>
<tr>
<th colspan=3>RACK</th>
<th>
<div contenteditable>234</div>
</th>
<th>
<div contenteditable>234</div>
</th>
<th>
<div contenteditable>234</div>
</th>
</tr>
<tr>
<th colspan=3>TOTAL</th>
<th>
<div contenteditable>234</div>
</th>
<th>
<div contenteditable>234</div>
</th>
<th>
<div contenteditable>345</div>
</th>
</tr>
</thead>
Added CSS:
.place{
display: none;
}

Get value of hidden label in table using jquery?

I have an html table within a list view, and have a hidden label in it called "vehicle_num". I am able to get the selected row of the table, as well as any of the td, however I cannot seem to get the value of the label. I have tried:
var vehicle_number = $(this).closest('tr').children('#vehicle_num').text();
Below is the code for the listview. How can I get the value of the label?
<asp:ListView ID="lvEquipmentList" runat="server" DataKeyNames="vehicle_number">
<LayoutTemplate>
<table id="table-equipment-list" class="table table-list">
<thead>
<tr>
<th scope="col" class="product-line">Product line</th>
<th scope="col" class="model-number">Model #</th>
<th scope="col" class="serial-number">Serial #</th>
<th scope="col" class="dar-status">DAR Status</th>
<th scope="col" class="ship-date">Ship Date</th>
</tr>
</thead>
<tbody>
<asp:PlaceHolder ID="ItemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th>
<td class="model-number"><%#Eval("model")%><label class="vehicle_num" hidden="hidden"><%#Eval("vehicle_number")%></label></td>
<td class="serial-number"><%#Eval("serial_number")%></td>
<td class="dar-status"><img src='<%#Eval("display_status") %>'/></td>
<td class="ship-date"><%#Eval("date")%></td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<table id="table-equipment-list" class="table table-list">
<thead>
<tr>
<th scope="col" class="product-line">Product line</th>
<th scope="col" class="model-number">Model #</th>
<th scope="col" class="serial-number">Serial #</th>
<th scope="col" class="dar-status">DAR Status</th>
<th scope="col" class="ship-date">Ship Date</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="product-line"><div class="icon"></div> <span class="line-title"></span></th>
<td class="model-number"></td>
<td class="serial-number"></td>
<td class="dar-status"></td>
<td class="ship-date"></td>
</tr>
</tbody>
</table>
</EmptyDataTemplate>
</asp:ListView>
EDIT
I have edited the code above to put the label in a table column. I was able to get the value using:
var vehicle_number = $(this).closest('tr').find('.vehicle_num').text();
This is invalid markup:
<tr>
<th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th>
<td class="model-number"><%#Eval("model")%></td>
<td class="serial-number"><%#Eval("serial_number")%></td>
<td class="dar-status"><img src='<%#Eval("display_status") %>'/></td>
<td class="ship-date"><%#Eval("date")%></td>
<label id="vehicle_num" hidden="hidden" runat="server"><%#Eval("vehicle_number")%></label>
</tr>
There's an errant label as a child of a tr, which isn't valid. When the browser tries to make sense of this, it could be doing anything with that label to construct a valid DOM, which is going to effect your jQuery selectors.
The label needs to be in a table cell:
<tr>
<th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th>
<td class="model-number"><%#Eval("model")%></td>
<td class="serial-number"><%#Eval("serial_number")%></td>
<td class="dar-status"><img src='<%#Eval("display_status") %>'/></td>
<td class="ship-date"><%#Eval("date")%></td>
<td><label id="vehicle_num" hidden="hidden" runat="server"><%#Eval("vehicle_number")%></label></td>
</tr>
(Or, if it's always hidden anyway, you can probably put it in an existing table cell. Either way should work.)
Additionally, if the client-side id is being explicitly set here, then any repetition of these records will result in duplicate ids in the DOM, which is also invalid. Different browsers respond to id-based selectors in different ways when there are duplicate ids, because the behavior is undefined. You probably want to use a class instead:
<label class="vehicle_num" ...
Since the label is no longer a child of the tr but rather a descendant of it, use find() instead of children():
$(this).closest('tr').find('.vehicle_num')

Categories