I am sorting my tablesorter table successfully from a link outside the table, using var sorting = [[2,"n"]];. Clicking that link does sort the table the opposite way (from ASC to DESC, for example).
How can I sort the table by the 3rd column ascending, without losing the ability to sort in the opposite direction by clicking the link again? var sorting = [[2,"a"]]; does sort the table ascending, but I cannot click that link again to sort in the opposite direction!
Thanks for your help!
These are my lines:
$("#trigger-tg").click(function() {
// set sorting column and direction, this will sort on the first and third column the column index starts at zero
var sorting = [[2,"n"]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
// return false to stop default link action
return false;
});
The tablesorter link in your question is pointing to the original tablesorter, but the code links and example are from my fork of tablesorter which does include the ability to pass an "n" to sort the column in the "next" direction.
The code example you shared does work - see demo.
$(function() {
var $table = $("table");
$table.tablesorter();
$("#trigger-tg").click(function() {
$table.trigger("sorton", [[[2, "n"]]]);
return false;
});
});
Here is the documentation page showing all possible settings - https://mottie.github.io/tablesorter/docs/example-trigger-sort.html
If you must use the original tablesorter, try the code from this demo.
Update: To notify the user that additional clicks will change the sort, try this code (demo)
HTML
<p>Sort Animals column from <a id="trigger-tg" href="#">A-Z</a>.</p>
Script
$(function() {
var $table = $("table"),
targetColumn = 2;
$table
.on("sortEnd", function() {
var c = this.config;
if (c.sortList[0][0] === targetColumn) {
$("#trigger-tg").text(c.sortList[0][1] === 0 ? "Z-A" : "A-Z");
}
})
.tablesorter();
$("#trigger-tg").click(function() {
$table.trigger("sorton", [[[targetColumn, "n"]]]);
return false;
});
});
Related
I d like to be able to hide/display the filters while using tablesorter.
Using table sorter just went fine but when i added a button to execute :
function display_hide_filter() {
var filters = document.getElementsByClassName('tablesorter-filter-row');
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (filter.style.display == 'none') {
filter.style.display='inline';
} else {
filter.style.display='none';
}
}
}
I then get a weird answer. Hiding the filter is fine but re displaying turn into having all filter cells under the first header cell.
Since i got poor english and css/js skills, I just hope I didnt miss something about it in the documentation but i tried to get trough it a thousant times with no success.
Thanks for any help
There is a filter_hideFilters option that minimizes the filter row until the user hovers over it. It is also accessible friendly in that the user can use the tab key gain access the filter inputs (demo).
If you just want to hide/show the filter row, then this basic code would work (demo):
HTML
<button type="button">Toggle Filter Row</button>
Script
$(function () {
$('table').tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'filter']
});
$('button').click(function(){
$('.tablesorter-filter-row').toggle();
});
});
As Andreas pointed out, I used 'inline' where i should have used ''
I've got two datatables and there is a dropdown created in the second one with data from the first. I've created a jsbin here
If you add a couple of instructions to the first table (add any text and then click Add Instruction) - then click on the Load Copied Data button, you will see the dropdown box is populated from the first table.
If I do:
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
alert(ins);
});
It basically gives me the html for the dropdown - how do I get which value they have chosen? I was thinking of having a hidden column and updating that on the onchange of the dropdown, but is there a better way?
Thanks in advance
You may use jQuery.map() to generate an array of selected text/value, like below.
$('#btnTest').on('click', function (e) {
//var tsor = $('#tblSORSInstall').dataTable();
var ins = $('#tblSORSInstall').find("tbody select").map(function() {
return $(this).find(":selected").text() // get selected text
//return $(this).val() // get selected value
}).get()
alert ( JSON.stringify(ins, null, 2) )
});
Here is your JS Bin - updated
Using tsor.fnGetNodes() you can get all table row nodes, then you can loop through those and get the select values.
Final code will look something like
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
var a = tsor.fnGetNodes();
$.each(tsor.fnGetNodes(), function (index, value) {
alert($(value).find('select').val());
});
});
I have 2 tables that are using DataTable jQuery Plug-in.
I wondering if there is a way to hide my pagination on the bottom right of my table.
Note:
Only show the pagination when I need one.
Hide the pagination when the query results is less than 10.
Use drawCallback option to handle DT draw event and show/hide pagination control based on available pages:
$('#table_id').dataTable({
drawCallback: function(settings) {
var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
pagination.toggle(this.api().page.info().pages > 1);
}
})
$('#dataTable_ListeUser').DataTable( {
//usual pager parameters//
"drawCallback": function ( settings ) {
/*show pager if only necessary
console.log(this.fnSettings());*/
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('#dataTable_ListeUser_paginate').css("display", "block");
} else {
$('#dataTable_ListeUser_paginate').css("display", "none");
}
}
});
Use 'drawCallback' to solve this problem.
1.On the webpage, use developer tool to inspect the 'previous' button, then you will find a div element that wraps both the 'previous' and 'next' buttons. DataTables automatically assigned an id to this div based on your html table element's id.
For example, I have a table with id 'Atable'. In this table, DataTables automatically created a div element with id called 'Atable_paginate' to wrap the previous and next buttons.
2.For drawCallback, we write a function which checks if there is less than 1 page, if so, we hide element by utilising id.
For example, you have set there are 20 records on one page by
pageLength: 20,
which means if there are less then 20 records, we don't need to display 'previous' and 'next' buttons. So we write like below,
drawCallback: function(settings){
if($(this).find('tbody tr').length <= 20){
$('#Atable_paginate').hide();
}
}
3.The initialization of Atable should be like below
var table = $('#Atable').DataTable({
pageLength: 20,
lengthChange: false,
drawCallback: function(settings){
if($(this).find('tbody tr').length <= 20){
$('#Atable_paginate').hide();
}
}
});
4.If there are more than one table on the webpage, apply this method on each table.
You can use fnDrawCallback() method to hide the pagination in dataTable.
var oTable = $('#datatable_sample').dataTable({
"iDisplayLength": 10,
"fnDrawCallback": function(oSettings) {
if ($('#datatable_sample tr').length < 10) {
$('.dataTables_paginate').hide();
}
}
});
The length which you can define as per the row you want to display in the listing.
$(this) did not work for me, probably because I am using TypeScript. So I used a different approach to get the JQuery element for the table wrapper and the DataTables API. This has been inspired by the answer of BitOfUniverse and tested with DataTables 1.10.
TypeScript:
'drawCallback': (settings: any) => {
// hide pager and info if the table has NO results
const api = new $.fn.dataTable.Api(settings);
const pageCount = api.page.info().pages;
const wrapper = $('#' + settings.sTableId).closest('.dataTables_wrapper');
const pagination = wrapper.find('.dataTables_paginate');
const info = wrapper.find('.dataTables_info');
pagination.toggle(pageCount > 0);
info.toggle(pageCount > 0);
}
You can give options when you create your datables on Javascript
$('.examples').DataTable({
"paging": false
});
All options are listed here:
http://www.datatables.net/reference/option/
I am using kendo grid . I have a column Category which i used for grouping . So i need to show category wise total in group footer template.
So I have used below code
.ClientGroupFooterTemplate(#"<span id=""spnGroupTotalPrice"" style=""float:right;"">#=sum#</span>");
This will work properly when page load. But i want to change the total price when editing Quantity column. So I tried below code
.ClientGroupFooterTemplate(#"<span id=""spnGroupTotalPrice"" style=""float:right;"">#=calculate(Category)#</span>");
But It is not available column values in group footer template. I want to pass category name to calculate function.
Please provide a solution.
Thanks in advance.
I solved my issue.
calculate_sub_total()
{
grid.tbody.find('> tr').each(function () {
var tr = this;
var cells = tr.cells;
if ($(tr).hasClass('k-group-footer')) {
groupTotalPrice = (Math.round(groupTotalPrice * 100) / 100).toFixed(2);
$(cells).find("#spnGroupTotalPrice").html(groupTotalPrice);
groupTotalPrice = 0;// clearing after finishing a group
}
else if (!$(tr).hasClass('k-grouping-row')) {
var rowItem = grid.dataItem(tr);
groupTotalPrice = parseFloat(groupTotalPrice) + parseFloat(rowItem.TotalPrice);
}
});
}
By calling above function in onChange event of grid..
Hope it would be useful. It is rare question in stack overflow.. :)
I want filter and sort option in html table. I tried 'tablesorter.js',
I can sort the table fields by using this module. But I can't add drop down list and filter box with table fields.
Anybody can help me??
Try Using This.
This is HTML table shorter.
OR
(DEMO) for short using drop-down list
$('table').tablesorter();
$('select').change(function(){
var column = parseInt($(this).val(), 10),
direction = 1, // 0 = descending, 1 = ascending
sort = [[ column, direction ]];
if (column >= 0) {
$('table').trigger("sorton", [sort]);
}
});
You can add a drop down list filter to the table column by adding a class="filter-select" to the for that column in the .
<thead><th>Col 1></th><th class="filter-select">Col2</th></thead>
Or you can add a filter function for that column:
filter_functions : {
// Add select menu to 3rd column (column numbers are zero-based).
// Set the column value to true, and/or add "filter-select" class name to header
2 : true,
}