Motools HTMLTable Sort - Secondary sorting - mootools

I'm trying to sort a table which can have more than 2 columns (Datetime, Name, Email etc.)
I'm using mootools HTMLTable sort to sort the columns. But when I sort on Name, none of the other columns are sorted. How would it be possible to make a secondary sort column work ?
Example : (When I sort on the name column, the datetime column goes out of wack)
5/08/2014 09:51:18 AM | Adam | adam123#gmail.com
5/12/2014 03:51:28 PM | Adam | adam123#gmail.com
5/10/2014 04:51:38 AM | Adam | adam123#gmail.com
5/07/2014 04:23:21 AM | Adam | adam123#gmail.com
5/11/2014 06:51:48 PM | Dave | dave123#gmail.com
5/09/2014 10:51:58 AM | Dave | dave123#gmail.com
I tried doing a secondary sort with the datetime column but nothing happens.
HTML :
<table id="report_table">
<thead>
<tr>
<th>Date/time</th>
<th>Name</th>
<th>Email</th>
<tr>
</thead>
<tbody>
<tr>
<td>5/08/2014 09:51:18 AM</td>
<td>Adam</td>
<td>adam123#gmail.com</td>
</tr>
<tr>
<td>5/12/2014 03:51:28 PM</td>
<td>Adam</td>
<td>adam123#gmail.com</td>
</tr>
<tr>
<td>5/10/2014 04:51:38 AM</td>
<td>Adam</td>
<td>adam123#gmail.com</td>
</tr>
<tr>
<td>5/07/2014 04:23:21 AM</td>
<td>Adam</td>
<td>adam123#gmail.com</td>
</tr>
<tr>
<td>5/11/2014 06:51:48 PM</td>
<td>Dave</td>
<td>dave123#gmail.com</td>
</tr>
<tr>
<td>5/09/2014 10:51:58 AM</td>
<td>Dave</td>
<td>dave123#gmail.com</td>
</tr>
</tbody>
</table>
Javascript :
var sortableTable = new HtmlTable($('report_table'), {sortable: true, sortIndex : 1});
sortableTable.sort(0, false, false);
EDIT : Added HTML as well. If I just sort by the datetime column, it sorts fine, but it doesn't do well only if the secondary sort is on date/time.
Any help would really help.

Remove sortIndex option and use sort method to specify primary and secondary sort, as described in the documentation. Mootools will remember sort options for columns even after the user clicks on thead to resort the table.
var sortableTable = new HtmlTable( $('report_table'), { sortable: true } );
sortableTable.sort( 0, false, true );
sortableTable.sort( 1, false, false );

Related

Removing borders from a table in sphinx documentation

I have a table in in an rst file I am hosting on readthedocs that I would like to remove the borders from. Trouble is, nothing I try in the CSS file seems to work. I've looked at several other solutions SO and haven't yet had success.
Here is a (shortened) example of the table in rst (note i've split the columns in the last three rows to create a nesting effect, unsure if this could be causing any complications).
+------------------+-----------------------------+------------+-------------------------------------+
| Parameter | Description | Type | Notes |
+==================+=============================+============+=====================================+
| patrolID | ID of the submitted patrol. | int | Assigned automatically by the patrol|
| | | | app. |
+------------------+-----------------------------+------------+-------------------------------------+
| date | Date the patrol | string | Format is YYYY-MM-DD. |
| | occurred. | | |
+------------------+-----------------------------+------------+-------------------------------------+
| userID | The alias of the individual | string | Matches the user’s Vanguard email |
| | who submitted the patrol. | | alias (For example, MScott). |
+------------------+-----------------------------+------------+-------------------------------------+
| patrolStart | Time the patrol started. | int | Format is 24-hour (Ex: 0700 |
| | | | or 1400). |
+------------------+-----------------------------+------------+-------------------------------------+
| patrolEnd | Time the patrol ended. | int | Format is 24-hour (Ex: 0700 |
| | | | or 1400). |
+------------------+-----------------------------+------------+-------------------------------------+
|perimeterFence | Patrol area. | object | |
+----+-------------+-----------------------------+------------+-------------------------------------+
| |time | Time the area was patrolled.| int | Format is 24-hour (Ex: 0700 |
| | | | | or 1400). |
+----+-------------+-----------------------------+------------+-------------------------------------+
| |incident | Indicates whether anything | boolean | Default value is false. |
| | | unusual was encountered | | |
| | | during the patrol. | | |
+----+-------------+-----------------------------+------------+-------------------------------------+
| |details | Summary of area patrol. | string | When incident is false, the default |
| | | | | value will be "Nothing to report." |
+----+-------------+-----------------------------+------------+-------------------------------------+
Screenshot of how the table looks on readthedocs:
HTML code for the table (I'm unable to change class name or elements with RTD so WYSWG)
<div class="section" id="submit-a-patrol">
<h2><a class="toc-backref" href="#id1">Submit a patrol</a><a class="headerlink" href="#submit-a-patrol" title="Permalink to this headline">¶</a></h2>
<p>URL: POST <a class="reference external" href="https://api.vanguard.com/patrol">https://api.vanguard.com/patrol</a>/{PatrolID}</p>
<p>Adds a patrol report. A successful response requires all listed parameters be included with appropriate values.</p>
<table border="1" class="docutils">
<colgroup>
<col width="4%" />
<col width="14%" />
<col width="31%" />
<col width="13%" />
<col width="39%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head" colspan="2">Parameter</th>
<th class="head">Description</th>
<th class="head">Type</th>
<th class="head">Notes</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td colspan="2">patrolID</td>
<td>ID of the submitted patrol.</td>
<td>int</td>
<td>Assigned automatically by the patrol
app.</td>
</tr>
<tr class="row-odd"><td colspan="2">date</td>
<td>Date the patrol
occurred.</td>
<td>string</td>
<td>Format is YYYY-MM-DD.</td>
</tr>
<tr class="row-even"><td colspan="2">userID</td>
<td>The alias of the individual
who submitted the patrol.</td>
<td>string</td>
<td>Matches the user’s Vanguard email
alias (For example, MScott).</td>
</tr>
<tr class="row-odd"><td colspan="2">patrolStart</td>
<td>Time the patrol started.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-even"><td colspan="2">patrolEnd</td>
<td>Time the patrol ended.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td colspan="2">perimeterFence</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityExterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityInterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
</tbody>
</table>
<p><strong>Responses</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="21%" />
<col width="79%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Code</th>
<th class="head">Description</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>200</td>
<td>Successful operation.</td>
</tr>
</tbody>
</table>
Finally the CSS I currently have.
div.section table, td
{
white-space: normal !important;
}
div.section tbody, tr, td
{
border: none;
}
div.section thead, th
{
color: #FFFFFF;
background-color: #4472C4;
}
div.section tr.row-odd
{
background-color: #D9E2F3;
}
I've tried targeting table, tbody, .docutils, and other permutation and haven't been able to do anything to effect the border, though all the other CSS entries do what they're supposed to. Any ideas would be welcome.
I cannot replicate the issue in this JSFiddle.
I suspect you have not added your custom CSS file to conf.py.
conf.py
# These folders are copied to the documentation's HTML output
html_static_path = ['_static']
# These paths are either relative to html_static_path
# or fully qualified paths (eg. https://...)
html_css_files = [
'css/custom.css',
]
div.section table, td
{
white-space: normal !important;
}
div.section tbody, tr, td
{
// border: none;
}
div.section thead, th
{
color: #FFFFFF;
background-color: #4472C4;
}
div.section tr.row-odd
{
background-color: #D9E2F3;
}
<div class="section" id="submit-a-patrol">
<h2><a class="toc-backref" href="#id1">Submit a patrol</a><a class="headerlink" href="#submit-a-patrol" title="Permalink to this headline">¶</a></h2>
<p>URL: POST <a class="reference external" href="https://api.vanguard.com/patrol">https://api.vanguard.com/patrol</a>/{PatrolID}</p>
<p>Adds a patrol report. A successful response requires all listed parameters be included with appropriate values.</p>
<table border="1" class="docutils">
<colgroup>
<col width="4%" />
<col width="14%" />
<col width="31%" />
<col width="13%" />
<col width="39%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head" colspan="2">Parameter</th>
<th class="head">Description</th>
<th class="head">Type</th>
<th class="head">Notes</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td colspan="2">patrolID</td>
<td>ID of the submitted patrol.</td>
<td>int</td>
<td>Assigned automatically by the patrol
app.</td>
</tr>
<tr class="row-odd"><td colspan="2">date</td>
<td>Date the patrol
occurred.</td>
<td>string</td>
<td>Format is YYYY-MM-DD.</td>
</tr>
<tr class="row-even"><td colspan="2">userID</td>
<td>The alias of the individual
who submitted the patrol.</td>
<td>string</td>
<td>Matches the user’s Vanguard email
alias (For example, MScott).</td>
</tr>
<tr class="row-odd"><td colspan="2">patrolStart</td>
<td>Time the patrol started.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-even"><td colspan="2">patrolEnd</td>
<td>Time the patrol ended.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td colspan="2">perimeterFence</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityExterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
<tr class="row-odd"><td colspan="2">facilityInterior</td>
<td>Patrol area.</td>
<td>object</td>
<td> </td>
</tr>
<tr class="row-even"><td> </td>
<td>time</td>
<td>Time the area was patrolled.</td>
<td>int</td>
<td>Format is 24-hour (Ex: 0700
or 1400).</td>
</tr>
<tr class="row-odd"><td> </td>
<td>incident</td>
<td>Indicates whether anything
unusual was encountered
during the patrol.</td>
<td>boolean</td>
<td>Default value is false.</td>
</tr>
<tr class="row-even"><td> </td>
<td>details</td>
<td>Summary of area patrol.</td>
<td>string</td>
<td>When incident is false, the default
value will be “Nothing to report.”</td>
</tr>
</tbody>
</table>
<p><strong>Responses</strong></p>
<table border="1" class="docutils">
<colgroup>
<col width="21%" />
<col width="79%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Code</th>
<th class="head">Description</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>200</td>
<td>Successful operation.</td>
</tr>
</tbody>
</table>

Table row data align vertically

In my project I have a contacts Table with some information column like below
<table>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Organization</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aziz</td>
<td>Executive</td>
<td>BIBT</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Mizan</td>
<td>Manager</td>
<td>BIBT</td>
<td>Dhaka</td>
</tr>
</tbody>
</table>
This form result like below
Name Designation Organization Address
---- ------------ -------------- ----------
Aziz Executive BIBT Dhaka
Mizan Manager BIBT Dhaka
But in my case I need another view for this table for print, that will show the result like below,
| Aziz | | Mizan |
| Executive, BUBT | | Manager, BUBT |
| Dhaka | | Dhaka |
How can I achieve this layout for my table? one thing I am using datatable plugin, and I need this layout only for print purpose. Any help is appreciated.
You can transpose your table using javascript. I am assuming you are using jquery,
First, you need to alter your HTML markup a bit,
You can hide and show elements based on CSS media queries, so, I am adding relevant classes to the span and td.
<table>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Organization</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aziz</td>
<td>Executive<span class = 'display-on-print'> ,BIBT</span></td>
<td class = 'hide-on-print'>BIBT</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Mizan</td>
<td>Manager <span display-on-print> ,BIBT</span></td>
<td class = 'hide-on-print'>BIBT </td>
<td>Dhaka</td>
</tr>
</tbody>
</table>
<button>Transpose</button>
Now, you can use jquery to transpose the table,
$("button").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
return false;
});
<table>
<tbody>
<thead>
<tr>
<td>Aziz</td>
<tr>
<td>Executive <span> BIBT </span></td>
</tr>
<tr>
<td>Dhaka</td>
</tr>
</thead>
</tbody>
</table>

Replacing table rows with directives in AngularJS

I am trying to create a table, but for each row I want a directive to be called that will create 1...N rows. The issue I am running into is getting AngularJS to replace the row with the directive.
Restrictions:
There must always be at least 1 item displayed, even if the data that is passed is null or empty. This restriction prevents me from using ng-repeat since upon null/empty it will not enter the loop as to be expected.
This data should be in a table. The information I want to display is in a tabular format, so I would like to keep it in a table. This limits me to what elements I can use. Since you can't have div elements inside a table
Main HTML
<table class="table table-bordered table-hover table-condensed">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr data-create-Rows />
</table>
Create_Rows.HTML
<tr>
<td>B</td>
<td>A</td>
<td>C</td>
</tr>
<tr>
<td>T</td>
<td>E</td>
<td>F</td>
</tr>
AngularJS
<script>
var myApp = angular.module('myApp', [ "xeditable" ]);
myApp.run([ 'editableOptions', function(editableOptions) {
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
} ]);
myApp.controller('MainCtrl',['$scope',
function($scope) {} ]).directive('createRows', function() {
return {
transclude : true,
templateUrl : 'Create_Rows.html'
};
});
</script>
Actual output
<table class="table table-bordered table-hover table-condensed">
<tbody><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr data-create-rows="">
<td>B</td>
<td>A</td>
<td>C</td>
<td>T</td>
<td>E</td>
<td>F</td>
</tr></tbody></table>
Wanted output
<table class="table table-bordered table-hover table-condensed">
<tbody><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr data-create-rows="">
<td>B</td>
<td>A</td>
<td>C</td>
</tr>
<tr>
<td>T</td>
<td>E</td>
<td>F</td>
</tr></tbody></table>
Update
Things I have tried
Replace | Transclude | Code | Results
----------------------------------------------------------------
false | false | <tr data-create-Rows /> | Only displays TDs
false | false | <tbody data-create-Rows /> | Multiple rows displayed
true | false | <tr data-create-Rows /> | Empty
true | false | <tbody data-create-Rows /> | Empty
false | true | <tr data-create-Rows /> | Only displays TDs
false | true | <tbody data-create-Rows /> | Multiple rows displayed
true | true | <tr data-create-Rows /> | Empty
true | true | <tbody data-create-Rows /> | Empty
So using the tbody element appears to allow multiple rows to be created, but I am still wondering how do you replace an element with a directive, so that the original element is removed once the directive has been applied?

Two Table but different width

I want to make table header and table data. But facing problem with width on that two tables different.
Here is the example table :
<table>
<tr>
<td>Name</td>
<td>Class</td>
<td>Phone</td>
</tr>
</table>
and the data here :
<table>
<tr>
<td>John Reise</td>
<td>Math</td>
<td>123456789</td>
<tr>
<td>Michael Sweirzgez</td>
<td>Information Technology</td>
<td>012345678910</td>
<tr>
So when I try to run the code, it will like this :
Name | Class | Phone
John Reise | Math | 123456789
If I delete the data, width will fit with table header.
I make 2 table, 1 table header and 1 table data cause I want to marquee this data. So table header will keep stay in the top.
Maybe you better use thead and tbody tags?
<table>
<thead>
<tr>
<td>Name</td>
<td>Class</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td>John Reise</td>
<td>Math</td>
<td>123456789</td>
</tr>
<tr>
<td>Michael Sweirzgez</td>
<td>Information Technology</td>
<td>012345678910</td>
</tr>
</tbody>
</table>
You can read more about it here http://www.w3schools.com/tags/tag_thead.asp
You can use thead and tbody. Here are the simple examples:
http://www.w3schools.com/tags/tag_thead.asp
http://www.idocs.com/tags/tables/_THEAD.html

Selecting a cell in an HTML table by sibling cell value and column header

I've got an HTML table of which I cannot depend on how many rows and/or columns it will contain - so using index numbers is not possible. Here is an example of the table:
|Name|Description|Credit|Balance|
|Bob | Rent |400.00|1000.00|
|Jim | Car |100.00|4000.00|
Here is the HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Credit</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Rent</td>
<td>400.00</td>
<td>1000.00</td>
</tr>
<tr>
<td>Jim</td>
<td>Car</td>
<td>100.00</td>
<td>4000.00</td>
</tr>
</tbody>
</table>
I need to get the credit amount for which ever name I need.
Got it:
//tr[td[.="Jim"]]/td[count(ancestor::table/thead/tr/th[.="Credit"]/preceding-sibling::*)+1]