jquery tablesorter both asc and desc from a single external link - tablesorter

I want to sort both asc and desc direction alternately from the link
Not from the table header
I am not able to figure it out, the code that inserted is working only one direction. I need both directions
plugin :: jQuery plugin:Tablesorter2.0
<table id="myTable" class="tablesorter" border=1>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tbody>
<a id="trigger-link" href="#">I want to sort both asc and des`enter code here`c alternately from this link</a>
<script>
$(document).ready(function(){
$("#myTable").tablesorter();
$("#trigger-link").click(function() {
var sorting = [[0,1]];
$("table").trigger("sorton",[sorting]);
return false;
});
});
</script>

If you are using this fork of tablesorter, you now have two ways to accomplish this:
Trigger a "sort" event on the header cell (v2.9+)
$("table").find("th:contains(Discount)").trigger("sort");
As of v2.17.0, you can trigger the "sorton" method using an "n" (or next) variable
$("table").trigger("sorton", [ [[0,"n"]] ]);
Please see this demo for other sort methods.

Related

Tablesorter - How to ignore sort for certain cell value?

How can I prevent Tablesorter from sorting a certain value or keep these values at the bottom? More specifically, this certain value will always be a -
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Bach</td>
<td>40</td>
</tr>
<tr>
<td>Doe</td>
<td>-</td>
</tr>
</tbody>
</table>
I want to keep Doe with the value "-" always at the bottom.
Tablesorter has an emptyTo option which can modify the sort behavior of empty, or non-numeric, cells (demo)
In this case, you might need to set a data-text attribute (modified by the textAttribute option to an empty string.
HTML
<td data-text="">-</td>
JS
$('#myTable').tablesorter({
// ...
emptyTo: 'bottom'
});
This worked for me.
Doc: https://mottie.github.io/tablesorter/docs/example-options-headers-digits-strings.html
jQuery(function($) {
$("#myTable").tablesorter({
stringTo: 'bottom'
});
});

table cell with content trucate

I am using JQuery Mobile for show a data of Products, someone like this:
<table data-role="table" id="products-vip" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="See">
<thead>
<tr>
<-- <th> with table heads -->
</tr>
</thead>
<tbody>
#foreach(Product in Model)
{
<tr>
<-- <td> with info of Products-->
</tr>
}
</tbody>
</table>
The table is "columntoggle".
My problem is that the Content of the cells exceed the width of the screen, for example, in a iOS browser, and JQuery Mobile truncate the content and do not allow move the page into left or right to see the content.
How I can say to JQuery Mobile that do not truncate the content, and make the table responsive, or the cell with a word wrap indicated.
Thanks!...
Put the table inside a div and allow the div to scroll when the table exceeds the div boundaries:
<div class="tableWrapper">
<table data-role="table" id="products-vip" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="ui-responsive table-stroke" data-column-btn-text="See">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1 Row 1 content</td>
<td>Col 2 Row 1 content</td>
<td>Col 3 Row 1 content</td>
<td>Col 4 Row 1 content</td>
</tr>
</tbody>
</table>
</div>
CSS:
.tableWrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
The column contents automatically wraps to multiple line and the table stays within the div until the columns can no longer shrink. At that point, the table becomes wider than the div and the scrollbar appears.
DEMO

jquery easyui data grid editor for combo box not loading with grails

I am using Jquery Easyui Datagrid with grails this is my code for creating the grid in GSP file:-
<table class="easyui-datagrid"
data-options="fit:true,idField:'id',pageNmber:1,pageList:[25,50,75,100]" pagination="true" id="importGrid">
<thead>
<tr>
<th data-options="field:'firstName',sortable:true,width:15,nowrap:true" >First Name</th>
<th data-options="field:'lastName',sortable:true,width:25,nowrap:true" editor="{type:'validatebox',options:{required:true}}" >Last Name</th>
<th data-options="field: 'firstNameLastName',sortable:true,width:130,nowrap:true" >First Name Last Name</th>
<th data-options="field:'displayName',sortable:true,rowspan:2,width:80,nowrap:true">Display Name</th>
<th data-options="field:'relocation',sortable:true,width:130,nowrap:true">Relocation</th>
<th data-options="field:'proficiency',sortable:true,width:130,nowrap:true" editor="{
type:'combobox',
options:{
valueField:'rightid',
textField:'rightname',
data:aRights,
required:true
}
}">Proficiency</th>
<th data-options="field:'subProficiency',sortable:true,width:130,nowrap:true" editor='proficiencyEditor'>Sub Proficiency</th>
<th data-options="field:'uploadResume',sortable:true,width:130,nowrap:true,">Relocation</th>
</tr>
</thead>
</table>
i tried using url which refers to one action in controller but it doesn't work.so to make it work with gsp now i am using a js variable which i have declared in the same gsp. I have the variable aRights like this:-
<script> var aRights = [{rightid: 'V', rightname: 'View Only'},
{rightid: 'E', rightname: 'Edit FPC'},
{rightid: 'A', rightname: 'Admin'},
{rightid: 'N', rightname: 'None'}
] ;
</script>
But editor is never visible..
this is the code i am using to populate the data grid.This code is in js:-
$('#importGrid').datagrid({
url:'/'+productName+'/TestList/excelImport',
queryParams:{
list: hiddenMapForFields,
file:fileName
},
pageNumber: 1,
});
I am new to Jquery easyui editors.Please let me know where i am wrong and help me to solve the issue.
I try to reproduce your bug.
http://jsfiddle.net/niscio/63fyrzL8/1/
If you read the documentation the real problem for editing is that you have to use edatagrid declaration
$('#ID').edatagrid({... options ...});

How to generate <table> compatible with jQueryMobile in TYPO3

I'm trying to create a jQueryMobile compatible <table> with TYPO3.
It means adding data-role="table" and class="class="ui-responsive"".
This table can be generated with RTE or a Table Content Element.
RTE
Default <table> HTML
<table style="" class="contenttable">
<thead>
<tr>
<th scope="col">head 1</th>
<th scope="col">head 2</th>
<th scope="col">head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>L 1</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>L 2</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
attempt to solve problem
I've added the following setup but jQuery seams not to work anymore. It load (spinning animation) indefinitely.
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.data-role.always = 1
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.data-role.default = table
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.default = ui-responsive
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = ui-responsive
Content Element
Default <table> HTML
<table class="contenttable contenttable-0 test">
<thead>
<tr class="tr-even tr-0">
<th class="td-0" scope="col" id="col162967-0">head 1</th>
<th class="td-1" scope="col" id="col162967-1">head 2</th>
<th class="td-last td-2" scope="col" id="col162967-2">head 3</th>
</tr>
</thead>
<tbody>
<tr class="tr-odd tr-1">
<td class="td-0" headers="col162967-0">L 1</td>
<td class="td-1" headers="col162967-1">...</td>
<td class="td-last td-2" headers="col162967-2">...</td>
</tr>
<tr class="tr-even tr-last">
<td class="td-0" headers="col162967-0">L 2</td>
<td class="td-1" headers="col162967-1">...</td>
<td class="td-last td-2" headers="col162967-2">...</td>
</tr>
</tbody>
</table>
attempt to solve problem
I don't find in tt_content where to add configuration to add a classand data-role.
For the TABLE content element you have at least 2 options:
A. Render the table yourself - You can create your own PHP method that would do the processing of the tables. I presume you are using css_styled_content extension whose method render_table() does the rendering of the tables. You can copy that method, add it to your own class and modify it so that it adds the data-role attribute as you want.
B. Do some replacing of the outputted code - You can try to use the replacement property (available in TYPO3 >=4.6) of the stdWrap to replace class="contenttable with data-role="table" class="ui-responsive. I currently cannot test it but try this:
tt_content.table.20.stdWrap.replacement {
10 {
search = class="contenttable
replace = data-role="table" class="ui-responsive
}
}
There's a bug report open at forge to override the Flexform values via TSconfig TYPO3 forge.
The suggested workaround by overriding the flexform completly works fine though:
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue('*', 'FILE:EXT:'.$_EXTKEY.'/flexform_table.xml', 'table');

jquery tablesorter: nested tables

I have nested tables where both the inner and outer tables have rows added to them dynamically. When I trigger an update of an inner table, after the inner table order has been changed, the order of the outer table is also changed. I've created a jsfiddle to demonstrate this:
http://jsfiddle.net/FZLxp/
which is forked from the OS question Nested jQuery Tablesorter tables, all sortable
To see the problem sort the outer table by Make so that Toyota is at the top and then click the "update" button. The update button triggers an update of the inner toyota table but also sorts the outer table as well to reflect the sort direction of the Toyota Doors column.
How can I sort the inner table after adding additional rows without sorting the outer table as well?
<script type="text/javascript">
function updateRW() {
$("#toyota").trigger("update", [true]);
}
</script>
<table class="tablesorter">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda</td>
<td>Accord</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table class="tablesorter-child">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda 2-Door</td>
<td>Honda Red</td>
</tr>
<tr>
<td>Honda 4-Door</td>
<td>Honda Blue</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table id="toyota" class="tablesorter-child">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota 2-Door</td>
<td>Toyota Yellow</td>
</tr>
<tr>
<td>Toyota 4-Door</td>
<td>Toyota Green</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<input type=button value="update" onclick="updateRW()">
$(document).ready(function()
{
$("table").tablesorter({selectorHeaders: '> thead > tr > th'});
});
This appears to be a bug in tablesorter!
I've opened an issue so we can track it, and I should have this fixed in the next update.
Thanks for reporting it!

Resources