I have a datatable and the 5th column of this table contains several labels. I also have a separate labels list with checkboxes, where user can select multiple labels and filter the table. I found the following way to filter the table:
table.column(5).search('value1|value2', true, false).draw();
This returns all the rows, that contain value1 OR value2, but I need to return the rows that contain both, value1 AND value2, but I could not find anything about this. I tried something like this as an experiment, but it did not work:
table.column(5).search('value1&value2', true, false).draw();
How do I search the datatable with an AND condition?
As andrewJames suggested in the comment, I used the Datatables search plug-in and created a custom filter function:
$('.labels-filter-button').unbind().click(function(){
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
let selectedLabels = $('#labelsFilterSelector').val();
let content = data[5];
let rowIncludes = true;
for (var i = 0; i < selectedLabels.length; i++) {
if (content.indexOf(selectedLabels[i]) == -1){
rowIncludes = false;
}
}
return rowIncludes;
});
table.draw();
$.fn.dataTable.ext.search.pop();
});
Works like a charm on any number of inputs.
Related
I am using data from a CSV that looks like this
,,Name,First names,s,r,Nat,born,starting point,starting date,arrival date,days,km,Assist,Support,Style,note,arrival date 2
1,1,KAGGE,Erling,,,Nor,1/15/1963,Berkner Island,11/18/1992,1/7/1993,50,appr. 1300,n,n,solo,first solo unassisted,
2,2,ARNESEN,Liv,f,,Nor,6/1/1953,Hercules Inlet,11/4/1994,12/24/1994,50,1130,n,n,solo,first woman unassisted,
I'm using this CSV to create a dropdown menu of'starting point' and this filters all 'Name' associated with that 'starting point'
I want to create an additional dataset that will allow me to add some extra details to each 'starting point' such as 'x', like this: (I want to use this to create some svg lines unique to each 'starting point')
var newdata = [
{'starting point': 'Berkner Island', 'x': '1'},
{'starting point': 'Hercules Inlet', 'x': '2'},
{'starting point': 'Ronne Ice Shelf','x': '3'}
];
I am filtering the data like this
var filter = data.filter(function(d) {
return ("Berkner Island" == d['starting point'])
});
updateCSV(filter); // CSV data function
updateNewdata(filter); // Newdata function
When it loads, only the CSV data is filtered. The second dataset 'newdata' loads all entries with no filter applied to it.
https://plnkr.co/edit/TgZxbaPdyERWeaG5i3HX?p=info
My question is, is it possible to use a second dataset, and filter two different datasets by a shared value?
UPDATE
I managed to work it out, and yes it is possible. I wasn't understanding that the callback in the function could have a unique name, and not just 'data'. Once I did this and created two distinct filters for each of my datasets, it worked.
function updateCSV(CSVdata) {
...
.data(CSVdata)
};
function updateNewdata(newdata) {
...
.data(newdata)
};
// FILTER
var filtera = CSVdata.filter(function(d) {
return ("Berkner Island" == d['starting point'])
});
var filterb = newdata.filter(function(d) {
return ("Berkner Island" == d['starting point'])
});
updateCSV(filtera);
updateNewdata(filterb);
I think the issue is here. You're not actually using the data you pass in.
// should this say 'newdata' not 'data'?
function updateNewdata(data) {
var position = canvas
.selectAll(".position")
.data(newdata)
I have setup drag and drop headings to group by the relevant column from jQgrid Grouping Drag and Drop
It works great however I am trying to display the column name before the value i.e.
Client : Test data data
Client : Test2 data data
I've been going around in circles if any one could help.
if i take the same code used for the dynamic group by which should be the (column Name)
I end up with The Column data not the column name.
$('#' + gridId).jqGrid('groupingGroupBy', getheader());
function getheader() {
var header = $('#groups ol li:not(.placeholder)').map(function () {
return $(this).attr('data-column');
}).get();
return header;
}
if i use the same function in group text I get data not the column name.
I've come from C# and I am very new to jQuery.
If any one could help it would be greatly appreciated.
Kind Regards,
Ryan
First of all the updated demo provides the solution of your problem:
Another demo contains simplified demo which demonstrates just how one could display the grouping header in the form Column Header: Column data in the grouping header instead of Column data used as default.
The main idea of the solution is the usage of formatDisplayField property of groupingView which I suggested originally in the answer. The current version of jqGrid support the option. If one would use for example the options
grouping: true,
groupingView: {
groupField: ["name", "invdate"],
groupColumnShow: [false, false],
formatDisplayField: [
customFormatDisplayField,
customFormatDisplayField
]
}
where customFormatDisplayField callback function are defined as
var customFormatDisplayField = function (displayValue, value, colModel) {
return colModel.name + ": " + displayValue;
}
will display almost the results which you need, but it will uses name property of colModel instead of the corresponding name from colNames. To makes the final solution one use another implementation of customFormatDisplayField:
var getColumnHeaderByName = function (colName) {
var $self = $(this),
colNames = $self.jqGrid("getGridParam", "colNames"),
colModel = $self.jqGrid("getGridParam", "colModel"),
cColumns = colModel.length,
iCol;
for (iCol = 0; iCol < cColumns; iCol++) {
if (colModel[iCol].name === colName) {
return colNames[iCol];
}
}
},
customFormatDisplayField = function (displayValue, value, colModel, index, grp) {
return getColumnHeaderByName.call(this, colModel.name) + ": " + displayValue;
};
How to get the name/id of the sort column and the sort-order of the column in slickgrid? I'm able to set the sort column using grid.setSortColumn("column"), and would like to get the sort column and it's sort order.
grid.getSortColumns()
will give you array of objects like this :
[Object { columnId= "ProjectProgram", sortAsc=false}]
You can access it in the callback function to onSort:
var grid = new Slick.Grid("#sf_grid", dataView, columns, options);
grid.onSort.subscribe(function(e, args) {
var sortdir = args.sortAsc ? 1 : -1; //get the sort order
var sortcol = args.sortCol.field; //get the sort column
});
I'm displaying a table with multiple rows and columns. I'm using a JQUERY plugin called uiTableFilter which uses a text field input and filters (shows/hides) the table rows based on the input you provide. All you do is specify a column you want to filter on, and it will display only rows that have the text field input in that column. Simple and works fine.
I want to add a SECOND text input field that will help me narrow the results down even further. So, for instance if I had a PETS table and one column was petType and one was petColor -- I could type in CAT into the first text field, to show ALL cats, and then in the 2nd text field, I could type black, and the resulting table would display only rows where BLACK CATS were found. Basically, a subset.
Here is the JQUERY I'm using:
$("#typeFilter").live('keyup', function() {
if ($(this).val().length > 2 || $(this).val().length == 0)
{
var newTable = $('#pets');
$.uiTableFilter( theTable, this.value, "petType" );
}
}) // end typefilter
$("#colorFilter").live('keyup', function() {
if ($(this).val().length > 2 || $(this).val().length == 0)
{
var newTable = $('#pets');
$.uiTableFilter( newTable, this.value, "petColor" );
}
}) // end colorfilter
Problem is, I can use one filter, and it will display the correct subset of table rows, but when I provide input for the other filter, it doesn't seem to recognize the visible table rows that are remaining from the previous column, but instead it appears that it does an entirely new filtering of the original table. If 10 rows are returned after applying one filter, the 2nd filter should only apply to THOSE 10 rows. I've tried LIVE and BIND, but not working.
Can anyone shed some light on where I'm going wrong? Thanks!
The uiTableFilter plugin doesn't support what you're trying to do. A quick look at the source reveals this:
elems.each(function(){
var elem = jQuery(this);
jQuery.uiTableFilter.has_words(getText(elem), words, false)
? matches(elem)
: noMatch(elem);
});
and that expands to (essentially) this:
elems.each(function(){
var elem = jQuery(this);
jQuery.uiTableFilter.has_words(getText(elem), words, false)
? elem.show()
: elem.hide();
});
So all it does is spin through all the rows, .show() those that match, and .hide() those that don't; uiTableSorter doesn't pay attention to the current shown/hidden state of the rows and there's no way to tell it to filter on multiple columns.
If you really need your desired functionality then you can modify the plugin's behavior (the code is pretty small and simple) or just write your own. Here's a stripped down and simplified version that supports multiple filters and is a more conventional jQuery plugin than uiTableFilter:
(function($) {
$.fn.multiFilter = function(filters) {
var $table = $(this);
return $table.find('tbody > tr').each(function() {
var tr = $(this);
// Make it an array to avoid special cases later.
if(!$.isArray(filters))
filters = [ filters ];
howMany = 0;
for(i = 0, f = filters[0]; i < filters.length; f = filters[++i]) {
var index = 0;
$table.find('thead > tr > th').each(function(i) {
if($(this).text() == f.column) {
index = i;
return false;
}
});
var text = tr.find('td:eq(' + index + ')').text();
if(text.toLowerCase().indexOf(f.word.toLowerCase()) != -1)
++howMany;
}
if(howMany == filters.length)
tr.show();
else
tr.hide();
});
};
})(jQuery);
I'll leave error handling and performance as an exercise for the reader, this is just an illustrative example and I wouldn't want to get in the way of your learning. You could wire it up something like this:
$('#type').keyup(function() {
$('#leeLooDallas').multiFilter({ column: 'petType', word: this.value });
});
$('#color').keyup(function() {
$('#leeLooDallas').multiFilter([
{ column: 'petType', word: $('#type').val() },
{ column: 'petColor', word: this.value }
]);
});
And here's a live example (which assumes that you're going to enter something in "type" before "color"): http://jsfiddle.net/ambiguous/hdFDt/1/
Hopefully this is a quick one!
I have an editable grid using 'clientSide' (local) data and I now wish to iterate all the rows in javascript and process/package the data myself before sending it to the server via a jQuery.ajax call.
The problem is that, unexpectedly (for me at least), using the following code only retrieves the rows for the currently visible grid page! How can I get ALL the rows in the grid (i.e. I have four pages of 10 records each and this code only returns the first 10 when I'm on page 1)? They must be present in the client somewhere because I can page around and edit the rows and the data is persisted without calling the server! :)
cacheCONF = [];
var rows= $('#myGrid').getRowData(); //<--Need to get ALL rows here!!!
var cacheRowID = 0;
for (var row in rows) {
if (rows[row].Action == 'Yes') {
cacheCONF.push({ RowID: rowID, System: rows[row].System, Action: rows[row].Action, Account: '-', Required: '-' });
rowID++;
}
}
Solution from Tony:
var mydata = $("#grid").jqGrid('getGridParam','data');
Had encountered a similar problem, below is what I ended up using
var data = $("#table-id").jqGrid('getGridParam', 'data');
for (var i = 0; i < data.length; i++) {
var f_name = data[i].FirstName;
var l_name = data[i].LastName;
// blah... blah..
}
Reference : http://www.trirand.com/blog/?page_id=393/help/jqgrid-getdata-only-returns-data-for-current-page/