So I'd like to use datatables such that each "row" looks like this (or at least has this general structure):
For reference here's the HTML I used to create that:
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<td colspan="2">joe bob</td>
</tr><tr>
<td rowspan="4">pic</td>
</tr><tr>
<td>DOB: 1/1/1970</td>
</tr><tr>
<td>Gender: M</td>
</tr><tr>
<td>Phone: 111-111-1111</td>
</tr>
</table>
Anyway, how might I achieve this with datatables? It seems to me that datatables returns a single <tr> but the HTML I used to produce the above has a whole bunch of <tr>'s.
I'd like to use datatables for it's ajaxified pagination and searching and for a consistent look and feel with other tables on this site.
You could do something like this in your datatable init code(untested):
'aoColumns': [
'mRender': function (data, type, full) {
return '<table border=\'1\' cellspacing=\'1\' cellpadding=\'1\'>' +
'<tr>' +
'<td colspan=\'2\'>' + full[0] +'</td>' +
'</tr><tr>' +
'<td rowspan=\'4\'>' + full[1] +'</td>' +
'</tr><tr>' +
'<td>DOB: ' + full[2] +'</td>' +
'</tr><tr>' +
'<td>Gender: ' + full[3] +'</td>' +
'</tr><tr>' +
'<td>Phone: ' + full[4] +'</td>' +
</tr>';
</table>
}
This way you're explicitly defining the row output. This would produce an 'inner' table within each datatable row, which may not be what you want. You might be able to create the inner layout using css instead of tables, but the idea would be the same. You could use a templating system like jsRender to make it a bit cleaner too.
Related
I am trying to implement Footable on my website, but I encounter a problem whereby every time I added a new set of values into my footable, the table does not auto paginate it. which mean
even though I have set it to have a limit of 10
data-paging-size="10"
Every time I append into my table, it does not auto redraw and paginate. It will keep on adding to my current page and the size will keep increasing
<table id="myTable" class="table footable filter-dropdown-no bid-list-table " data-paging-size="10" data-sorting="true" data-filtering="true">
<thead>
<tr>
<th data-breakpoints="xs sm">Photo</th>
<th>Facebook Name/ID</th>
<th >Qty</th>
<th data-breakpoints="xs sm">Comment</th>
<th data-breakpoints="xs sm">Comment Time</th>
<th data-breakpoints="xs">Action</th>
</tr>
</thead>
<tbody >
````
</tbody>
</table>
Here is my javascript
function localStorageLiveUpdate(value){
$('.bid-item-customer-id-' + value.id).remove();
$('.footable-empty').remove();
var html = '<tr class="bid-item bid-item-' + value.id;
html += ' bid-item-customer-id-' + value.id + '" data-id="' + value.id + '" data-customer-id=" ' + value.customer_id + '">';
html += '<td data-fb-user-id="' + value.fb_user_id + '" style="display: table-cell;"></td>';
html += '<td style="display: table-cell;">' + value.from.name + '<p>(' + value.from.id + ')</p></td>';
html += '<td style="display: table-cell;"><form method="post" class="form-bid-item-action" action="{{ config('app.url') }}/admin/bid/' + value.id + '/action">';
html += '<input type="hidden" name="_token" value="' + value.csrf + '"><div class="input-group">';
html += '</div></form></td><td style="display: table-cell;">' + value.message + '</td><td style="display: table-cell;">' + timeCreated + '</td><td style="display: table-cell;">';
html += '<form method="post" class="form-bid-delete-action" action="{{ config('app.url') }}/admin/bid/' + value.id + '/delete/action">';
html += '<input type="hidden" name="_method" value="delete"><input type="hidden" name="_token" value="' + value.csrf + '">';
html += '</form></td></tr>';
$('.bid-list-table tbody').append(html);
}
Thanks for spending your time to help.
Your table size keep increase because every time you call the function "localStorageLiveUpdate" you are appending data and adding new line
// Add this line before appending new element
$('.bid-list-table tbody tr').remove();
$('.bid-list-table tbody').append(html);
This question already has answers here:
How do I force jQuery append to NOT automatically close a tag?
(3 answers)
Closed 1 year ago.
im doing an ajax call and getting alot of results from DB and then im using jquery to loop them and do a simple table. The problem is that the loop is puting the results outside the <table> and outside <tbody> and is creating a tbody in the top of everything. I know the current results are static its just for testing and i know JS is synchronous, so i cant understand whats the problem.
My code:
$('#' + id).append('' +
'<table class="documents_table">'+
'<tbody">'+
'<tr>'+
'<th>number</th>'+
'<th>Date</th>'+
'<th> Cód</th>'+
'<th> Terce</th>'+
'</tr>'
);
$.each(data.responseJSON, function (index, value) {
$('#' + id).append('' +
'<tr">'+
'<td>1</td>'+
'<td>12/98/2021</td>'+
'<td>1212</td>'+
'<td>test it</td>'+
'</tr>'
);
}).$('#' + id).append(''+
'</tbody>'+
'</table>'
);
how is the current output:
<tbody"></tbody">
<table class="documents_table">
<tbody>
<tr>
<th>number</th>
<th>Date</th>
<th> Cód</th>
<th> Terce</th>
</tr>
</tbody>
</table>
<tr>
<td>1</td>
<td>12/98/2021</td>
<td>1212</td>
<td>test it</td>
</tr>
<tr>
<td>1</td>
<td>12/98/2021</td>
<td>1212</td>
<td>test it</td>
</tr>
<tr>
<td>1</td>
<td>12/98/2021</td>
<td>1212</td>
<td>test it</td>
</tr>
.........
What's happening is jquery is "being helpful"(tm).
When you append <table> it "helpfully" closes the tag for you, so actually outputs <table></table>.
Build your entire table with a single string then have a single .append at the end
var html =
'<table class="documents_table">'+
'<tbody">'+
'<tr>'+
'<th>number</th>'+
'<th>Date</th>'+
'<th> Cód</th>'+
'<th> Terce</th>'+
'</tr>';
$.each(data.responseJSON, function (index, value) {
html +=
'<tr>'+
'<td>1</td>'+
'<td>12/98/2021</td>'+
'<td>1212</td>'+
'<td>test it</td>'+
'</tr>';
}).
html +=
'</tbody>'+
'</table>';
$('#' + id).append(html);
First, I want to delete all the columns and then use the select command to bring all the columns back for perform the refresh operation on the DataTable without refreshing page. So I need a piece of code that I can delete all the columns.
I shared my html and javascript code as shown following.
Can someone help me about this regard?
//CSHTML
<table id="datatables" class="table table-striped table-no-bordered table-bigboy" cellspacing="0" style="width:100%;">
<thead>
<tr>
<th class="disabled-sorting">Room Plan</th>
<th>Name</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Room Plan</th>
<th>Name</th>
<th class="text-right">Actions</th>
</tr>
</tfoot>
<tbody id="colmn">
#* *#
</tbody>
</table>
//*********************************JS*********************************//
//-------------------------SELECT ROOM START----------------------------
$.post("/Home/selectRooms", {}, function (data) {
var ndx = 0;
$.each(data.xroom_name, function (key, value) {
var Xroom_name = data.xroom_name[ndx];
var Xroom_plan = data.xroom_plan[ndx];
var column =
('<tr>' +
'<td>' +
'<div class="img-container">' +
'<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
'</div>' +
'</td>' +
'<td id="imgname">' + Xroom_name + '</td>' +
'<td class="text-right">' +
'<i class="fa fa-edit"></i>' +
'</i>' +
'</td>' +
'</tr>');
document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;
ndx++;
});
});
I also delete the column information that I clicked like this:
var table = $('#datatables').DataTable();
table.on('click', '.remove', function (e) {
$tr = $(this).closest('tr');
table.row($tr).remove().draw();
e.preventDefault();
});
I want to delete all columns because of I can refresh the table immediately after adding, updating and deleting. I do not want to delete the column that I clicked only.
I am trying to bind column dynamically in a table using jQuery .but click event is not working while trying to click 'btnASizeR' and 'btnWdDelete' button event is not working .Any idea would be appreciated.
$(function() {
var i = 0;
$('#btnASizeR').click(function() {
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var i = $("#WireDimTbl tbody>tr").length + 1;
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' name='SizeMin' value='2.00' />";
var sizerangeMax = "<input type='text' ID='SizeMax" + i + "' name='SizeMax' value='3.00' />";
var ToleranceMin = "<input type='text' ID='TolMin" + i + "' name='TolMin' value='1' />";
var ToleranceMax = "<input type='text' ID='TolMax" + i + "' name='TolMax' value='1' />";
var markup = "<tr><td>" + sizerangeMin + "</td><td>" + sizerangeMax + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
$("#WireDimTbl tbody").append(markup);
});
$('#btnWdDelete').click(function() {
$("#WireDimTbl tbody>tr:last").remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class='text-left'><strong>Wire Dimensions</strong></td>
</tr>
<tr>
<td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>
<td>
<input type="button" id="btnASizeR" value="AddSizeRange" />
<input type="button" id="btnWdDelete" value="Delete" />
<table id="WireDimTbl" class="table table-bordered">
<thead>
<tr>
<th class="text-center">Size Range Min (mm)</th>
<th class="text-center">Size Range Max (mm)</th>
<th class="text-center">Tolerance (-)mm</th>
<th class="text-center">Tolerance (+) mm</th>
</tr>
</thead>
<tbody></tbody>
</table>
</td>
</tr>
You mentioned that you are loading the table dynamically. Do you mean that when the page first loads the table is missing and its added later?
If that is the case, are you sure the code is called that binds the click events? The above example binds the events on page_load however, if the buttons are not yet available on the page it won't be able to bind it. JQuery will not automatically bind future elements.
Try settings a console.log($('#btnASizeR')); before binding the click event to make sure that JQuery can actually find the button.
I have a table that is generated with data from a .js file. What I want to do is be able to format rows ex. give them different color. I know you can add a class like <tr class="yellowrow"></tr> but the way the code is I can't do it like that. I'm thinking a for loop might do.. any ideas?
<table id="data">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<script type="text/javascript" src="js/people.js"></script>//file with information
<script type="text/javascript" >
for(var i=0; i<Name.length;i++){
document.write('<tr><td>' + date[i] + '</td><td>' + amount[i] + '</td><td>'
+Name[i]'</td></tr>');//this brings in the data to generate the rows
}
</script>
</tbody>
//so this gives me a table with a couple of rows... how can i format each row they
need to have different classes because they cant all have the same format.like one
can be blue, another red, another blue..ect.
Short answer: You can use CSS to style the different rows.
tr:nth-child(2n){
background-color: #ccc;
}
tr:nth-child(3n){
background-color: #444;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Long, mostly unrelated answer: You shouldn't be using document.write. You can add to the tbody a lot more elegantly like this.
<table id="data">
...
<tbody></tbody>
</table>
<script>
var rows = [];
for (var i=0; i<Name.length; i++){
rows.push(
'<tr>' +
'<td>' + date[i] + '</td>' +
'<td>' + amount[i] + '</td>' +
'<td>' + Name[i] + '</td>' +
'</tr>'
);
}
document.querySelector('#data tbody').innerHTML = rows.join('');
</script>
Why is document.write considered a "bad practice"?
if your just looking to alternate the colors you could just use a css selector like:
tr:nth-child(odd)
http://www.w3.org/Style/Examples/007/evenodd.en.html