I am using codes as below in my project for range dates
var datepickerDefaults = {
showTodayButton: true,
showClear: true
};
yadcf.init($Table, [{
column_number: 0,
filter_type: "range_date",
datepicker_type: 'bootstrap-datetimepicker',
date_format: 'DD/MM/YYYY',
filter_plugin_options: datepickerDefaults,
filter_container_id: "FilterContainer_Date",
} ],
{
cumulative_filtering: true
}
);
I would like to change date range filter from and to input place holder text and I would like assign default value for from and to inputs.
OK. I found solution as below;
yadcf.init($Table, [{
column_number: 0,
filter_type: "range_date",
datepicker_type: 'bootstrap-datetimepicker',
date_format: 'DD/MM/YYYY',
filter_plugin_options: datepickerDefaults,
filter_container_id: "FilterContainer_Date",
filter_default_label: ["From Date", "End Date"]
}],
{
cumulative_filtering: true
}
);
yadcf.exFilterColumn($Table, [
[0, {
from: '01/12/2017',
to: '31/01/2018'
}],
]);
Related
I have been using dataTables+yacdf+select2 combination successfully for quite a while. Now I am working on converting my select2 to be an ordered indented drop-down list with optgroup selectable as well (https://select2.org/options, "Hierarchical options", Selectable optgroups in Select2).
However with yacdf I can not seem to pass data to select2 in the hierarchical format like the one below:
var data = [
{
"text": "Group 1",
"children" : [
{
"id": 1,
"text": "Option 1.1"
},
{
"id": 2,
"text": "Option 1.2"
}
]
},
{
"text": "Group 2",
"children" : [
{
"id": 3,
"text": "Option 2.1"
},
{
"id": 4,
"text": "Option 2.2"
}
]
}];
Previously the working code was:
.yadcf([{column_number: 1, filter_type: "multi_select", select_type: 'select2', filter_container_id: "someFilter2", filter_default_label: "Select xxx", filter_reset_button_text: false, style_class: "form-control",
select_type_options: {
multiple: 'multiple',
width: '100%',
placeholder: 'something',
},
data: [<comma separated list of values>]
yacdf source code states that:
Required: false
Type: Array (of string or objects)
Description: When the need of predefined data for filter is needed just use an array of strings ["value1","value2"....] (supported in select / multi_select / auto_complete filters) or array of objects [{value: 'Some Data 1', label: 'One'}, {value: 'Some Data 3', label: 'Three'}] (supported in select / multi_select filters)
Note: that when filter_type is custom_func / multi_select_custom_func this array will populate the custom filter select element
"
Is it really not possible?
If not anybody managed to get nested dropped down filters work with dataTables any other way?
You should use the data_as_is: true , read docs for more info
data_as_is
Required: false
Type: boolean
Default value: false
Description: When set to true, the value of the data attribute will be fed into the filter as is (without any modification/decoration).
Perfect to use when you want to define your own for the filter
Note: Currently supported by the select / multi_select filters
I have a database field that contains either integer 1 (representing the value 'document') or integer 2 (representing the value 'email') and I use datatables to format/display these integers as the words 'document' or 'email' within the table column. I would therefore like to use YADCF to be able to select 'document' or 'email' and have datatables filter the resultset accordingly.
Link to screen shot of table column.
I have used the custom_func feature as follows (code stripped down for brevity), but regardless of all other aspects of the datatable looking and working correctly, with a filter selector looking as expected and holding the selected value, and no console errors, my custom function is not being called. I have tried manually calling the custom function immediately before initialising YADCF, to check the scope, and it is being called just fine. Can anyone see anything obviously wrong please?
$(document).ready(function() {
function customFilterDocEmail(filterVal, columnVal) {
alert('customFilterDocEmail called');
var found;
if (columnVal === '') {
return true;
}
switch (filterVal) {
case 'doc':
found = columnVal === '1';
break;
case 'email':
found = columnVal === '2';
break;
default:
found = 1;
break;
}
if (found !== -1) {
return true;
}
return false;
}
})
var table = $('#table').DataTable({
serverSide: true,
processing: true,
ajax: {
url: '/api/datatables/getJson/doctext/doctexts',
type: 'POST',
data: function(d) {d.CSRFToken = '****';}
},
stateSave: true,
responsive: true,
pageLength: 25,
order: [[0, 'asc']],
columns: [
{ data: 'txt_type', width: '10%' },
{ data: 'txt_title' },
{ data: 'txt_name', width: '20%' },
{ data: 'link', orderable: false, width: '5%' },
],
}
});
yadcf.init(table, [
{ column_number: 0, filter_type: 'custom_func', custom_func: customFilterDocEmail,
data: [{ value: 'doc', label: 'Document' }, { value: 'email', label: 'Email' }] },
{ column_number: 1, column_data_type: 'text', filter_type: 'text', filter_delay: 500, filter_default_label: '', },
{ column_number: 2, column_data_type: 'text', filter_type: 'text', filter_delay: 500, filter_default_label: '', },
], 'footer');
YADCF Version: 0.9.3.beta.11
DataTables Version: 1.10.16
UPDATE: I haven't a clue what I'm doing wrong above, but I have come up with a little hack that saves having to use 'custom_func' and a custom filter. I've used the standard 'select' filter type but intercepted the filter string within the filter() method of my DatatablesSSP script thus:
$str = $requestColumn['search']['value'];
// returned search values for doctext 'txt_type' are Document/Email, so we need to map these to 1/2.
if ($column['db'] == 'txt_type') {
if ($str == 'Document') { $str = '1'; }
if ($str == 'Email') { $str = '2'; }
}
This works a treat :)
You have to place the customFilterDocEmail function outside of the $(document).ready block so it will be global and yadcf will see it
Currently I'm using DataTables in each page initializing them individually like this.
var table = $('#' + '<%= gvReports.ClientID %>').DataTable({
"responsive": true,
"bAutoWidth": true,
"oLanguage": {
"sSearch": "Search Table: ",
"sSearchPlaceholder": "Search records",
"sEmptyTable": "No data available to display"
},
"columnDefs": [
{
"targets": [0],
type: 'natural-nohtml'
}
],
"sScrollY": "55vh",
"scrollCollapse": false,
"pagingType": "full_numbers",
"lengthMenu": [[25, 50, 100, 150, 200], [25, 50, 100, 150, 200]]
});
When I tried to create a generic JQuery method to use in multiple places the type attribute in columnDef is not working properly
"columnDefs": [
{
"targets": [0],
type: 'natural-nohtml'
}
],
Im using NatualSort plugin to sort the data as the column '0' contains alphanumeric data.
Is there a way i can set the columnDefs dynamically? or to set the ColumnDef Type for Column(0) after I initialize the table?
Something Like
table.column("0:visible").Type('natural-nohtml');
Any help is appreciated? I want to know if I'm thinking in right way?
There is no way that you can manipulate columnDefs after the dataTable is initialised. However, when you basically just want to set natural-nohtml as type for the first column for any dataTable, then you could simply extend $.fn.dataTable.defaults. Declare this before you initialise any dataTable :
$.extend( true, $.fn.dataTable.defaults, {
columnDefs: [
{ targets: [0], type: 'natural-nohtml' }
]
} );
This will set any dataTables' first column to type natural-nohtml.
am using yadcf with Datatable
javaScript:code
$(document).ready(function () {
$.ajax({
url: 'data.asmx/getData',
method: 'post',
dataType: 'json',
success: function (data) {
$("#tableDiv").show();
var t = $('#studentDataTable').DataTable({
data: data,
'columns': [
{
data: null
render: function (data, type, row)
{
return data['fname']+' '+data['mname']+' '+ data['lname'];
}
},
],
});
yadcf.init(t,
[
{
column_number: 0,
filter_type: "auto_complete",
}
'footer',
{
cumulative_filtering: true,
}
);
t.draw();
}
});
});
but When i type any data in the text box its not searching it.
I also tried Select filtering type that also not working,select box stays empty apart from default label.
anyone knows whats the Problem ?
Grab the 0.9.0.beta.12 and use column_data_type: rendered_html for the filter, see docs
{
column_number: 0,
column_data_type: rendered_html,
filter_type: "auto_complete",
}
As to your range slider - the following setup should be used (notice the ignore_char / filter_plugin_options
{
column_number: 2,
filter_type: "range_number_slider",
ignore_char: "%",
filter_plugin_options: {step:0.01}
}
see working jsfiddle
If that won't help, provide a jsbin sample with your issue
What I want is to get row data when users click on the table's tbody but I keep getting undefined for these datatables functions.
Data comes from a node-mysql module. And for testing purposes, after the table is initialized and data's propertly arrived I've set:
"fnDrawCallback" : function() {
console.log('this:' + this);
console.log('oTable.fnGetData():' + oTable.fnGetData());
console.log('JSON.stringify(oTable.fnGetData():' + JSON.stringify(oTable.fnGetData()));
console.log('JSON.stringify(oTable.fnGetData():' + JSON.stringify(oTable.fnGetData()[0]));
console.log('oTable.fnGetData()[0]:' + oTable.fnGetData()[0]);
},
The result is this:
this:[object Object] tables_offline.js:40
oTable.fnGetData():[object Object],[object Object],[object Object] tables_offline.js:41
JSON.stringify(oTable.fnGetData():[{"id":1,"age":"23","vol":26227,"tlg":4.93,"r":18.15},{"id":2,"age":"13","vol":6378,"tlg":3.97,"r":16.76},{"id":3,"age":"54","vol":131626,"tlg":6.49,"r":11.1}] tables_offline.js:42
JSON.stringify(oTable.fnGetData()[0]:{"id":1,"age":"23","vol":26227,"tlg":4.93,"r":18.15} tables_offline.js:43
oTable.fnGetData()[0]:[object Object]
It's not an array... Maybe this is the weird thing.
I've tried debugging with chrome, setting
$('#myTable').on('click', 'tr', function(){
var oTable = $('#myTable').DataTable();
debugger;
});
And here's a screenshot of what's coming from the variable oTable. I'm not sure but shouldn't I be able to see the functions right there? I can't query something like oTable.fnGetData() 'cause it's undefined.
Let me know if you need something else from my side in order for you to help me.
EDIT
What I want basicaly is to get row data when users click on the table's tbody. I can't get there since oTable = $('#myTable').DataTable(); oTable.fnGetData()' throws undefined.
I'll try to clarify a bit more.
tables_offline.js is the file that loads the datatable, there I define my oTable variable. While searching for help I came across this post (I'm using mData for the columns definition) and I'm not sure if this is the case but it may help.
I make use of fnDrawCallback just for testing oTable in the console, it's not part of the original code.
var oTable = $("#myTable").dataTable({
'fnServerParams': function (aoData) {
aoData.push({ "name": "startDate", "value": startDate });
aoData.push({ "name": "endDate", "value": endDate });
},
'sAjaxSource': '/url',
'sAjaxDataProp': '',
'bProcessing': true,
'sDom':'t',
"aoColumns": [
{ "bVisible": false, "mDataProp": "pcrc_id"},
{ "sWidth": "25%","sTitle": "age", "mDataProp": "pcrc"},
{ "sWidth": "25%","sTitle": "Vol", "mDataProp": "volumen"},
{ "sWidth": "25%","sTitle": "tlg", "mDataProp": "tlg"},
{ "sWidth": "25%","sTitle": "r", "mDataProp": "reitero",
"mRender": function ( data, type, full ) {
return data + '%';
}
}
],
"oLanguage": {
"sUrl": "/javascripts/i18n/dataTables.Spanish.json"
},
"aaSorting": [[ 0, "desc" ]],
"bSort": false,
"bInfo" : false,
"bPaginate": false,
"fnDrawCallback" : function() {
console.log('this:' + this);
console.log('oTable.fnGetData():' + oTable.fnGetData());
console.log('JSON.stringify(oTable.fnGetData():' + JSON.stringify(oTable.fnGetData()));
console.log('JSON.stringify(oTable.fnGetData()[0]:' + JSON.stringify(oTable.fnGetData()[0]));
console.log('oTable.fnGetData()[0]:' + oTable.fnGetData()[0]);
},
"bFilter": false
});
EDIT 2
New screenshot after accesing oTable when a row's clicked. If I dig deep into context I see the data but it's the full thing, not just the row clicked. I'd like to use a function to get clicked row data.
Remove the fnDrawCallback stuff, I think it's distracting you from the actual problem.
Try this:
var oTable = $("#myTable").dataTable({
'fnServerParams': function (aoData) {
aoData.push({ "name": "startDate", "value": startDate });
aoData.push({ "name": "endDate", "value": endDate });
},
'sAjaxSource': '/url',
'sAjaxDataProp': '',
'bProcessing': true,
'sDom':'t',
"aoColumns": [
{ "bVisible": false, "mDataProp": "pcrc_id"},
{ "sWidth": "25%","sTitle": "age", "mDataProp": "pcrc"},
{ "sWidth": "25%","sTitle": "Vol", "mDataProp": "volumen"},
{ "sWidth": "25%","sTitle": "tlg", "mDataProp": "tlg"},
{ "sWidth": "25%","sTitle": "r", "mDataProp": "reitero",
"mRender": function ( data, type, full ) {
return data + '%';
}
}
],
"oLanguage": {
"sUrl": "/javascripts/i18n/dataTables.Spanish.json"
},
"aaSorting": [[ 0, "desc" ]],
"bSort": false,
"bInfo" : false,
"bPaginate": false,
"bFilter": false
});
oTable.$('tr').click( function () {
var data = oTable.fnGetData( this );
console.log(data);
} );
Note that the oTable var is still in scope so you don't need to use var oTable = $('#myTable').DataTable().
This example is copied verbatim from the Datatables API documentation