Is there a way of changing the sort column in datatable by checking a checkbox ?
When I click a "search button" to get data from database, I want the sort to be whatever the checkboxes as checked, like 1 and 3 or only 2 or only 3 and so on.
example
when i check the box "Nome do Paciente", i want the column "Nome do Paciente" to be the deafult sort for that search.
Documentation OrderBy Filter
The OrderBy Filter can have a collection with the names of columns that you want to order. When you change some check, you can add or remove an element on this array from your controller.
Remmember use this variable in your template. Like this:
<tr ng-repeat="row in rows | orderBy:variableOrderBy">
</tr>
The variable variableOrderBy has the collection of columns.
Related
I'm using a plugin that I built for datatable for dropdown filter
and I'm using fnFilter for it.
The issue is when I search first let's say I searched for 'test' it
returns one row then when I filter, the filter doesn't do the filtering on
the one row I have on the table but instead it clears my global search
somehow.
Can someone please help me with this?
I think it just fnFilter clears search() on datatable but I don't want to
change fnFilter to search.
I don't have that problem when applying the filter to a column, if you don't provide the column to set the filter to the value passed to the filter will replace the search.
$(document).ready(function() {
const dt = $('#example').dataTable({"sPaginationType": "full_numbers"});
$("#filterbtn").on("click",x=>{
dt.fnFilter( 'Gecko',0 );//column will not replace search
dt.fnFilter( 'Camino',1 );//multiple filters are possible
});
$("#resetfilterbtn").on("click",x=>{
dt.fnFilter( '',0 );//reset the filter (does not reset search)
dt.fnFilter( '',1 );
});
});
Here is a jsfiddle example.
In the jsfiddle example search for 3+ and get 5 rows, then press filter button and get 1 row, then press reset filter button and get 5 rows again.
If you press filter button you'll get 2 rows, no matter what you search you will not get more than 2 rows (search does not reset the filter)
How can I display selected value from selectBox. I can't use the ngModel binding property because the number of selectBoxes is dynamically changing.
For example, I will have 50 rooms so I need 50 variables for every selectBox. Is there any other way to do it, or I have to use an array of selected values? This is my current code:
<tr *ngFor="let room of term.rooms">
<th>{{room.name}}</th>
<th><select #box><option *ngFor="let price of getPrices(room.id)" [ngValue]="price">{{price.name}}</option></select></th>
<th><!--ValueHere--></th><!--for example something like this price.value-->
</tr>
Right, you will need an array with 50 variables.
In your template, use ngFor to loop through your array and for each variable, create a dropdown and use [(ngModel)] to bind data.
Let me know if you still couldn't figure out.
I'm using angular-smart-table for my tables in my application and I found a small issue using it:
Basically if I try to filter my Objects to exclude a few items containing a specified value the pagination fail showing less items per page and considering the total number of items as it wasn't filtered...
What I'm doing to filter is just this:
<tr ng:repeat="item in rowItems | filter: {name:'!Rick'} track by item.id">
And the result is visible in my fiddle: HERE
I am using a horizontal table with a select list (dropdown) as one of the fields. When I click submit I need to grab the table header value for that column and the value from the dropdown.
My table class = "views-table" essentially looks like this:
header1 | header2 | header3 | header 4
--------------------------------------
select select select select
data1 data2 data3 data4
[submit button]
My dropdown class="request-select" element holds the following values:
select list:
-empty
-FIRST
-SECOND
So after a user selects a first value the table should look like this:
header1 | header2 | header3 | header 4
--------------------------------------
select FIRST select select
data1 data2 data3 data4
[submit button]
And the data I am expecting after the user clicks submit is: header2 and FIRST
I can grab the table header value from the change event from the dropdown with:
jQuery('table.views-table').on('change', 'td', function(e) {
var tableHead= e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
alert([jQuery(tableHead).text()]);
// returns `header2` from dropdown with `FIRST` value selected
});
But I can't figure out how to drill down and access this data from the submit button. I don't want to use a hidden element or use localstorage. Any ideas on how I should approach this? I am very inexperienced with jQuery. If you need more information please let me know and I can provide more details if needed.
One of the approach would be providing related IDs to your headers and select tags. For example you can provide IDs like "select-1", "select-2"... to your dropdowns. Similarly you have to provide IDs to your header tags like "thead-1", "thead-2"..., Now on submit click event, check which dropdown value has been changed(value!="") and then grab the last digit of that dropdown ID. Now you can use that digit to get value of respected header.
If you're able to get a handle on the cells index, then you can gets its value by using .val(), not .text().
I have two tables that I want to filter by either using an individual select dropdown in the table row or by selecting multiple checkboxes and bulk updating the scope.
A user should be able to check the records, select the top dropdown status, and then the scope gets updated. If the status is greater than or equal to 1 it goes in one table, if less then it goes in the other table.
Fiddle http://jsfiddle.net/TheFiddler/hxz06sd7/
How can I use the checkboxes to update the checked values based upon selected value?
The select
<select ng-options="item.value as item.displayName for item in StatusDropDown" ng-model="person.status" ng-change="updateSelected()"></select>
updatedSelected should take the checked rows and filter:
$scope.updateSelected = function(statusarg){
//how to set status for selected and update tables
}
Associate ng-model (person.selected) to the checkboxes and on-change, filter them out based on the selected property, and apply the value to them.
$scope.updateSelected = function (statusarg) {
//how to set status for selected and update tables
angular.forEach($scope.people, function(person){
person.selected && (person.status = statusarg);
});
}
Fiddle
Earlier issues with your code was that: You should not use track by with select as syntax they are not meant to work together. You would rarely need to use track by with ng-options. Read this for more details.