I've an issue with the option ScrollY in the two plugins YADCF 0.8.9 and DataTable 1.10.
I try to add some filters on my headers and to activate the option ScrollY but :
- With the option scrollY, I've no filter
- Without : works fine ! (obviously without "max height 400 px"
What can I do ?
JS :
var tableDataTbl = $("#MyDataTableTest").DataTable({
language: {
url: '/js/DataTables/fr_FR.json'
},
scrollY: 400,
paging : false,
scrollCollapse: true,
stateSave: true
});
yadcf.init(tableDataTbl,
[{
column_number: 0,
filter_type: "text"
}, {
column_number: 1,
filter_type: "range_number"
}, {
column_number: 2,
filter_type: "range_number"
}, {
column_number: 3,
filter_type: "range_number"
}, {
column_number: 4,
filter_type: "range_number"
}, {
column_number: 5,
filter_type: "range_number"
}, {
column_number: 6,
filter_type: "text"
}, {
column_number: 7,
filter_type: "text"
}]
);
This was fixed in 0.9.2.beta.2
see test page
It was an because of the language: {url: '...'}, and the scrollY: ..., were used together, anyway - it works now
Related
Datatables allows you to use shift+select, while also allowing you to select single items without losing previously selected items by having the select style set to multi+shift.
'select': {style': 'multi+shift'}
However, for this datatable, that doesn't seem to work at all. What am I missing?
var $testTable = $("#test-list").DataTable({
"dom": '<"dataTables_top"i<"dataTables_custom_buttons">f>rt'+ '<"dataTables_bottom"ilp>',
"autoWidth": false,
"lengthChange": 100,
"lengthMenu": [[10, 25, 100, 200, 500, 1000], [10, 25, 100, 200, 500, 1000]],
"paging": true,
"pagingType": "full_numbers",
"stripeClasses": [ 'odd', 'even' ],
"order": [[1, 'asc']],
"language": {
"emptyTable": '<h3>Test...</h3>',
"search" : '',
"sLengthMenu" : "_MENU_ Per Page",
"info": "Showing _START_ to _END_ of _TOTAL_",
paginate: {
first: '<i class="fad fa-step-backward"></i>',
previous: '<i class="fad fa-backward"></i>',
next: '<i class="fad fa-forward"></i>',
last: '<i class="fad fa-step-forward"></i>'
}
},
'select': 'multi+shift',
"aoColumnDefs": [
{
"targets": [-1,-2,-3,-4,-5,-6,-7,-8,-9,-11],
'searchable': false
},
{
"targets": 'no-sort',
"orderable": false,
},
{
"targets": [8,11],
"visible": false
},
{
"iDataSort": 8,
"aTargets" : [7]
},
{
"iDataSort": 11,
"aTargets" : [10]
},
{
"targets": -1,
'searchable': false
}
],
"initComplete": function() {
......
},
"drawCallback": function(settings) {
......
}
});
Have a table with some data loaded from server by provised ajax to DataTable, also have yadcf for filtering on server side. In one of columns i have select2 box, in what i want see only predefined (loaded from server) options (in example on jsfiddle it is opt variable), but options in select2 contains also data from column. How i can disable adding column data, and stay only loaded from server options?
https://jsfiddle.net/6ssh8mg4/
code:
var opts = [{id:0, text:"Some 1"},{id:1, text:"Some 2"}];
var table = $("#docTable").DataTable({
processing: true,
serverSide: false,
paging: true,
ordering: true,
deferRender: true,
pageLength: 10,
lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
columns: [
{ "data": "Identifier", className: "nowrap" },
{ "data": "Name" },
]
});
yadcf.init(table, [
{ column_number: 0, filter_type: "text", style_class: "form_control", filter_default_label: "" },
{
column_number: 1, filter_type: "select", select_type: "select2", filter_default_label: "",
select_type_options: {
data: opts,
width: '180px',
dropdownAutoWidth: true,
}
},
]);
You should use the data attribute (in your case with data/label properties), read the docs
Here is a working sample
var opts = [{value:0, label:"Some 1"},{value:1, label:"Some 2"}];
var table = $("#docTable").DataTable({
processing: true,
serverSide: false,
paging: true,
ordering: true,
deferRender: true,
pageLength: 10,
lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
columns: [
{ "data": "Identifier", className: "nowrap" },
{ "data": "Name" },
]
});
yadcf.init(table, [
{
column_number: 0, filter_type: "text", style_class: "form_control", filter_default_label: "" },
{
data: opts,
column_number: 1, filter_type: "select", select_type: "select2", filter_default_label: "",
select_type_options: {
width: '180px',
dropdownAutoWidth: true,
}
},
]);
jsfiddle
I am on DataTable 1.10.11 and yadcf 0.8.9 and using ajax data source. yadcf is working great however the column select filters are not populating with all possible results if I enable deferRender. If I set this to false all possible results appear in the column select filter. Could someone share with me how to get all possible results for the column select filters while using deferRender? Any help is greatly appreciated! BTW I am new to coding so if I did not explain something clearly please let me know.
Here is a sample of the code:
var table = $('#MyTable').DataTable({
responsive: true,
autoWidth: false,
deferRender: true,
iDisplayLength: 5,
aaSorting: [[9,'desc'], [3,'asc'], [4,'asc']],
ajax:{url:"./assets/json/" + xFileName + ".json"},
columns: [
{ "data": "col0" },
{ "data": "col1" },
{ "data": "col2" },
{ "data": "col3" },
{ "data": "col4" },
{ "data": "col5" },
{ "data": "col6" },
{ "data": "col7" },
{ "data": "col8" },
{ "data": "col9" },
{ "data": "col10" },
{ "data": "col11" },
{ "data": "col12" },
{ "data": "col13" }
],
columnDefs: [
{
"targets": [ 0,1,10,11,12 ],
"visible": false
}
],
sDom: "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-12'i><'col-lg-12 center'Bp>>",
sPaginationType: "bootstrap",
oLanguage: {sLengthMenu: "_MENU_ records per page"},
buttons: ['excelHtml5', ]
});
yadcf.init(table, [
{column_number : 2},
{column_number : 3},
{column_number : 4},
{column_number : 6},
{column_number : 7},
{column_number : 8},
{column_number : 13}],
{cumulative_filtering: true});
I would like to use cumulative_filtering and to have the filters display in the footer, not the header. Both of these features are working on their own, but when I include both options together the cumulative_filtering does not work (the tfoot option is still working). How can I use these two options together? Thanks!
yadcf.init(table, [
{ column_number: 1, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 2, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 3, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 4, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 6, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 7, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 8, filter_reset_button_text: false, select_type: 'select2', column_data_type: "html", html_data_type: "text" }
],
'footer',
{ cumulative_filtering: true }
)
Cumulative Filtering: http://yadcf-showcase.appspot.com/cumulative_filtering.html
Per the documentation - "Filters can be placed in the header (thead) or in the footer (tfoot) , second argument of yadcf constructor or third argument of init function"
The docs are a bit unclear (will update them soon about this feature),
Anyway since you want to specify the filters location and use the cumulative you should use it in the following way
yadcf.init(table, [
{ column_number: 1, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 2, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 3, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 4, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 6, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 7, filter_reset_button_text: false, select_type: 'select2' },
{ column_number: 8, filter_reset_button_text: false, select_type: 'select2', column_data_type: "html", html_data_type: "text" }
],
{
filters_position: 'footer',
cumulative_filtering: true
}
)
Its either the third argument as a string (for position) or third argument for an object with filters_position key and 'footer' as a value.
This is just a section of my JSON Data string as it is quite extensive...
{
"total": 2,
"page": 1,
"records": 15,
"rows": [
{
"id": 2148,
"cell": {
"MRN": "840134833",
"Hospital_Fin": "987141516",
"First_Name": "YELLOW",
"Last_Name": "CRAYON",
"Date_of_birth": "/Date(1253160000000)/"}
}
]}
And this would be how I set up my jqGrid...
$(document).ready(function () {
jQuery("#frTable").jqGrid ({
cmTemplate: { sortable: false },
caption: '#TempData["POPNAME"]' + ' Population',
datatype: 'json',
mtype: 'GET',
url: '#Url.Action("GetAjaxPagedGridData", "Encounters", new { popId = TempData["POPULATIONID"] })',//'/Encounters/GetAjaxPagedGridData/'+ '',
pager: '#pager',
loadonce: true,
height: 450,
gridview: true,
viewrecords: true,
rowNum: 15,
shrinkToFit: false,
autowidth: true,
colNames: [
'MRN',
'Hospital Fin',
'First Name',
'Last Name',
'Date of birth'
colModel: [
{ name: 'MRN', width: 125, align: 'left' },
{ name: 'Hospital_Fin', width: 145, align: 'left' },
{ name: 'First_Name', width: 115, align: 'left' },
{ name: 'Last_Name', width: 115, align: 'left' },
{ name: 'Date_of_birth', width: 145, align: 'left', formatter:'date', formatoptions: {newformat: 'm/d/Y'}}]
Now...
I look through JSfiddle and I do get the Json string back in the right format. In fact, That is how I was able to copy and paste to this fine website. So what am I missing? It looks like everything should be about right?
UPDATE
Do my col models and the names of my columns in my cell have to match up 100 percent? Maybe that would be someplace to take a look?
You use wrong format of JSON data. Compare your data with the data expected by jqGrid described in the documentation. To fix JSON data you can change it to for example the following
{
"total": 2,
"page": 1,
"records": 15,
"rows": [
{
"id": 2148,
"MRN": "840134833",
"Hospital_Fin": "987141516",
"First_Name": "YELLOW",
"Last_Name": "CRAYON",
"Date_of_birth": "/Date(1253160000000)/"
}
]
}
You need include additionally jsonReader: {repeatitems: false} in the list of jqGrid options.