How can I add custom filter options AND all the other data to a custom function?
Below is my code. I would like to have Yes and No filters, but also filters for all the other values in the column.
{column_number: creator_index,
filter_type: 'custom_func',
custom_func: Creator_Filter_Function,
data: [
{value: 'yes', label: 'Yes'},
{value: 'no', label: 'No'},
],
filter_default_label: "All"
},
You should use the append_data_to_table_data option for your filter
From docs:
append_data_to_table_data
Required: false
Type: string
Default value: undefined
Possible values: before / sorted
Description: Use 'before' to place your data array before the values that yadcf grabs from the table
use 'sorted' to place the data array sorted along with the values that yadcf grabs from the table
Note: 'sorted' option will have affect only if you data is an array of primitives (not objects)
So eventually your code will look like this
{
append_data_to_table_data: 'before',
column_number: creator_index,
filter_type: 'custom_func',
custom_func: Creator_Filter_Function,
data: [
{value: 'yes', label: 'Yes'},
{value: 'no', label: 'No'},
],
filter_default_label: "All"
},
Related
I am having trouble sorting a data table on entry. My code:
$('#CommentsOnAuthors').DataTable({
ajax: {
url: '/authors_comments',
data: {
author_id: "#{author_id}",
book_id: "#{book_id}"
}
},
columns: [
{title: 'Date', data: 'created_at', type: 'date'},
{title: 'Book', data: 'book'},
{title: 'Author', data: 'author'},
{title: 'Comment', data: 'comment'}
],
order: [[1, 'desc']]
});
However, when the page loads, the second column (Book) is sorted in ascending order (and the down arrow for that column is bolded), not the first. If I click on the arrow of the first column (Date), it sorts it properly. I believe I am following the documentation. I would like the table to load, sorted by Date, in descending order. Any ideas?
The columns are zero-based, like arrays. So if you want to sort by the date you need to do
order: [[0, 'desc']]
I'm making use of bootstrap-vue. Within the table component, I want my users to be able to sort values.
I set all the options for that but for some reason, the sorting isn't going as I espected.
I've checked the docs about sorting and set things up. My problem is, is that the following numbers (when sorted descending) are sorted like this:
856.780
832.912
827.873.000
Obviously, the last one is greater than the first two, but for some reason this doesn't work.
Now, the sorting does go right when I loose the punctuation, but that makes an ugly table for numbers.
Again, following the docs (see above) I'm making use of the sort-compare-options prop:
sortOptions: {
ignorePunctuation: true,
numeric: true
}
EDIT
My fields looke like this:
fields: [
{ key: 'name', sortable: true, tdClass: 'table-cell-align' },
{ key: 'revenue', sortable: true },
{ key: 'costs', sortable: true },
{ key: 'result', sortable: true },
{ key: 'margin', sortable: true },
{ key: 'fte', sortable: true },
{ key: 'personell_costs_/_revenue', sortable: true},
{ key: 'other_costs_/_revenue', sortable: true},
{ key: 'revenue_/_fte', sortable: true},
{ key: 'details', sortable: false }
]
[
{
"name": "Medical Tattoo Innovations",
"revenue": "34.254",
"costs": "38.010",
"result": "-4.414",
"fte": "0",
"margin": "0",
"personell_costs_\/_revenue": "0",
"other_costs_\/_revenue": "1",
"revenue_\/_fte": "171.270",
"details": "0"
}
]
But this doesn't do the trick for me.
Any thoughts on this?
827.873.000 is a string in your items data, not a Number (and since it has more than one decimal, the browser String.localCompare(...) method (used internally by b-table) does not see that as a valid number, so sorts it as a String.
You can either convert it to a number beforehand (but loose the extra decimal values), or set up a custom sort compare routine for those field columns.
https://bootstrap-vue.js.org/docs/components/table#sort-compare-routine
Your custom sort compare routine (which compares two rows), would need to deal with splitting the string into numerical parts and sort by those values.
Will be posible, in yadcf multi_select filter, sort possible option with case insensibility?
Here is my fiddle to explain this.
In column STATUS are 4 possible values: "abs", "off", "OFF" and "ON". In dropdown the options appears in this order: "OFF", "ON", "abs", "off". And my desire is the options appears in this order: "abs", "OFF", "off", "ON".
Thanks in advance one more time.
You can provide you own custom sort function, , use the following attributes for the column sort_as: 'custom', sort_as_custom_func: mySort (where mySort is a sorting function, like this
'use strict';
var oTable = $('#example').DataTable();
var mySort = function(a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
};
yadcf.init(oTable, [
{
column_number: 0,
filter_type: 'multi_select',
filter_match_mode: 'exact',
select_type: 'select2',
sort_as: 'custom',
sort_as_custom_func: mySort
},{
column_number: 1,
filter_type: 'text',
}
]);
working jsfiddle
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 using a plugin to create a data table with single row select capability such that when I click anywhere in the row, it links to another page in my web app. I need help figuring out how to disable the select capability on the first column of every row. I've tried using css rules but either they do not work or they are applied to columns other than the first.
Table declaration:
var locationTable = $('#locationTable').DataTable({
dom: 'Brtip',
buttons: [
'excel'
],
select: {
style: 'single'
//selector: ':not(:first-child)'
//selector: ':not(td:nth-of-type(1))'
},
processing: true,
serverSide: true,
ajax: "/locationData",
length: 10,
ordering: false,
"lengthChange": false,
//sDom : '<"top">lrtip',
columns: [
{data: 'locationname'},
{data: 'address1'},
{data: 'address2'},
{data: 'city'},
{data: 'state'},
{data: 'zipcode'},
{data: 'phone'},
{data: 'fax'}
]
});
My attempt to configure selection on every column (of every row) except the first:
//locationTable.select.selector(':not(tr>td:nth-child(1))');
locationTable.select.selector('tr>td:nth-child(2)');
demo
Solution: Add a CSS rule for each column you wish to enable select capability. In the example below, I wish to have select capability on all columns except the first.
select: {
style: 'single',
selector: 'tr>td:nth-child(2), tr>td:nth-child(3), tr>td:nth-child(4), tr>td:nth-child(5), tr>td:nth-child(6), tr>td:nth-child(7), tr>td:nth-child(8), tr>td:nth-child(9)'
}