I'm working with DataTables and i'm trying to search a result in a table with a dropdown. But rather than searching one column, I need to search in two specific columns.
The below syntax works with a single column but how do i do it with multiple columns?
var table = $('#example1').DataTable();
$("#filter").on('change', function() {
table.column([4]).search($(this).val()).draw();
});
I tried doing this but when i use this code it only searches the result in the first column, E.g. 4th Column. and ignores the rest.
table.column([4,5]).search($(this).val()).draw();
What is the proper method for this?
Lets summarize all things here. It will help other people as well.
You can achieve this as follow:
table.column(4).search(this.value).column(5).search(this.value).draw();
It will perform search on 4 column (4 is index of column), after that it will filter data from 5 column against provided filter value and at the end it will draw the table.
One thing to keep in mind is that Filter is applied on both columns, so both columns must contains matching data.
Here is its filddle
This can be achieved by using fnMultiFilter as it documentation explains:
This plug-in adds to DataTables the ability to set multiple column filtering terms in a single call (particularly useful if using server-side processing). Used in combination with the column sName parameter, simply pass in an object with the key/value pair being the column you wish to search on, and the value you wish to search for.
Use columns() in place of column():
var table = $('#example1').DataTable();
$("#filter").on('change', function() {
table.columns([4,5]).search($(this).val()).draw();
});
From the doc, you should be using .columns() (note the plural)
For an OR search among multiple columns, disable columns for the search using
columns.searchableSince: Enable or disable search on the data in a certain column.
Alternatively, you can also use an HTML attribute to remove the column from the search
<th data-searchable=false>
Related
As we have find and replace logic in Excel and many other documents, how to implement the same using Handsontable? I tried to find the same in the Handsontable site but could not find. All i could find was "search" using searchbox.
Im new to Handsontable. Any help on this would be great.
You can easily reuse the search function already present in the Handsontable documentation example for the first part of the problem.
You then have to add a field where you can put the value you want to replace the cells that have been match, and use the below simple function to replace those values by the new one :
Handsontable.dom.addEvent(Replace, 'click', function() {
// Replace the value of every cell that have been match by the search query
for (row = 0, r_len = queryResult.length; row < r_len; row++) {
hot.setDataAtCell(queryResult[row].row, queryResult[row].col, replace);
}
// Reset all the fields
SearchField="";
ReplaceField="";
queryResult="";
document.getElementById('Search').value='';
document.getElementById('ReplaceWith').value='';
});
See this working jsFiddle example.
Adding to https://stackoverflow.com/a/50228873/9230481
Note that this fail if you enable any form of sorting or filtering (e.g. columnSorting: true) because the matches in „visual indices“, which change after sorting. To solve this you need map the indices to physical ones right after the search finished. See https://handsontable.com/docs/api/core/#tophysicalrow and https://handsontable.com/docs/api/core/#tophysicalcolumn
In the replace function you need to map physical indices back to visual indices as setDataAtCell expects visual indices: https://handsontable.com/docs/api/core/#setdataatcell
I have a tablesorter, with 2 filter Columns. The first Filter works as a drop down and has no issues right now. The second filter is intended to be a full table search and filter mechanism.
That is to say, even though it is associated with the computer column, it should return results for child rows as well
The Computer Filter should respond to all child rows. For instance, if I searched for z840, , only Computers with Model z840 should appear.
However, I have a custom secondary filter mechanism by request The gauge at the top, works as a filter for workgroup
However, If I am filtered in a workgroup, and use the Computer Filter, it ignores the custom hidden rows, and searches against any row in the table. (Child Row Searching works fine).
My Question is, Is there a way to overwrite the functionality of the filter, to ignore any rows that are already satisfying some condition IE: $(row).hasClass('hide')
I have tried using filter_functions but every result ends up searching on computer name only
I am using Jinja Templating so it was a little hard to get a fiddle up and running but here is a sample.
http://jsfiddle.net/brianz820/856bzzeL/813/
Sort by wg02 (at top, no results), and then use the computer filter to search for say, 3.3. No results show up, but once you delete the search, the original workgroup filter is removed.
On my production copy, even typing 3.3 would have returned results for any workgroup, ignoring the filter.
There may be lots of extraneous code on Fiddle, just wanted to get a working version up
Thanks for reading, Goal to maintain free form child searching and filtering on filter selection, but maintain external hidden rows.
if there is any more required information please let me know
I'm not exactly sure if this is what you meant, but the hideRows function can be simplified by using the filter widget (demo):
function hideRows() {
var $table = $('.tablesorter'),
filters = $.tablesorter.getFilters( $table );
filters[2] = selected === 'All' ? '' : selected;
$.tablesorter.setFilters( $table, filters );
}
I am using the DataTables API for my table in the application. I have a scenario where I want multiple columns be enabled for filtering purpose.
I have this code setup now. But it only searches for Column2. Even if I enter value for Column1 it doesn't search.
$('#btnFilter').click(function () {
table.fnFilter($('#Column1').val());
table.fnFilter($('#Column2').val());
});
i guess fnFilter will also accepts iColumn paramter
so try using like this
table.fnFilter($('#Column1').val(), 0); //0 is the first column
table.fnFilter($('#Column2').val(), 1);
I am using jQuery DataTables 1.10.3 to create a table with JSON data fetched from a web service. The data is linked to other elements on the page of my application such that when a user selects data points in one element, the DataTable should update and 'select' the complimentary rows (simply by adding the active class to the rows <tr> tag). Given the documentation, it would appear that this could be easily accomplished with something like this:
var table = $("#my-table").DataTable();
table.rows().each(function(r){
if (r.data().category == 'XYZ'){
r.node().to$().addClass("active");
}
});
But this does not work, since .rows() returns an array of row indexes instead of row objects. Instead, I have implemented this:
var table = $("#my-table").DataTable();
table.rows().indexes().each(function(i){
var r = table.row(i);
if (r.data().category == 'XYZ'){
r.node().to$().addClass("active");
}
});
This works, but is incredibly slow, considering the relatively small number of records in the table (~3 seconds for 3000 rows). Is there a better way to iterate through DataTable rows that I am missing? Or is it possible to make a row selection based on data values? Are the documents incorrect about .rows() returning API objects?
Well, I found an answer to my second question:
Or is it possible to make a row selection based on data values?
var table = $("#my-table").DataTable();
table.rows(function(idx, data, node){
return data.category == 'XYZ' ? true: false;
}).nodes().to$().addClass("active");
This run almost instantly, so it handles my use case, but I'd still like to know what the best way is to iterate through rows in a more general way.
I have a problem with sorting and filtering html table.
I use jQuery propdown Table Filter plugin
and it works perfectly well for me, but,
For now it looks like this:
But problem is i also need sort my table by values (A-Z/Z-A), and I'm not strong via JQuery to re-write this plugin. It must look like this (add sorting options to select):
Can you give me direction, where I can look? I find a lot of jQuery plugins, but none did what I need.
have you perhaps thought of using JQuery Datatables??
They are really easy to use and you can sort your columns and filter the data (search box performs filter on all columns based on input text) by default.
http://www.datatables.net/
For the Above sorting you can check ascii value of the character and then sort the character according to it.
For the NON English character, find the ascii value and then sort it.
For e.g.
"ABCDEF".charCodeAt(0) // return 65
Same way for
"CÃNT".charCodeAt(1) // return 195
May this will help you