I'm trying to filter a datatable by setting the search input value to what I want to find:
document.querySelector("#searchinput").value = $whatiwant;
The value is being set successfully, but it doesn't affect the datatable results. I tried to submit it (but it isn't a form, so it did't work) and to simulate the enter key press (but it didn't work either and didn't return any errors). I also tried to use the DataTables filter function, but nothing seems to happen.
After all, what can I do to search/filter a datatable?
You can use Datatables API search()
The global search is performed across all searchable columns
link: search()
Example snippet code:
var table = $('#example').DataTable();
// #myInput is a <input type="text"> element
$('#myInput').on( 'keyup', function () {
table.search( this.value ).draw();
} );
Or use API column().search() for specific column
provides the ability to search globally across the table, this method,
and its plural counterpart, provide the ability to search for data on
a specific column.
link: column().search()
var table = $('#example').DataTable();
// #column3_search is a <input type="text"> element
$('#column3_search').on( 'keyup', function () {
table
.columns( 3 )
.search( this.value )
.draw();
} );
Did you set searching:false in datatable options? you can set searching enable and disable from that option.
datatables searching
You can enable searching by coding as follows. by doing this you don't need to add a separate input to search in datatable.
$('#example').dataTable( {
"searching": true
} );
Related
I want my user's column selections in Datatables to be retained with checkboxes. Datatables saveState does a great job with the table, but my external checkboxes are not in that function.
This image is the desired effect. ( Repeating Button text is unrelated.) These are Bootstrap checkboxes. I'd like when the user comes back and the table saved state is loaded, that the proper boxes are marked showing what other columns are available to show.
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
I started with this code above at Datatables, but I have no idea how to relate the boxes to the stateSave. It there a Datatables solution or am looking for a custom solution?
I am using devextreme dxdatagrid tables. in that case if I am clicking to a row in OnEditorPreparing event to retrieve the data on that row.
function editorPreparing(e) {
console.log(e.row);
}
when I clicked the row and use e.row, I can easily get what is the value in the row.
However when using
console.log(e.row.data);
I get an error such
Is there any way to retrieve the row values.
I am not sure why you use onEditorPreparing event to get the row data, I would use onRowClick instead, you can see it in the example below:
onRowClick: function (e) {
console.log(e.data);
}
I have to change in one function, after the initialization of a datatable, bSearchable property of a column. I need first to enable and then disable it.
I found an example for visibility:
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
Can something similar be used also in my case? Something like column.seachable?
This is an old question, but one that cost me several hours to research the answer to... mostly based on my lack of JS skill though.
The usecase was that I have a table with an ID column that is a GUID. This Id is seldom used uses a lot of space, so it's hidden and not searchable by default. But for internal users who might have access to logs or the database, we need to be able to search the ID column as well.
I added a checkbox for these users and it should change visibility and the searchable attribute of the ID column.
My solution is based on another question regarding searching on columns. But in this question, the search was only intended on one single column and not on all searchable columns as well (normal DataTable.search() API). Sadly, to change the searchable property, there seems to be no public API. If you change the searchable property, you have to invalidate the data in the table afterwards, otherwise the columns data will still be / not be present in the tables aoFilterData. This forces the table to reload the data from the datasource (in this case, the DOM).
I had a lot of problems with registering the eventhandlers at the right place. The filter field is not present at the first draw event of the table, so i had to register the handlers in the init event that is fired after the table is fully initialized.
var userTable;
var idSearchCbx;
var searchField;
$(document).ready(function () {
userTable = document.getElementById("table-users");
if (userTable) {
userTable = $("#table-users").DataTable(
{
"columnDefs": [
{
//First column invisible and not searchable by default
"targets": [0], //first column = ID
"visible": false,
"searchable": false
}],
//Other initialization options
); //Table creation
userTable.on("init",
function () {
$("input[type='search']").on("change cut input keypress keyup paste search recheck",
function () {
var searchValue = $(this).val();
userTable.search(searchValue).draw();
//width attribute is calculated and added to the table
//it loses 2 pixels everytime the checkbox is checked/
//unchecked somehow - so delete it
document.getElementById("table-users").removeAttribute("style");
});
idSearchCbx = $("#cbx-search-id");
idSearchCbx.on("change",
function () {
if (this.checked === true) {
//this makes the first column searchable, not official API
userTable.context[0].aoColumns[0].bSearchable = true;
//make it visible as well, official API
userTable.columns(0).visible(true);
//invalidates cached table data so that the column values are
//added to the filterdata
userTable.rows().invalidate().draw();
} else {
userTable.context[0].aoColumns[0].bSearchable = false;
userTable.columns(0).visible(false);
userTable.rows().invalidate().draw();
}
//trigger the normal search again so that the
//filter is / is not applied to the first column
$("input[type='search']").trigger("recheck");
});
}); //DT on init
} //table present
});//document ready
I assume context is related to settings(), so keep in mind that names in the context might change and this is most likely not version-stable even in minor releases. But I didn't find any other way. Hope it helps someone.
I'm trying to use an external checkbox to filter the table based on the contents of a column. The only related questions/solutions I've found are dealing with checkboxes inside the table used for sorting purposes.
Desired Functionality: For the sake of simplicity, let's say column 4 contains either a 0 or 1. When this external checkbox is checked, I'd like it to filter the results (where column 4 contains the value 1).
Working Alternative: When using an external select (dropdown), I can achieve the desired functionality. The select element (<select id="test_select" name="test_select" class="search" data-column="4">) has an option (<option value="1">1</option>) and then, inside the "widgetOptions" configuration, have filter_external: '.search'.
But a having a select with one option doesn't make sense as far as usability is concerned.
Any suggestions?
Use the "search" method to perform any queries on the table data.
Here is an example
HTML
<label><input id="findzeroes" type="checkbox"> Find Zeroes</label>
Script
$(function() {
$('#findzeroes').on('change', function(){
var query = [];
if (this.checked) {
// target 4th column (zero-based index)
query[3] = '0';
}
$('table').trigger('search', [ query ]);
});
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'filter']
});
});
Using a <select> instead of a checkbox will also work.
I wanted to turn a multiple column filter on and off with a checkbox, but found #Mottie's answer didn't do the trick because it doesn't allow for filter_external and data-column="7,8" type filtering.
So I just created a hidden field which has the data-column="7,8" attribute and use jQuery to change its value when the checkbox is changed, and also to trigger a keyup event.
$('#checkboxId').on('change', function(){
var filterTerm = $(this).prop('checked') ? '?' : ''
$('#hiddenFieldId').val(filterTerm).keyup()
})
I use a filter value of '?' which is a non space character, that could be anything you'd type into a normal filter field.
This is kind of a strange question, but this requirement came up about showing only those values inside a table which were selected using a dropdown list, I used dataTable plugin to display this data and to achieve the requirement I used the search[Filter plugin] feature. So whenever I selected any value from my dropdown list I entered it in the search input tag of dataTable. However, filtering of the data would not occur unless I changed the added data myself.
Have used the following script to add the selected value in the search box of DataTable; this function is triggered using onchange in the HTML tag:
function changeService(val) {
var service = val;
$('#example_filter').find('input').val(service);
}
This function adds the value in the required search input tag - I can see the value in the textbox; but the data within the dataTable is not filtered until I change this...
Instead of trying to hack around the ui, why not use the DataTables api for this:
http://datatables.net/api#fnFilter
So when you're dropdown list changes, you could call the fnFilter function on your datatable:
$('#dropdownlist').on('change', function() {
var val = $(this).val();
var dataTable = $('#table').dataTable();
dataTable.fnFilter(val);
});