I have such html table:
here: http://jsfiddle.net/zrjaM/1/
And such js for sorting:
$(document).ready(function() {
$(".sortable")
.tablesorter({sortList: [[4,0]], widgets: ['zebra']});
});
But i need to sort via 0-th column to.... i write:
$(document).ready(function() {
$(".sortable")
.tablesorter({sortList: [[0,0],[4,0]], widgets: ['zebra']});
});
but it works strange...
Also i need to do that, tr's with price value (4-th column) are on top, but now, when i sort only by price - all is ok, but when via two columns, i could have tr's with price both in end or middle.... How to send them to top, and sort first via 0-th, then via sorter 0-th sort via 4-t column.... How to do it?
#charlietfl's solution would work even without the code to add ZZZZZZZ to empty cells. But because that demo is using the original version of tablesorter, the first tbody would have to be removed.
But, because it looks like you are using my fork of tablesorter, which does allow sorting multiple tbodies, all you need to do is set the emptyTo option to none.
The emptyTo option is set to bottom by default. So all empty cells will always sort to the bottom. The reason the third column doesn't look like it's sorting at all is because all links in that column have the same text. Here is a demo.
Update: also remove the tablesorter-headerSortDown from the fourth column, it's still in the css but the plugin is using tablesorter-headerDesc now.
I figured out a possible solution.
First check rows for no price, if no price add a hidden span before item name in first column the text ZZZZZZZ in it. This forces all the ZZZZZZZ items to bottom and you get a double sort alphabetic on first row
$('tbody tr').each(function(){
if( $.trim( $(this).find('td').eq(4).text())==''){
$(this).find('td').eq(0).prepend('<span style="display:none">ZZZZZZZZ</span>')
}
});
$(".sortable") .tablesorter({
sortList: [[0,0],[4,0]], widgets: ['zebra']});
});
DEMO: http://jsfiddle.net/zrjaM/6/
Related
(This post has been updated for clarity and more of my findings.)
I'm currently using the tablesorter functions toggle and tablesorter-childRow to make a table that has a child row that can be hidden and expanded by clicking 'toggle' on the primary row like this example. However, the child row contains a nested table where the first row also contains a toggle function that can hide or expand all the remaining rows of that nested table. Here is my table in action.
Currently, the toggle functions all work fine in the sense that they are able to hide and expand the rows that I want to. However, if I click on the primary row's toggle function (the row with Category I), the function expands the entire nested table. I would like the toggle function on the primary role to only expand the first row of the nested table only (the row with Category II).
For my script, I used the default script found on the cssChildRow configuration here. What I tried to do is to give the rows that I want expanded its own html class (in the fiddle they are marked with <td class="show">). Then I edited the to script function to .find('.show') instead of the default .find('td'), but this did not work. Does anyone have a solution?
Thanks for everyone's help! 😊
<script>
$(function() {
$('.tablesorter-childRow td').hide();
$(".tablesorter")
.tablesorter({
cssChildRow: "tablesorter-childRow"
})
$('.tablesorter').delegate('.toggle', 'click', function() {
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('.show').toggle();
return false;
});
});
</script>
After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)
I work wit library datatables, and i want to add in table row check box for some actions, i add checkboxes to the table,and one check box in table header for choose all boxes.
Script:
$('#checkAll').click(function () {
$(':checkbox.checkbox-mark').prop('checked', this.checked);
});
In jsfiddle you can see more.
But problem is, i have pages, and in case if i tap on header checkbox, it's choose only all boxes in curent page, but i want in the all pages, how i can solve this?
like you discussed already you can use service/api to set selectAll values but if you want to it using front end then you can use DataTable().cells().nodes(); to get all the nodes and iterate through them and set the checkbox value to each node.
// update your checkAll logic like this
$('#checkAll').click(function() {
var allPagesData = $("#test1").DataTable().cells().nodes(); // this will give you all data in datatable.
$(allPagesData).find('input[type="checkbox"]').prop('checked', this.checked);
});
check out this fiddle
I am trying to do some work with tables and jQuery. Basically, I want to be able to go through an entire column based on its header and look for certain values. If those values are present I want to then delete the entire row. My code so far can select the correct column:
ownerIndex = $('th:contains("Outstanding")').index();
$('table tr td:nth-child('+ownerIndex+')').parent().hide();
From here I am unsure how to do an 'if' statement to look at the values. I am looking for all cells with the value of "0.00".
Thanks in advance.
Loop through each td element you selected using jQuery each function:
$('table tr td:nth-child('+ownerIndex+')').each( function(){
if($(this).html() == "0.00") {
// do your stuff
}
});
I'm using the tablesorter plugin and tablesorter widgets for searching through the items in a table. however i had a conflict with the tablesorterWidgets.js file while trying to set the number of rows per page.
js:
var $table = $("#table").tablesorter({
widgets: ['zebra', 'columns', 'filter'],
widthFixed : true,
ignoreCase: true,
widgetOptions : {
filter_columnFilters: false
}
//used for searching specific items in the table
$.tablesorter.filter.bindSearch( $table, $('input.search-sub-accounts'));
items = $("table tbody tr");
perPage = 2;
numItems = items.length;
items.slice(perPage).hide();
However it never took the perPage number coz at some point in tablesorter widgets file, it overwrites the perPage number and resets it back to the original length of the items.
is there any other way i could use to search the items from the input field.
http://jsfiddle.net/anLa1how/5/
Thanks!
Looking through the documentation, it looks like you have few issues.
Working jsFiddle demonstrating the below fixes
Issue 1:
You are using tablesorter.js Version 2.0.5b with tablesorter.widgets.js v2.23.3
You should instead use the newest version of each: tablesorter.js v2.23.3 and tablesorter.widgets.js v2.23.3
Issue 2:
The introduction states:
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:
Your table does not have THEAD or TBODY tags which are required. If none are detected the tablesorter is not initialized and therefore the widgets cannot be created causing these errors to appear in the console:
Uncaught TypeError: Cannot read property 'resizableNoSelect' of undefined
Uncaught TypeError: Cannot read property 'widgetOptions' of undefined
Issue 3:
Per the documentation for $.tablesorter.filter.bindSearch
Include a data-column="#" attribute (where # is the column number) in the search input, to specify to which column the search should apply ~ see this demo for a full example. Warning!, if no data-column attribute is added to the input, the input will be ignored.
In v2.15, use a data-column="all" to bind an external any-match search filter....
This means that where you have <input class="search-items"/> it should be more like <input class="search-items" type="search" placeholder="Search" data-column="all"> (change "all" to a column number if needed)
Issue 4:
As you mentioned, the filter widget seems to be overriding the pagination settings. A quick way to get around that would be to move the call to hide elements into the onInit: callback and put it inside a timer function so it lets the filter plugin do its thing first then hides the other "pages". Like this:
setTimeout(function(){ items.hide().slice(startItem - 1, endItem).show();}, 100);
This might not be the best way but without getting too deep into the widgets, this does work.