DataTables - Last column fixed width - javascript

The idea is this :
I have one jQuery that loads the DataTables, and I know that I can set the "aoColumns" : "sWidth" parameter to make one column fixed width and it's working.
The problem that I have is that I have a lot of tables, variable numbers of columns, and I need the LAST one to be fixed size, no matter what number that column is. Sometimes can be 3rd, sometimes can be 8th, sometimes can be 16th, does not matter.
Is even possible ?
No, I don't want to call datatable jQuery for each table, no I don't want to modify anything in the structure because it's working very well right now, just maybe add some class or parameters to the Javascript.

Structure your tables like this:
<table class="tableClass">
<colgroup>
<col></col>
<col></col>
<col></col>
</colgroup>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
That way, your jQuery will just need to do this:
$('.tableClass').each(function() {
var self = this;
$(self).find('col:last').css('background-color', 'red');
});
That jQuery will find the last column in each table with that class, and do whatever you want with that last class on each one. (I just used the background-color to test it out.)
If all you're doing is just setting the width, you might be able to get away with doing $(self).find('th:last'), but the <colgroup> and <col> is the "correct" way to go.

Related

Issue with X-editable when used with Footable compact view

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();

JQuery Table Sort issue - Skipping column disables first mouse click

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>

Adding Column to jQuery Datatables

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.

MVC 3 Returning multiple Flot graphs

Thanks for reading. As I am ramping up to MVC, I am also getting more exposure to a lot of Javascript (which I am very weak in).
I have view that renders a list of data like below
<table>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
<th>chart</th>
</tr>
foreach(var item in Model)
{
<tr>
<td>#item.data1</td>
<td>#item.data2</td>
<td>#item.data3</td>
<td>#item.data4</td>
<td><div id="graphname"></div> </td>
</tr>
}
</table>
By following the example from here http://blog.simontimms.com/2009/06/bar-graphs-using-flot-and-aspnet-mvc.html, I can get the proper data. How can I use what I have learned from that link, and also be able to create/return multiple graphs
<div id="graphname"></div>
since it is referrenced by the id? Or is there better way to do this completely?
You will need to set a unique ID for each div.
You can do this in a few different ways. Cleanest would be to tie it to your data somehow, eg if each item's item.data1 is a unique value (like a primary key) you could do the following
<div id="#("graphname_" + item.data1>"
Or you could add an index inside the foreach and refer to that
int i = 0;
foreach(var item in Model)
{
<tr>
<td>#item.data1</td>
<td>#item.data2</td>
<td>#item.data3</td>
<td>#item.data4</td>
<td><div id="#(graphname + i)"></div> </td>
</tr>
++i;
}
From there it's just a matter of calling $.plot for each graph, referencing the required data and the correct div

XHTML/CSS/Javascript way to make a TABLE COLUMN selectable?

I am using a simple TABLE to display tabular data where the rows need to line up but when it comes to selecting the table contents, I only want users to be able to select within each column. Default browser behaviour is to select as rows across all columns but we NEED somehow allow selection only within columns.
I was hoping there was a fancy new CSS or XHTML 1.0 way to define tables as columns instead of rows and browsers would then force selection within them. I know realize this probably isn't possible and will need to build a javascript selection way to override browser selection. Obviously javascript spreadsheet widgets like Google Spreadsheets allow selection within rows and columns as I require but I am hoping to find a grid-type widget built on Prototype or write my own functionality.
Any tips or links to widgets with this column selection builtin? Is there an HTML/CSS trick to make something like this work?
I'm not sure what you mean, but it seems like you want to be able to color a single column differently than other columns. The simplest way would be to use the colgroup and col tags:
css
.name {width:5em;background:#ccc;}
.value {width:3em;text-align:center;color:#f00;}
.comment {text-align:right;}
HTML
<table>
<caption>My Test Table</caption>
<col class="name">
<colgroup class="value" span="3"></colgroup>
<col class="comment">
</colgroup>
<tr>
<th>Name</th>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
<th>Comment</th>
</tr>
<tr>
<td>Bob</td>
<td>Yes</td>
<td>No</td>
<td>42</td>
<td>I like cheese</td>
</tr>
<tr>
<td>Susan</td>
<td>No</td>
<td>Yes</td>
<td>42</td>
<td>Sharp Cheddar</td>
</tr>
</table>
Code stolen from http://www.webmasterworld.com/forum83/6826.htm
There are only a subset of CSS properties that can be set on columns. W3C has a list of those.
If you want only to highlight a column when user clicks on the table, you can easily do that using jquery
$("table td").bind('click',function(){
$("table td").css('background','');
$(this).css('background','green');
});
Use the colgroup tag - http://www.w3schools.com/tags/tag_colgroup.asp
You can apply any style you want to the entire column. Changing the style when the mouse moves / clicks in the column can be accomplished in jquery... you could use the scripts from the other answers here, but replace the "table td" selector with "table colgroup".

Categories

Resources