We Keep Coding

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>

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

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')

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.