I hope that somebody can help. I've got an issue whereby I've got an x-editable link on a footable which works when used on a desktop browser, but not on a mobile device. This can be replicated by simply reducing the width of the browser, as footable hides columns and gives the option to expand downwards to see the hidden columns.
I have created a JSFiddle here: fiddle
Specifically the issue is that even though the link is present in the expanded compact view, no amount of clicking will render the x-editable input for the link. Oddly when I have encountered this issue on my own server, when you go back into full width browsing there are multiple instances of the x-editable input box visible, but I can't replicate this behaviour in the fiddle.
Let me know if you need any clarification!
Thanks in advance.
This is the code:
<table class="footable table">
<thead>
<tr>
<th data-class="expand">
Col1
</th>
<th>
Col2
</th>
<th data-hide="phone,tablet">
Col3
</th>
<th data-hide="phone,tablet">
Col4
</th>
<th data-hide="all" data-ignore="true">
Id
</th>
</tr>
</thead>
<tbody>
<tr class="fooNewRecord">
<td>12345</td>
<td>done</td>
<td>23</td>
<td>20</td>
<td>1</td>
</tr>
</tbody>
</table>
And
$(function () {
$('.footable').footable();
});
$.fn.editable.defaults.mode = 'inline';
$('.myeditable').editable();
$('table').footable();
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 created a basic table in js fiddle. I am using the datatable sorter function, however if you click along the headers, or click a header, skip one and click another, it seems to ignore the first mouse-click. (To replicate the issue click on Confirmation Period, then ABN, then back to Confirmation Period)
Any thoughts?
<table id="tableSort" class="tableSort" cellspacing="0" style="margin-top:20px;margin-left:10px;">
<thead>
<tr>
<th>Confirmation Period</th>
<th>Legal/Entity Name</th>
<th>ABN</th>
<th>Business/Trading Name</th>
<th>Status</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>a</td>
<td>34</td>
<td>78</td>
<td>b</td>
</tr>
<tr>
<td>2</td>
<td>c</td>
<td>100</td>
<td>90</td>
<td>g</td>
</tr>
and the JS...
$(document).ready(function () {
$('#tableSort').dataTable({
"searching": false,
"paging": false,
"info": false
});
});
jsfiddle: http://jsfiddle.net/wcdg3ddL/
The table is actually sorting as expected. There are two reasons why it looks like the columns aren't sorting:
You have insufficient rows in your table to assess whether or not sorting is working. Add few more rows of data and you should see what I mean.
Because you've removed the arrows from the header row with your custom styling you cannot accurately gauge how the sorting is behaving. If you add in the default CSS styling you can see the direction in which a column is being sorted.
Here is a fiddle where I have added sufficient rows so that the columns appear to be sorting correctly.
I just added more rows to your fiddle:
<tr>
<td>1</td>
<td>a</td>
<td>34</td>
<td>78</td>
<td>b</td>
</tr>
I want to add a column to a jQuery Datatable. It will be used to contain a delete button for each row, like I have for another table. The button picture and class are specific in the php file that retrieves the table data from a database.
Simply adding a column to the html as the following breaks the javascript on the page:
<th>New Column</th>
I do not see anything in the aoColumnDefs settings that does anything to the added column. What code and where do I need to add or edit to accommodate the new column?
I am not the original developer behind the existing tables.
You can add one or more th from here like Revenue2
<table class="mws-table">
<thead>
<tr>
<th>Date</th>
<th>Transaction ID</th>
<th>Segment</th>
<th>Revenue</th>
</tr>
</thead>
<tbody id="transactions">
<tr>
<td class="trDate"></td>
<td class="transactionId"></td>
<td class="segment"></td>
<td class="revenue"></td>
</tr>
</tbody>
<tfoot>
<tr class="customFooterRow">
<th>Total</th>
<th></th>
<th></th>
<th align ="left" class="revenueTotal"></th>
</tr>
</tfoot>
</table>
You might have forgotten to add the column for the body as well and in cases where you have a "tfoot" you will need to add another column to it as well.
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';
I am building an editable table in jquery for fun.
Here is my table:
<table id="horiz-min" summary="Indices">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Description</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr onclick="show();" id="IDOL-FT">
<td class="editable" id="edit">Edit</td>
<td class="edit-field">454</td>
<td class="edit-field">TEXTTEXTTEXTTEXT</td>
<td class="editable">Details</td>
<td class="editable">Feeds</td>
<td class="editable">Fields</td>
</tr>
</tbody>
</table>
The first thing i would like to do is to make the ID and Descriptions editable by clicking on edit.
So in JQUERY, i am trying to do this to replace, these td's content with the content that is currently inside of them, in an editable text box.
Fixed: but what i have gives a console error of "$ is not defined"
jquery:
$('td.edit-field').replaceWith('<textbox></textbox>');
The "$ is not defined" sounds like you're not properly including jQuery in your HTML file. Make sure the following appears in the head section of your HTML file (adjust the version as appropriate)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Additionally since you're using jQuery you should avoid the use of assigning handlers directly in your HTML and instead should use jQuery hookup. For example
$(document).ready(function() {
$('#IDOL-FT').click(function() {
show();
});
});
use the contenteditable attribute
<td class="editable" id="edit" contenteditable="true">Edit</td>
$('#edit').click(function() {
$('.editable').attr("contenteditable", "true");
})
Example