Dynamically add headers in table datatable - javascript

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.

Related

Table <tr> appending again and again

I'm creating <tr> dynamically and append this tr to <tbody> with jquery append method.
The <table> is created inside modal whenever I open modal without refreshing the page the same <tr> appending again and again to the old <tr>.
TABLE inside modal
<table class="table table-bordered tablesorter" id="work_aval">
<thead>
<tr>
<th rowspan="1" colspan="8" class="text-center"></th>
</tr>
<tr>
<th rowspan="1" colspan="8" class="text-center">It is necessary to have some element of weekend availability. If you tick the weekends this could be applied as alternate as well
</th>
</tr>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
AJAX call for <tr> append
$("#work_aval tbody").append(response.availability);
Can you please try html() instead of append() method?
Ex:
$("#work_aval tbody").html(response.availability);
$('#work_aval tbody').empty();
This line works for me.
Thanks

Fetch the row from html table on button click

So, I have a table with update button, and I want to be able to fetch a column from the row button was clicked on.
Below is the html code for table
<table class="table table-hover" style="width: 99%">
<thead class="thead-dark" align="center">
<tr>
<th>ID</th>
<th>Trainee Class</th>
<th>Start Date</th>
<th>Edit</th>
<th>Trainees</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td class="nr">J001</td>
<td>Java Stream</td>
<td>01-April-2018</td>
<td><button onclick="updateData()">Update</button>
<button>Remove</button></td>
<td><button>View</button></td>
</tr>
<table>
So, when I click update, i want to fetch "J001" (first column of the update button row).
I tried below, but it's not fetching.
function updateData(){
var $item = $(this).closest("tr")
.find(".nr")
.text();
alert($item);
}
Any help or suggestion will be appreciated.
You have to pass this in your update function call,
Your Html should be,
<table class="table table-hover" style="width: 99%">
<thead class="thead-dark" align="center">
<tr>
<th>ID</th>
<th>Trainee Class</th>
<th>Start Date</th>
<th>Edit</th>
<th>Trainees</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td class="nr">J001</td>
<td>Java Stream</td>
<td>01-April-2018</td>
<td><button onclick="updateData(this)">Update</button>
<button>Remove</button></td>
<td><button>View</button></td>
</tr>
<table>
Jquery function should be,
function updateData(e){
var $item = $(e).closest("tr")
.find("td:first")
.text();
alert($item);
}

Loop table to even row amount in JQuery

The question I have a table pulling from the backend for events, will list out in the font in 3 different column with specific categories, but sometimes only have 1 event or 2, but I need to at least display 3 items.
So I try to use jQuery each function to check how many rows in the table if only have 1 add 2 rows if only have 1 row add 2 instead.
So the table will be same height no matter how many events display.
My code doesn't work correctly, so I was hoping anyone can help me out with this.
Here's my sample code:http://jsfiddle.net/s2devfrg/
Here's the jQuery:
jQuery(function(){
jQuery('#table-amount tbody').each(function(){
let number =jQuery(this).find('tr').length;
console.log('amount' + number);
//if table only have one add two extra row
if(number === 1){
jQuery(this).append("<tr> </tr>");
jQuery(this).append("<tr> </tr>");
} else {
//if table only have two add one roe
if(number === 2 ){
jQuery(this).append("<tr> </tr>");
}
}
})
})
The selector you are using on .each is wrong. There are no elements with the passed id.
Also there are couple of blank tr's in your html which I have removed.
Try this code below:
jQuery(function(){
jQuery(".table tbody").each(function(){
let number =jQuery(this).find('tr').length;
console.log('amount' + number);
//if table only have one add two extra row
if(number === 1){
jQuery(this).append("<tr><td> </td></tr><tr><td> </td></tr");
} else if(number === 2 ){
jQuery(this).append("<tr><td> </td></tr>");
}
})
})
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead class="table-amount">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Updated fiddle link
I have reviewed you sample code, first of all kindly note that in jQuery
when you find tr it will count total number of rows including tr inside thead.
So your
total counts are always one more than actual rows.
Second thing you should not append just tr you should provide same structure
as in
your existing rows.
Also in first table structure you had one extra th may be typo.
In first and third table structure you have one tr extra with empty
structure
instead, you should have same structure as you have for others.
here is the link for modified JS Fiddle link
https://jsfiddle.net/patelmurtuza/kj8zgqad/

How to copy rows and paste selected rows in same table

Here i want to copy rows and must be able to paste the rows below
i want to add functionality to my table as in this fiddle
http://jsfiddle.net/Lfjuapub/1/
Please find my fiddle
https://jsfiddle.net/zrcoLyeg/6/
<table id="tblColumnSchedule" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th data-sort-initial="true" data-toggle="true">User</th>
<th data-hide="phone, tablet">Label</th>
<th data-hide="phone, tablet">Profile</th>
<th data-hide="phone, tablet">Location</th>
<th data-hide="phone, tablet">Start</th>
<th data-hide="phone, tablet">End </th>
</tr>
</thead>
<tbody>
<tr>
<td>s1</td>
<td>w10x22</td>
<td>A1</td>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>s2</td>
<td>w10x24</td>
<td>A1.1</td>
<td>20</td>
<td>40</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
For example if i select 2 rows cloumns like Location, Start , End,
i must be able to paste selected rows in 3 rows.
Any help is highly appiceable.
Try using an external library like handsontable.

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>

Categories