I'm trying to use DataTables.js on a few pages and I need to make them responsive. Multiple tables on a few different pages work great, but on one page the columns and width always end up sticking out of the container.
When I reduce the screen, the last column (action column) gets hidden, but when I reduce the screen further, it just stays that way and the table stretches out the container despite the width and maxwidth css properties.
<table id="mytable" class="table table-striped no-footer dt-responsive" data-order='[[ 4, "asc" ]]'>
<thead>
<tr role="row">
<th>One</th>
<th>Two</th>
<th>Threee</th>
<th>Four</th>
<th>Five</th>
<th data-orderable="false"> </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="img-thumbnail" src="(picture_url)" alt="" />
<span>Some Small text</span>
</td>
<td>
Value
</td>
<td>Value</td>
<td><i class="fa fa-circle"></i> Value</td>
<td data-sort="(sort value)"><span class="label label-info">Value</span></td>
<td>
<a href="(action_url)" title="Title" type="button"
class="btn btn-xs btn-success"><span><i class="fa fa-view"></i> Details</span></a>
</td>
</tr>
</tbody>
</table>
This is the initialisation js code:
var table = $('#mytable').DataTable({
"lengthMenu": [ 10, 25, 50, 75, 100 ],
"language": {
"emptyTable": "No information is available at this time."
}
});
I use this on a window resize (debounce):
table.responsive.recalc();
table.columns.adjust().draw();
Related
I'm trying to make a live NBA scores website using HTML, CSS, and JS.
I'm having trouble adding a inner tr under the game scores.
Here's what my table currently looks like:
Here's my current code JS and HTML:
(My current JS is building up the table and using innerHTML to modify the table under the tableData id)
else{
data += `<tr>
<td class = "left">${item.team1} <img src=${item.team1Img}></td>
<td> ${item.score1} </td>
<td> ${item.score2} </td>
<td class="right"><img src=${item.team2Img}> ${item.team2}</td>
</tr>
<tr>
<td colspan="2">${period}QR</td>
</tr>`;
}
<table>
<thead>
<tr>
<th style="width:40%; text-align:right;">Home</th>
<th style="width:10%;" colspan="2">Scores</th>
<th style="width:40%; text-align: left">Away</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
Here's what I want it to look like (although centered better) and the code I used to build the example:
<table>
<thead>
<tr>
<th width= 40% text-align= right;>Home</th>
<th width= 20%; colspan= "2">Scores</th>
<th width= 40%; text-align= left;>Away</th>
</tr>
</thead>
<tbody id="tableData">
<tr>
<td rowspan="2">Celtics<img src=${item.team1Img}></td>
<td>50</td>
<td>65</td>
<td rowspan="2"><img src=${item.team2Img}>Washington Wizards</td>
</tr>
<tr>
<td colspan="2">3QR</td>
</tr>
</tbody>
</table>
Basically, I'd like the "4QR" to be directly under the scores and still on the same row as the team names.
Thanks in advance!
In your javascript template literal, you forgot to put the rowspan="2" and it's caused everything to shift over.
data += `<tr>
<td class = "left" rowspan="2">${item.team1} <img src=${item.team1Img}></td>
<td> ${item.score1} </td>
<td> ${item.score2} </td>
<td class="right" rowspan="2"><img src=${item.team2Img}> ${item.team2}</td>
</tr>
<tr>
<td colspan="2">${period}QR</td>
</tr>`;
You'll notice your table as constructed is missing 2 cells. Once you "add" those two cells in with the "rowspan", it will all fit back into place.
I have a page coded in Handlebars and I am fetching the data as json from nodejs. I am trying to render a button which is a third party button. When I don't use DataTables() then the buttons are correctly render and clicking them opens a third party login window for further processing.
However, when I enable DataTables, only the first page is correctly rendered and the buttons work, but it does not work for other pages when the number of elements exceed 10. I am not sure if this is an issue with DataTables or how the third party button is expected to behave, but I am suspecting that when I switch pages in DataTables, the parameters the button expects while rendering are not correctly sent. I am new to DataTables.
<body>
<div class="container">
<div class="jumbotron">
<h1>Last 100 NSE Annoucements</h1>
<h3>Top Annoucements by corporates listed on NSE</h3>
</div>
</div>
<div class="container">
<table class="table table-hover table-responsive table-sm" id="resultTable"">
<thead>
<tr>
<th class="col-sm-1" scope="row">Ticker</th>
<th class="col-sm-1" scope="row">Link</th>
<th class="col-sm-2" scope="row">Date</th>
<th class="col-sm-5" scope="row">Description</th>
<th class="col-sm-1" scope="row">Trade</th>
</tr>
</thead>
<tbody>
{{#each feedList}}
<tr>
<td> {{this.ticker}} </td>
<td> {{this.ticker}} </td>
<td> {{moment date=this.dateAdded format="DD-MM-YYYY h:mm:ss a"}} </td>
<td> {{this.purposeText}} </br> {{this.summaryText}} </td>
<td> <span> <kite-button href="#" data-kite="secret_key"
data-exchange="NSE"
data-tradingsymbol="{{this.ticker}}"
data-transaction_type="BUY"
data-quantity="1"
data-order_type="MARKET">Buy {{this.ticker}} stock</kite-button> </span></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</body>
<script>
$(document).ready(function() {
$('#resultTable').DataTable({
"order": [[ 2, "desc" ]],
"columnDefs" : [{"targets":2, "type":"date"}]
});
});</script>
</html>
How to modify this - most probably custom rendering of the button as each row is displayed?
EDIT
I am trying to modify the DataTable by custom rendering the button each time - but its not working.
<body>
<div class="container">
<div class="jumbotron">
<h1>Last 100 NSE Annoucements</h1>
<h3>Top Annoucements by corporates listed on NSE</h3>
</div>
</div>
<div class="container">
<table class="table table-hover table-responsive table-sm" id="resultTable"">
<thead>
<tr>
<th class="col-sm-1" scope="row">Ticker</th>
<th class="col-sm-1" scope="row">Link</th>
<th class="col-sm-2" scope="row">Date</th>
<th class="col-sm-5" scope="row">Description</th>
<th class="col-sm-1" scope="row">Trade</th>
</tr>
</thead>
<tbody>
{{#each feedList}}
<tr>
<td> {{this.ticker}} </td>
<td> {{this.ticker}} </td>
<td> {{moment date=this.dateAdded format="DD-MM-YYYY h:mm:ss a"}} </td>
<td> {{this.purposeText}} </br> {{this.summaryText}} </td>
<td> {{this.ticker}} </td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</body>
<script>
$(document).ready(function() {
$('#resultTable').DataTable({
"order": [[ 2, "desc" ]],
"columnDefs" : [{"targets":2, "type":"date"},
{
targets: -1,
searchable: false,
orderable: false,
render: function(data, type, full, meta){
if(type === 'display'){
data = '<kite-button href="#" data-kite="scret" data-exchange="NSE" data-tradingsymbol=' + data + 'data-quantity="1" data-order_type="MARKET">Buy '+ data + 'stock</kite-button>';
}
return data;
}
]
});
});</script>
</html>
I have a table where the data is fetched using ajax. I'm trying to have a table where each row has an associated hidden row and clicking on the row toggles the display of the hidden row. The hidden row contains an accordion.
The problem is that the accordion is getting all messed up and shows at the bottom of the table, rather than showing below the particular row that it was clicked on.
My code is as follows:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th v-for="column in columns">
<span v-if="column == 'Predictive Price'">
{{column}}
<i class="fa fa-info-circle" v-tooltip="msg"></i>
</span>
<span v-else-if="column == 'Actual Price'">
{{column}}
<i class="fa fa-info-circle" v-tooltip="tooltip.actual_price"></i>
</span>
<span v-else>
{{column}}
</span>
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="row in model" #click="showRow">
<td>
{{row.id}}
</td>
<td>
{{row.company_customer.customer_name}}
</td>
<td>
<i class="fa fa-map-marker"></i>
<small>
{{row.pickup_addr.address_1}}, {{row.pickup_addr.city}}, {{row.pickup_addr.postcode}}
</small>
</td>
<td>
<i class="fa fa-map-marker"></i>
<small>
{{row.pickup_addr.address_1}}, {{row.pickup_addr.city}}, {{row.pickup_addr.postcode}}
</small>
</td>
<td>
£{{row.predictive_price}}
</td>
<td>
£{{row.actual_price}}
</td>
<td>
n/a
</td>
<tr>
<td colspan="7" v-if="contentVisible">
<div class="accordian-body">
ACCORDION
</div>
</td>
</tr>
</tr>
</tbody>
</table>
<script>
export default {
methods: {
data() {
return {
msg: 'This is just an estimation!',
tooltip: {
actual_price: 'Click on the price to edit it.'
},
contentVisible: false,
}
},
rowRow() {
this.contentVisible = !this.contentVisible;
}
}
}
</script>
Where can I place the accordion div in order for it to display correctly?
EDIT:
Please see fiddle: https://jsfiddle.net/49gptnad/355/
It sounds like you want an accordion associated with every row, so really, you want two rows for each item of your data.
You can accomplish that by moving your v-for to a template tag that wraps both of your rows.
Additionally, you need to control whether content is visible on a row by row basis, so add a contentVisible property to each data item and use it to control whether your second row is visible or not.
console.clear()
var vm = new Vue({
el: '#vue-instance',
data: {
testing: [{
id: 1,
name: "Customer 1",
contentVisible: false
},
{
id: 2,
name: "Customer 1",
contentVisible: false
},
{
id: 3,
name: "Customer 3",
contentVisible: false
},
],
columns: ["id", "name"]
},
mounted() {
console.log(this.testing);
},
methods: {
showRow(data) {
this.contentVisible = !this.contentVisible;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="vue-instance">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th v-for="column in columns">
{{column}}
</th>
</tr>
</thead>
<tbody>
<template v-for="row in testing">
<tr #click="row.contentVisible = !row.contentVisible">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
</tr>
<tr v-if="row.contentVisible">
<td :colspan="columns.length" >
<div class="accordian-body">
afasfafs
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
Here is your updated fiddle.
As the title says, my markup is rearranging itself. I have absolutely no idea how that works.
The accordion moves itself outside of the table, if you right click and inspect the table the markup shows it's actually moved.
I understand that this would make for some weird looking results, but it's a start to figuring out how to have accordion tables. I'm aiming to have a table row clickable and the accordion rolls out under it.
JSFiddle: https://jsfiddle.net/f6dn4pec/2/
$('.ui.accordion')
.accordion();
<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div>
<table class="ui single line table">
<thead>
<tr>
<th>Name</th>
<th>Registration Date</th>
<th>E-mail address</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22#yahoo.com</td>
<td>No</td>
</tr>
<tr id="test">
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton#yahoo.com</td>
<td>Stuff</td>
</tr>
<tr>
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> What is a dog?
</div>
<div class="content">
<p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
</div>
</tr>
<tr>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22#yahoo.com</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
<div> is not a valid child of <tr>.
When browsers run into invalid markup they kick it out of current part of the dom tree...with unpredictable results.
Final answer...use valid html
Reference MDN - <tr> Usage Context
The accordion div needs to be in a <td> tag. The <td> tag is the actual table cell.
This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 8 years ago.
Here is the JSFiddle http://jsfiddle.net/swordf1zh/BcHuS/13/ and the sample code is below:
HTML
<h1>Invoice</h1>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed table-hover">
<thead>
<tr>
<td><strong>Product</strong></td>
<td class="text-center">
<strong>Price</strong>
</td>
<td></td>
</tr>
</thead>
<tbody id="tabla-detalle">
<tr class="detalle">
<td>Samsung Galaxy S5</td>
<td class="text-center item-reg">900</td>
<td><button type="button" class="close borrar-item" aria-hidden="true">×</button></td>
</tr>
<tr class="detalle">
<td>Samsung Galaxy S5 Extra Battery</td>
<td class="text-center item-reg">250</td>
<td><button type="button" class="close borrar-item" aria-hidden="true">×</button></td>
</tr>
<tr class="detalle">
<td>Screen protector</td>
<td class="text-center item-reg">300</td>
<td><button type="button" class="close borrar-item" aria-hidden="true">×</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<h1>Available products</h1>
<table class="table" id="search-items-table">
<thead>
<tr>
<th>Product</th>
<th class="text-center">Price</th>
</tr>
</thead>
<tbody>
<tr class="list-item">
<td class="list-item-name">iPhoneX</td>
<td class="text-center list-item-reg">1000</td>
</tr>
<tr class="list-item">
<td class="list-item-name">Tablet</td>
<td class="text-center list-item-reg">350</td>
</tr>
<tr class="list-item">
<td class="list-item-name">Item x</td>
<td class="text-center list-item-reg">300</td>
</tr>
<tr class="list-item">
<td class="list-item-name">Item y</td>
<td class="text-center list-item-reg">450</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" id="btn-add-items">Add selected products to invoice</button>
JS
// Delete items from invoice when click on button x
$('.borrar-item').click(function() {
$(this).closest('tr.detalle').remove();
});
// Select items from 'available products' list
$('.list-item').click(function(){
$(this).toggleClass('success select2add');
});
// Add selected items from 'available products' to 'INVOICE'
$('#btn-add-items').click(function() {
$('.select2add').each(function() {
var name = $(this).children('td.list-item-name').text();
var price = $(this).children('td.list-item-reg').text();
$('#tabla-detalle').append('<tr class="detalle"><td>' +name+'</td><td class="text-center item-reg">'+price+'<td><button type="button" class="close borrar-item" aria-hidden="true">×</button></td></tr>');
});
});
Below in the JSFiddle is a list items that can be added to the invoice on top, but in newly added items the 'x' button to remove the line is not working (the initial items in the invoice CAN be removed when pressing on the 'x' button to the right).
This is my first project using jQuery and Javascript and I have been researching for the last 3 hours trying to solve this issue without positive results, so I would like to see a little explanation of why my code is not working.
Thanks in advance for your help!
Because events are not magically added to new elements. Use event delegation.
$("#tabla-detalle").on("click", '.borrar-item', function() {
$(this).closest('tr.detalle').remove();
});