I have problem with DataTables working alongside Nette.
My JavaScript code:
$(document).ready(function(){
$('.table').DataTables();
});
HTML Nette:
{snippet customers}
<table class="table table-hover" id="userTable">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th>Type</th>
</tr>
</thead>
<tbody>
{foreach $customers as $customer}
<tr>
<td>
<a href="{$presenter->link(':Customers:show', array('id' => $customer->id))}" target="_blank">
{$customer->name}
</a>
</td>
<td>{$customer->country}</td>
<td>{$customer->type}</td>
</tr>
{/foreach}
</tbody>
</table>
{/snippet}
It normally works, but when the Nette snippet is refreshed, DataTables elements (pages, order, etc.) are removed. If the page is refreshed, these elements return.
I am using Nette Framework 2.3 and Doctrine 2.
The DataTable is created from the HTML on the $(document).ready() event, which happens when the page is loaded. If you refresh the snippet without refreshing the webpage, the DataTable is lost, and it doesn't get re-created since that event hasn't been triggered again. What you need to do is add a new $('.table').DataTables(); call at the end of the code that handles the refresh of the snippet (I'm not familiar with nette so I'm not sure exactly where that would occur).
Related
I'm a novice programmer with a basic grasp of JS and JQuery. I am using Fancybox to pull an HTML Table via Ajax and show it to users of our system.
HTML (within Fancybox):
<table>
<thead>
<tr>
<th class="priority-2 sortable date" style="min-width:150px">Date / Time</th>
<th class="priority-2 sortable text" style="min-width:150px">Changed By</th>
<th class="priority-1 sortable text" style="min-width:150px">Previous Value</th>
<th class="priority-1 sortable text" style="min-width:150px">New Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="priority-2">15/12/2021 11:23</td>
<td class="priority-2">John Smith</td>
<td class="priority-1">Stalled</td>
<td class="priority-1">Test</td>
</tr>
<tr>
<td class="priority-2">14/12/2021 16:58</td>
<td class="priority-2">David Jones</td>
<td class="priority-1">Live</td>
<td class="priority-1">Stalled</td>
</tr>
</tbody>
</table>
I have some Javascript that I use elsewhere to sort tables when the is clicked which works OK. I know that to get this to work on Ajax content I have to change the .click() to use .on() but with my my limited knowledge I cannot get the syntax to work correctly.
JS (in seperate .js file):
Original Code:
$('thead th.sortable').each(function(index, listItem) {
$(this).click(function(e){
e.preventDefault();
// sort column code here
});
});
My attempt at amending the code:
$('thead th.sortable').each(function(index, listItem) {
$(this).on('click', function(e) {
e.preventDefault();
// sort column code here
});
});
I have tried using $(document).(this) etc. but to no avail. The above works in the main HTML but not in the Fancybox window.
I use the following JS Code to show/hide sections which I've successfully adapted to work in the Fancybox window:
$(document).on('click', '.header-row', function(e) {
// Toggle Section code here
});
Any help with the syntax I need is appreciated. Apologies in advance for the poor coding knowledge.
I have a table within my Spring MVC web application that uses JSP to serve up the data, the table is a dynamically loaded list of jobs to be worked on, what I am trying to do is when the table row is selected change the color of the Row to red and hide all other rows in the table.
The rows are getting highlighted but when I try to hide the rows I have no success, any ideas or help is much appreciated , please she what I have tried below with table structure. Thank You
What happens when table data link is pressed is a form is opened with table data passed to form
Table:
<table class="table table-hover" id="no-more-tables" style="margin-bottom: 0px;">
<thead>
<tr>
<th>Service Id</th>
<th>Vehicle</th>
<th>Due date</th>
<th>ServiceType</th>
<th>Last update</th>
<th>Frequency</th>
<th>Start</th>
</tr>
</thead>
<tbody style="margin-bottom: 0px;">
<tr id="table_row_id2" class="">
<td data-title="Service Id">2</td>
<td data-title="Vehicle">vehicle two</td>
<td data-title="Due date">2018-02-14</td>
<td data-title="ServiceType">Preventive Maintenance</td>
<td data-title="Last update">2018-02-14</td>
<td data-title="Frequency">Every 3 months, from finish date.</td>
<td data-title="Start"><a href='/inspections/?service_id=2' id="startLink">
<span class="glyphicon glyphicon-plus-sign"></span>
</a> </td>
</tr>
<tbody style="margin-bottom: 0px;">
<tr id="table_row_id3" class="">
<td data-title="Service Id">3</td>
<td data-title="Vehicle">VAN1</td>
<td data-title="Due date">2018-02-20</td>
<td data-title="ServiceType">Preventive Maintenance</td>
<td data-title="Last update">2018-02-20</td>
<td data-title="Frequency">Every 3 months, from finish date.</td>
<td data-title="Start"><a href='/inspections/?service_id=3' id="startLink">
<span class="glyphicon glyphicon-plus-sign"></span>
</a> </td>
</tr>
</tbody>
</table>
Jquery code:
$(document).ready(function() {
$(window).on('load',function(){
var service_id = $('#service_id').val();
if(service_id){
$('#serviceRow').toggle();
$('#table_row_id'+service_id).addClass('danger');
$('#table_row_id'+service_id).siblings().hide();
}
});
});
Other way I approached:
$(document).ready(function(){
$(window).on('load',function(){
$( "table tbody tr" ).siblings( ".danger" ).hide();
});
});
I have researched solutions on SO and on-line with no joy including this one:
How to hide all tr from table except clicked one
Please if you decide to down-vote my question please provide a reason as to why and we can try rectify the issue, thanks for your time, let me know if need anything else. Jason
There are a few issues with your code.
1. You are not attaching click event handler for the table row. You are writing the logic inside window onload event which won't trigger when you click on a row.
2. You do not have any element with id service_id. I assume you are trying to get the content of the cell with data-title="Service Id"
3. val() is used to get the value of input, select or textarea elements. To get content of cell, you need to use text() or .html(). See jquery documentation to understand the difference.
4. You have wrapped each row in a tbody tag. As such, calling sibling() on the row elements will return empty collection.
Here is the working plunker: https://plnkr.co/edit/O33Xnwvg3yslLkG3DeHT?p=info
I am running into an interesting issue where my Dust.js template is not honoring an exists conditional.
My data looks like this:
{"guaranteedHistory": [
{
"depositDate": "2017-08-31T00:00:00.000-0500",
"interestRate": 515.5,
"maturityDate": "2017-08-31T00:00:00.000-0500",
"beginningBalance": 874757257.4,
"deposits": 4.25,
"transferIn": 75.7,
"investmentReturn": 52.71,
"amtReinvested": 5.5,
"maturityWithdrawal": 6.66,
"surrenderCharge": 7.77,
"endingBalance": 8.88,
"surrenderValue": 5735.56
}
],
}
Template (Doesn't work):
{?guaranteedHistory}
<table id="a">
<thead>
<tr>
<th> </th>
<th>What happened this period</th>
<th></th>
</tr>
</thead>
</table>
{:else}
<table id="b">
<thead>
<tr>
<th>Deposits</th>
<th>Dividends</th>
<th>Investment return</th>
</tr>
</thead>
</table>
{/guaranteedHistory}
The issue is that no matter what happens, the template will only display everything in the else conditional UNLESS inside the exists I output a value inside guaranteedHistory...
Template (This works):
{?guaranteedHistory}
{guaranteedHistory[0].depositDate}
<table id="a">
<thead>
<tr>
<th> </th>
<th>What happened this period</th>
<th></th>
</tr>
</thead>
</table>
{:else}
<table id="b">
<thead>
<tr>
<th>Deposits</th>
<th>Dividends</th>
<th>Investment return</th>
</tr>
</thead>
</table>
{/guaranteedHistory}
I was not able to find any way to get around this. I also could not duplicate this issue within a dev mode on dustjs.com, it works correctly there. Could anyone please help or tell me what could possibly be going wrong based on the provided information?
There is no reason that this shouldn't work correctly as you've described it. In addition, the compiled body_0 you provided is definitely correct.
So, if this really is happening, the only possible reasons are:
You aren't rendering the template you think you are. This seems unlikely if you're compiling and rendering yourself.
The value of guaranteedHistory isn't what you think it is. Because you are testing your template on http://www.dustjs.com/test/test.html and it works properly there, this is my guess.
So, this suggests to me that you have a race condition, and that you're trying to render with guaranteedHistory before it has been set (via some callback, Promise, etc).
Dust 2.7.2 doesn't resolve Promises in exists blocks so this may be what you're hitting. You can use the trunk tip if you need to until 2.8 is released.
I have the following table on a laravel blade that uses x-editable to update some of its fields (note, this is my first ever PHP project so if there are better ways to do this, please share):
<table id="LinksTable" class="table table-bordered">
<thead>
<tr>
<th>Display</th>
<th>Link Display Name</th>
</tr>
</thead>
<tbody>
<?php $link_settings = Link_setting::whereNotNull('link_address')->get();?>
#foreach($link_settings as $link_setting)
<tr id="linkRow.{{$link_setting->id}}">
<td hidden="true">{{$link_setting->id}}</td>
<td><input id="linkD.{{$link_setting->id}}" name="is_displayed"
checked="{{$link_setting->is_displayed}}"
onChange="OnDisplayChange(this)" type="checkbox"></td>
<td><a href="#" class="listEdit" data-type="text"
data-column="display_name" data-url="./link_settings/update"
data-pk="{{$link_setting->id}}" data-title="change"
data-name="display_name">{{$link_setting->display_name}}</a>
</td>
</tr>
#endforeach
</tbody>
</table>
This renders fine the first time and I can edit the display name on any of the rows with it updating the database correctly.
My problem is that I have an "add" button that creates a new object in the database. After added, I need to reload the table to display this entry as well.
function RefreshTable() {
$('.listEdit').editable("destroy");
$( "#linksTableMainDiv" ).load(location.href + " #LinksTable");
$('.listEdit').editable();
}
The table re-renders fine, but the x-editable breaks, without errors that I can locate.
For anyone coming across this post, I ended up reworking this to add a row via javascript, rather than reloading the table. Adding $('.listEdit').editable(); after the table.appendChild(row) enables all the editable fields in the new row. Assigned data-pk=0 to each, and as part of the update controller, returned the id. I then update the row's data-pk elements upon success of the editable function.
I am using AngularJS. I would like to make a table to sort by the first column immediately after the webpage finish loading. The HTML table code looks like this;
<table class="table table-hover data-table sort display">
<thead>
<tr>
<th class="col_1">
Column 1
</th>
<th class="col_2">
Column 2
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">
<td>{{item.col_1}}</td>
<td>{{item.col_2}}</td>
</tr>
</tbody>
</table>
Now, the table simply loads the data without any particular sorting order as the webpage loads until I click on the column heading. If I want to set the default to be sorted by column 1 immediately after the webpage loads, how should the html code look like? Or do I have to modify the controller instead?
Thank you.
In your controller you can initialize the value of columnToOrder like this:
$scope.columnToOrder = 'col_1';