I am loving this yadcf plugin an all its options. But for some reason, I cannot get it to filter my data. I want to type in data and have it filter on the fly. I have looked through all the examples on the yadcf site and followed them to the best of my knowledge. I am using JQuery 2.1.4, DataTables 1.10.10, and yadcf 0.8.9.beta.26.
Here is my relevant javascript:
$(document).ready(function() {
'use strict';
var table = $(".stocks").DataTable({
paging: false,
searching: false,
info: false
});
yadcf.init(table, [
{
column_number : 4,
filter_container_id: 'industrySearch',
filter_default_label: "Type industry",
filter_type: "text",
text_data_delimiter: ","
}]);
Let me know if any other code is needed.
You must remove the searching: false, from your datatables init code.
Setting searching to false disables datatables searching abilities, and since yadcf uses datatables search api under the hood that it wont work.
Read here more about this option
Related
I have implemented jQuery Datatable Grid in Angular 13. But when I delete record and datatable is refreshed. then below error occurs.
DataTables warning: table id=DataTables_Table_1 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
Any Solution for this ??
After struggling for many hours, I found solution for this.
just add destroy:true in this.dtOptions = {} like below
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
scrollX: true,
processing: true,
deferRender: true,
destroy:true
};
Error will be fixed. Thanks
Having same issue as in thread below but I didn't want to comment on a 2 year old question.
yadcf - custom_select selectize bizarre behavior
I am using yadcf filter type multi select and I am trying to Initialise bootstrap_select as a custom_ select plugin. The custom select is being created fine but I am having the following issues: On page load it looks like this. When you select an option, it duplicates the two list boxes each time like this. See code below. Note: I am using the most recent version of yadcf.
var _bootstrapselect;
yadcf.initSelectPluginCustomTriggers(
function ($filterSelector) {
_bootstrapselect = $filterSelector.selectpicker({});
},
function ($filterSelector) {
_bootstrapselect.selectpicker('refresh');
},
function ($filterSelector) {
_bootstrapselect.selectpicker('destroy');
});
Is there any solution to this issue or is it yet to be resolved.
I was able to solve this myself. See below for anyone trying to use bootstrap_select with yadcf custom_select.
Initialise initSelectPluginCustomTriggers like below.
var _bootstrapselect;
yadcf.initSelectPluginCustomTriggers(
function ($filterSelector) {
_bootstrapselect = $filterSelector.selectpicker({});
},
function ($filterSelector) {
_bootstrapselect.selectpicker('refresh');
},
function ($filterSelector) {
_bootstrapselect.selectpicker('destroy');
});
And for your column using multi_select, have as below:
yadcf.init(table, [
{
column_number: 0,
filter_container_id: 'external_filter_container_0',
filter_type: 'multi_select',
select_type: 'custom_select',
style_class: 'selectpicker',
filter_default_label: 'Filter Value',
filter_reset_button_text: false,
}
]);
I was just missing the style class 'selectpicker' in column 0. Silly.
See here for more bootstrap-select methods that can be used in the initSelectPluginCustomTriggers for init, refresh and destroy functions.
I'm having issue when search text box are in the footer position. The search box is not functional when setting filters_position: 'footer' to yadcf. When setting is removed the text search box do there thing. Anything else I need to do? Thanks in advance and Awesome plug-in.
https://jsfiddle.net/4hqm9tsh/2/
Setting scrollX: to false I'm now able to search with in the column. I'm hoping to keep this true.
{
column_number: 6,
filter_default_label: "",
filter_type: "text",
style_class: 'yadcf-sb',
filter_delay: 1000,
filter_reset_button_text: false
},
],
{ filters_position: 'footer' }
It was a bug in yadcf which I just fixed and released in new 0.9.3.beta.8,
see it in action here
If you will encounter this in other filter type please open a bug in yadcf repository.
It seems that specifying scrollY in the DataTables settings is causing the footer not to filter anything. Needs fixing.
I am creating the dojo Grid as below and I am using the indirectSelection plugin for creating a checkbox, as below, but by default the checkboxes will come at the first column of the grid. How do I make it to come at the last column?
var grid = new dojox.grid.EnhancedGrid({
id: 'serialsGrid',
style: 'width:auto;height:250px;',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
indirectSelection: {name:'Requested',headerSelector:true, width:"40px", styles:"text-align: center;"},
pagination: {
pageSizes: ["25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
}
}
}, document.createElement('div'));
/*append the new grid to the div*/
//var temp=grid.domNode;
dojo.byId("serialsGridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
serialsGridCopy=grid;
grid.startup();
});
The plugin itself has no capabilities of doing so as far as I know so I started looking at the functions the EnhancedGrid itself has and stumbled upon the function moveColumn() in grid.layout.
The documentation itself (here) was not really usefull, but I used it to move every column one position ahead so that the first column would become the last one.
I also made a working JSFiddle to demonstrate which you can see here. The code that is moving the columns can be found at the bottom of the code:
for (var i = 1;i < grid.layout.cells.length;i++) {
grid.layout.moveColumn(1, 1, i, i-1, grid.layout);
}
What it does is the following: it moves every column starting from index 1, so that means all columns except the indirectSelection column one step ahead (i-1).
I cannot make it to work properly.
I need on initial load to have my table sorted by 0-index column in 'desc'.
I've tried:
$(function() {
ordersTable = $('#orders').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": 'full_numbers',
"bDestroy": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "{% url get_orders %}",
"aoColumnDefs":[
{"aTargets":[0], "asSorting": ["decs", "asc"]}
]
});
and what it does is sends "sSortDir_0 :'asc'" and displaying "asc" active after that.
How can it make it work? (without faking click on the column to resend the ajax)
Thanks
Ok, I guess I've found it: aaSorting and aaSortingFixed sets the initial sorting. (reference here)