I am using mvc aps.net, I get my data from the model, and when formatting the table I assign the currency format as follows:
<td class="centertext">
#Html.Encode(item.AMOUNT.Value.ToString("C", System.Globalization.CultureInfo.GetCultureInfo("en-us")))
</td>
Trying to use a range_number_slider filter as follows, is unsuccessful.
{
column_number: 5,
filter_type: "range_number_slider"
}
The filter does not appear, if I remove the currency format it works perfect.
Is there a way to do it with the currency format?
With Version: 0.9.4.beta.45
https://github.com/vedmack/yadcf/blob/master/src/jquery.dataTables.yadcf.js
And this:
{
column_number: 5,
filter_type: 'range_number', ignore_char: '\\,|\\$'
}
Works perfectly!
Related
I want to know if its possible to get the rows with empty fields on this columns. I have a fiddle to explain this.
At first column (Status) I have three values (ON, OFF, (EMPTY)). My problem is to get the rows with empty values (Same row as PR00000003, PR00000005) selecting empty value on the filter.
Thanks in advance.
Since there seems to be some sort of issue with yadcf/select2 and empty string for filtering I can suggest the following solutions:
1) Use regex (see this jsfiddle) -
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
filter_type: 'multi_select',
append_data_to_table_data: 'before',
data: [ {value:'^$', label:'Empty' }],
filter_match_mode: 'regex',
select_type: 'select2'
}]);
2) Use datatables HTML5 data-* attributes ,
3) Use Chosen plugin (IMO Select2 fits datatables/yadcf better) instead of select2
see jsfiddle sample
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
filter_type: 'multi_select',
append_data_to_table_data: 'before',
data: [ {value:' ', label:'Empty' }],
filter_match_mode: 'exact',
select_type: 'chosen'
}]);
always bet on yadcf
I need to create a filter on a tipical columns created with images: each field is an image with this format:
<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>
I've created a fiddle example here: fiddle
An explication:
there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).
Thanks in advance.
PD:
I'm getting data from a json, so I can't put:
<td data-search="notassigned">
directly on HTML code. As a solution, I've used createdCell (columnDefs option) as you could see on the next updated to create data-search attribute on td element fiddle.
In this one, as you could test, your previously created filter doesn't work. I've tried some solutions, but no one has worked.
Please help me again on this one. Thanks in advance.
You can make use of the datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data
So your td will look something like
<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>
and yadcf init will look like
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
html5_data: 'data-search',
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}]);
Notice that I used filter_match_mode: 'exact', because I used data-search="notassigned" and data-search="assigned", and since the assigned word included inside notassigned I had to tell yadcf to perform an exact search, this can be avoided if you will use unique search term in your data-search= attribute,
See working jsfiddle
Another solution as introduced by kthorngren from datatables forum is to use the following dt init code
var oTable = $('#example').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, full, meta) {
if (type === 'filter') {
return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
} else {
return data
}
}
}],
});
and yadcf init (removed html5_data)
yadcf.init(oTable, [
{
column_number: 0,
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}
]);
third option - look here
I am trying to use yadcf plugin for multiselect plugin in my datatable since it is flexible to use.It generates dropdown multiselect filter with values available in perticular row. I want to customize this in such a way to pass my own list and values corresponding to same like (list)but not getting how can i do this. If anyone could guide me in this, I will be grateful for you.
{
column_number: 1,
filter_type: "multi_select",
select_type: 'select2',
filter_reset_button_text: false
}]);
You should use the data property
For example
{
column_number: 1,
filter_type: "multi_select",
select_type: 'select2',
filter_reset_button_text: false,
data: ["value1","value2"]
}
Here is small fragment from the docs (you better read more in order to know about yadcf feature)
* data
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
*
I'm trying to sort dates in my datatable like DD/MM/YYYY (day, month, year) .
I was following https://datatables.net/plug-ins/sorting/ .
but all the date sorts seem to be deprecated and point to the datetime plugin: https://datatables.net/blog/2014-12-18
I don't seem to be able to get the datetime plugin working to sort. I tried the old way, with date. The initialize looks like this:
var historiektable = $('#dataTableHistoriek').DataTable({
"paging" : false,
"ordering" : true,
"scrollCollapse" : true,
"searching" : false,
"columnDefs" : [{"targets":3, "type":"date"}],
"bInfo": true
});
Without sorting it shows the table results like this:
When I put ordering:true 2 of the 2016 dates appear somewhere else in the list (so, not in order you would expect)
With everything pointing at Moment I thought I needed to sort with that. But I'm not sure how.
I saw $.fn.dataTable.moment('DD.MM.YYYY'); somewhere, but I understood that the fn doesn't work with this newest version of datatables anymore?
Anyone knows how to sort dates?
Use date-eu sorting plugin to sort dates in the format DD/MM/YY.
Include the following JS file //cdn.datatables.net/plug-ins/1.10.11/sorting/date-eu.js and use the code below:
var historiektable = $('#dataTableHistoriek').DataTable({
"paging" : false,
"ordering" : true,
"scrollCollapse" : true,
"searching" : false,
"columnDefs" : [{"targets":3, "type":"date-eu"}],
"bInfo": true
});
The example of Gyrocode.com seems the most effective. A recent solution says to use Moments.js but it does not work in my case. date-eu is deprecated by DataTables but it works perfectly.
If you want to sort by date and time using the date format dd/MM/yyyy HH:mm, use date-euro in the same way.
var table = $('#example-table').DataTable({
columnDefs: [{ 'targets': 0, type: 'date-euro' }],
order: [0, 'desc'],
});
For beginners, add the JS file date-euro to your site. Then add "columnDefs" in your code to indicate which column date-euro should be applied: targets = indicates the column containing the dates to sort, type = indicates the date-euro function to apply to the column. Finally, add "order" to apply the sort you want.
Please look into this answer for an alternate way to sort data by date.
Sample code::
<td data-search="21st November 2016 21/11/2016" data-order="1479686400">
21st November 2016
</td>
$('#dataTable').DataTable({
"order": [[10, 'desc']],
});
Thank You,
Happy Coding :)
Please refer to this pen: https://codepen.io/arnulfolg/pen/MebVgx
It uses //cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js and //cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js for sorting datatable
To sort the table by default use:
$.fn.dataTable.moment('DD/MM/YY');
$('#example').DataTable({
"order": [[ 3, "desc" ]]
});
Following Plasebo's example works, but in my case the MySQL DATE_FORMAT was sorting on month value, not entire date. My solution was to remove the DATE_FORMAT from my SQL statement.
$(document).ready(function() {
$.fn.dataTable.moment('DD/MM/YY');
$('.happyTable').DataTable({
"ordering": true,
"order": [[ 1, "desc" ]],
});
});
DATE_FORMAT(date,'%m/%d/%Y')
"2003-12-30 00:00:00"
results in "12/30/2003" but sorts on month value.
You can do your own comparator in order to keep the control of how is ordering the dates.
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"ddMmYyyy-pre": function (a) {
a = a.split('/');
if (a.length < 2) return 0;
return Date.parse(a[0] + '/' + a[1] + '/' + a[2]);
},
"ddMmYyyy-asc": function (a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"ddMmYyyy-desc": function (a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
As you can see in the above comparator you can choose how to parse the date depending on your data.
And in the columns definition:
"columnDefs": [
{
targets: [4], type: "ddMmYyyy"
}]
For me, using ASP.NET core 3.1 with MVC, I used a data-sort attribute on my <td> for the datatables:
<td data-sort="#(item.DueDateTime.Ticks)">
#Html.DisplayFor(modelItem => item.DueDateTime)
</td>
No plug-ins needed
See this link:
https://datatables.net/examples/advanced_init/html5-data-attributes.html
There's an ugly hack that I've used in the past especially when I couldn't quickly modify the DataTable javascript. You can add a hidden span that has the date in a sortable format.
<td><span style="visibility:hidden">2006-12-21</span>21/12/2006</td>
test
strong text
$.fn.dataTableExt.oSort['time-date-sort-pre'] = function(value) {
return Date.parse(value);
};
$.fn.dataTableExt.oSort['time-date-sort-asc'] = function(a,b) {
return a-b;
};
$.fn.dataTableExt.oSort['time-date-sort-desc'] = function(a,b) {
return b-a;
};
var table = $('#example').DataTable({
columnDefs : [
{ type: 'time-date-sort',
targets: [0],
}
],
order: [[ 0, "desc" ]]
});
I am having a problem with select type in Yadcf. It does not allow brackets.
I have this code
{
column_number: 9,
filter_type: 'select',
select_type: "select2",
column_data_type: "html",
html_data_type: "text",
filter_match_mode: "exact",
filter_default_label: "Select status",
},
HTML:
<td>Identified (In progress)</td>
So when page is loaded I have the error
Uncaught Error: Syntax error, unrecognized expression: Identified (In progress)
If I remove brackets select filter works fine and if I write
column_data_type: "text",
The error is gone but I can't filter by this value.
You should set the column_data_type to html only when the content of your <td> elements contains html code, for example <td><span>Identified (In progress)</span></td> and then yadcf will extract the Identified (In progress) from your span.
In you example the content of the <td> is a plain text, so you should declare the column_data_type at all because the default value of column_data_type is text , b.t.w the default of the [html_data_type is text]2 , so you shouldn't set its value too.
So just remove the
column_data_type: "html",
html_data_type: "text",
and it should work as expected
Here is a working jsfiddle (using latest beta version)
yadcf.init(oTable, [{
column_number: 0,
select_type: "select2",
select_type_options: {
width: '200px'
},
filter_match_mode: "exact"
}]);
p.s I'm the author of yadcf plugin
Seems like a bug in yadcf.
Try to use filter_match_mode: "contains" and column_data_type: "text", as shown below:
{
column_number: 9,
filter_type: 'select',
select_type: "select2",
column_data_type: "text",
filter_match_mode: "contains",
filter_default_label: "Select status"
},
See this JSFiddle for demonstration.