Scenario:
I need to filter out data from the datatable based on the selection that has been made from the user. To implement this I have a tree control which represents the hierarchy of the data in the datatable. When a user unchecks a certain node in the tree. That data should be taken out from the datatable.
Question:
How do I filter "out" data from the datatable?
If I use search() method, it gives me that matched rows and I want the opposite of this. I need to take out the matched rows instead of showing them.
I tried using the following filter function but it gives me the filtered data.
table.column([column number]).data().filter(function (value, index) {});
I would appreciate any help on this.
Thanks
You could implement your own custom search function:
var table = $('#myTable').DataTable();
$.fn.dataTable.ext.search.push(
function(oSettings, aData, iDataIndex) {
var match = true;
$(".checkbox:checked").each(function(index) {
var cb = $(this);
var id = $(this).attr('id');
if (aData.toString().toLowerCase().indexOf(id) >= 0) {
match = false;
} else {
match = true;
}
});
return match;
});
Please see a demo here. Hope it helps.
The simple answer is to invert the filter. i.e. change the filter to return false where it currently returns true and vice versa.
You can also do this with search, by inverting the regex you look for.
Related
Does anyone know if it is possible to omit / hide a column from the filter (list of checkboxes) on KoGrid? If so, how? (I'm hoping there's something that can be done to achieve this in the ColumnDefs property)
(Answering own question, in case it helps others). What I ended up doing, is subscribing to the Grid's showMenu() observable, and hiding elements that pertained to columns with labels that were empty string or only whitespace.
self.Grid().showMenu.subscribe(function (val) {
if (val != true) return;
var colDefId = 0;
self.gridOptions.columnDefs.forEach(function (colDef) {
if (!colDef) return;
if (!/\S/.test(colDef.displayName)) $($('.kgColListItem')[colDefId]).hide();
colDefId++;
});
});
I am new to the jQuery dataTables plugin found on https://datatables.net/
I am trying to implement a custom filter for the table:
Basically, when I click a button, a custom filtering function will test the value of column #1 (numeric value) for all rows, and if the value in the column < 50 for a row, the row stays, otherwise the row is hidden.
The concept should be very simple, but I can't seem to find the right way to use the API:
column.filter() returns an array of column value
column.search() can only accept text data (not function)
What's the API that can achieve the effect?
Is there anything like the following?
var api = $('#table').DataTable();
api.column(1).data().somefilterfunction(function (val, ind) {
return parseFloat(val) < 50;
}).draw();
Have you seen this article in the documentation -> https://datatables.net/examples/plug-ins/range_filtering.html ??
You can create a custom filtering function on-the-fly, triggered by a button :
<button id="filter">filter < 50</button>
script :
$("#filter").click(function() {
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
return parseFloat(data[0])<50
? true
: false
}
);
table.draw();
$.fn.dataTable.ext.search.pop();
});
demo -> http://jsfiddle.net/dpwgqs2o/
Notice that the filter is created inside the click handler itself, and removed again as soon the table is drawn. This makes the filter temporary, i.e when the user click on a column header, the filter is cleared. If you want a permanent filter, make the filter global and do not remove it.
I am using slick grid to show JSON data.
On external button click i want highlight specific row based on column values.
Such as highlight row which have cost=75 and venue_id =87 and Impression=268
Got solution :
dataView.getItemMetadata = function (row) {
var item = dataView.getItem(row);
if (item["" + columnName+ ""] == colValue)
{
return { cssClasses: 'highlight' };
}
return null;
}
grid = new Slick.Grid("#myGrid", dataView, myColList, options);
The other suggested option seems to be have heavy load on my system, as my system have thousand of records and a particular row have to highlighted and suggested solution kind of refreshes the whole table. For some reasons it is not working for me.
I got around this by using Slickgrid's flashCell. Even no need of getItemMetadata()
var rowId=dataView.getRowById(idvalue);//id of the row to be highlighted, as slickgrid enforced an id field
grid.scrollRowToTop(rowId);//makes the row visible
grid.getColumns().forEach(function(col){//get all the columns
grid.flashCell(rowId, grid.getColumnIndex(col.id));//flash it
})
Hope this helps to coming to this page for the answer.
how to select data of single column from a grid data.
The grid data is passed as following:
var url = "/Main/Grid?tbname="+parameter;
var jsonp = new $.ig.JSONPDataSource({
dataSource: url, paging: {
enabled: true, pageSize: 10,
type: "remote"
}
});
$("#listingGrid").igGrid("dataSourceObject", jsonp).igGrid("dataBind");
I have to retrieve data in another page from this grid and select one column from this data.
and i have retrieved data like this
var ds = window.parent.$("#listingGrid").igGrid("option", "dataSource");
but not able to access one column data.
I'm assuming that since you are using the DataSource directly that you don't want the actual columns in the grid, which might differ from the columns in the data source depending on how you have the grid set up.
The easiest way to go about this would probably be to call the data function off of the data source once you retrieve it from your other page. This function returns an array of objects that are the items in each row. Once you have that you can iterate over each of the items and query the individual property.
var ds = window.parent.$('#listingGrid').igGrid('option', 'dataSource');
$.each(ds.data(), function (i, item) {
var itemProperty = item.Property;
// ...
});
You'll need to make sure that the data is all loaded from the service first though or data will possibly return an empty array.
In my app I have to add Search field and some select fields.
when I add any character in search field corresponding content from store should be display.
Currently I am using search field on which I am handling keyup event.
Please let me know the flow and guide line to do this.
Thanks
I suppose you want a search feature for your search field..showing the results as you type. You can achieve this by using regular expressions and compare them with entries in the store.
Here's the code I used on a project:
//referencing my searchfield
Search: '#searchfield';
//attaching an event
Search: {
keyup: "OnFocus"
}
//the actual function
OnFocus: function (searchField, e) {
var query = searchField.getValue(); //get the value entered in the search field
var ContactsContainer = this.getContactsContainer(); //the container that holds my contacts
var store = Ext.getStore('Contacts'); // the store where I have the info
store.clearFilter(); //assure there aren't any filters set
if (query) { //if the current value in the search field
var thisRegEx = new RegExp(query, 'i'); //new regular expression with our value
store.filterBy(function (record) { //filter the store
if (thisRegEx.test(record.get('name')) //the fields in the store
thisRegEx.test(record.get('surname'))
thisRegEx.test(record.get('phone'))) {
return true; //must include this
};
return false;
});
}
Good Luck!